React with Liferay

Introduction :

React has gained immense popularity as a powerful JavaScript library for building user interfaces. On the other hand, Liferay is a robust open-source enterprise portal platform widely used for developing scalable and feature-rich web applications. In this blog post, we will explore the integration of React with Liferay and discuss how this combination can empower developers to create dynamic and interactive web experiences.

Here three steps are follow for using React with Liferay

1.Benefits of Combining React with Liferay.

2.Create react module in liferay

3.Implementation in liferay with Apollo client

Benefits of Combining React with Liferay

1. Developers may take advantage of Liferay's functionality, such as user authentication, content management, and workflow management, while utilizing React's capability with the Liferay React Module.
2. Developers can create apps using a suite of tools and components provided by the Liferay React Module.
3. Modular and reusable component-based development with React.js.
4. React.js components combined with Liferay portlets allow for flexible page creation.
5. Ability to use the React.js development environment and libraries.
6. Building Liferay portal functionality for single-page applications (SPAs). The virtual DOM and effective rendering of React.js have improved performance.
7. React.js supports cross-platform compatibility for developing applications that work on various devices.

Implementation of React module in liferay steps are as follow :

1. Open the terminal where you need to place the react module.

• Use npm to install yo

1npm install -g yo

2. Using npm, install the Liferay JS Generator.

1npm install -g yo generator-liferay-js

3. Generate a React based portlet bundle project for deploying your app to your Liferay DXP installation.

1yo liferay-js

4. Select React Widget.

5. Write project name.

• If you want localization support then write yes otherwise no.
• If you want configuration support then write yes otherwise no.
• You have to give the name to your react module in widget list.

• Give your liferay path.

6. Give yes for generating sample code.

7. After that , deploy your bundle.

8. Your React app is deployed and now available as a widget that you can add to site pages.

• First go to widgets tab -> User Web -> Drag and drop User Web -> Publish.

9. React Application successfully render in Liferay.

Implementing Authorization in Liferay with Apollo Client.

Introduction:

Liferay is a robust portal platform known for its extensive authorization model, allowing fine-grained control over user access and permissions. Apollo Client, on the other hand, is a powerful GraphQL client for building data-driven applications. In this blog post, we will explore how to combine the authorization capabilities of Liferay with the flexibility of Apollo Client to implement secure and controlled data access in your React applications.

1. Set up Apollo Client:

First, set up Apollo Client in your React application. Install the necessary dependencies:

1npm install @apollo/client graphql

2. Then, create an instance of Apollo Client and configure it to connect to your Liferay GraphQL endpoint:

• Create client.js file in src folder and write down the following code which is given in the image.

3. Import client and ApolloProvider in index.js as given in the image.

• Put AppComponent in ApolloProvider as given in the image.

4. Define GraphQL Queries/Mutations with Authorization:

• Create queries.js file in src and put your query as shown in image.

5. Execute Queries/Mutations with Authorization: In your React components, you can now execute the queries/mutations using Apollo Client and handle the authorization response.

• In the example above, the useQuery hook is used to execute the GET_ALL_USERS query.