Question

How to install React JS and how to use react components in pega 8.2

Hi,

I want to configure react js and have to develop UI using react components in pega 8.2.

I have gone through the react starter pack: https://community.pega.com/marketplace/components/react-starter-pack . Is there anyone who already used react components in pega UI, please let me know the procedure steps to configure react components in Pega UI.

Correct Answer
December 10, 2019 - 12:56am

Hi All,

Thank you for your help.

I have found the root cause for this issue. To configure the URL to our desired system, we need to modify the endpoint.js file with our desired system URL. In the place of URL, we need to provide full web address including our system's api name.

For example, https://{desired system URL}/prweb/api/{v1}

Here, v1 is the name of the api. Search in your pega application with corresponding api name and you will get the full web address of desired system.

Once the URL is modified, the http://localhost:3000/ will be launched and now you can use your own credentials to login into application.

Comments

Keep up to date on this post and subscribe to comments

November 25, 2019 - 6:44am

November 26, 2019 - 2:25am
Response to JonJames_GCS

Hi @JonJames_GCS,

Thank you!

I have already gone through read me file provided in the react starter pack. Please find the below steps mentioned in that file:

"Run the following commands:
    * `yarn install`
    * `yarn start`

This should open your browser to http://localhost:3000, which is where the application will be served."

 

As per this command, the browser is opening but not able to login using the credentials provided and getting 'Network error' message every time.

Then i tried to modify the endpoints.js file to point the application to different server. but still it is launching the same above mentioned browser path.

Could you please let me know whether i need to change any other configurations so that i can connect with my server and start using react components in pega?

 

 

November 26, 2019 - 4:34am
Response to ArulM432

Did you try to look into Pega logs?

When you click login, it triggers dispatch action 

userActions.login(username, password)

(it's in LoginPage.js component).

The action itself defined in user.service.js:

  1. function login(username, password) {
  2. const encodedUser = btoa(username + ":" + password);
  3.  
  4. return axios
  5. .get(endpoints.BASEURL + endpoints.AUTH, {
  6. headers: { Authorization: "Basic " + encodedUser }
  7. })
  8. .then(function(response) {
  9. localStorage.setItem("user", encodedUser);
  10. return encodedUser;
  11. })
  12. .catch(function(error) {
  13. return Promise.reject(getError(error));
  14. });
  15. }

You also could try to add "debugger" in the promise resonse to see what exactly you receive

December 10, 2019 - 12:56am

Hi All,

Thank you for your help.

I have found the root cause for this issue. To configure the URL to our desired system, we need to modify the endpoint.js file with our desired system URL. In the place of URL, we need to provide full web address including our system's api name.

For example, https://{desired system URL}/prweb/api/{v1}

Here, v1 is the name of the api. Search in your pega application with corresponding api name and you will get the full web address of desired system.

Once the URL is modified, the http://localhost:3000/ will be launched and now you can use your own credentials to login into application.