Question


CNO
US
Last activity: 2 Sep 2020 10:33 EDT
React Starter pack
Hi, Anybody used react starter pack. Can you please explain the steps to use it on localhost
https://community.pega.com/marketplace/components/react-starter-pack
-
Like (0)
-
Share this page Facebook Twitter LinkedIn Email Copying... Copied!
Accepted Solution


Pegasystems Inc.
US
Can you change the CORS filter parameter "cors.allowed.headers" in your web.xml to match the following and let me know?
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>If-Match,access-control-expose-headers,Authorization,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
</init-param>
Updated: 30 Jan 2019 9:46 EST


Pegasystems Inc.
IN
Hello
i see this is an exchange component. For queries on this, it is better if you contact the owner of the component.
@issas can you please help.


Pegasystems Inc.
US
Please follow the "## Custom Configuration" in README.md. Also make sure that you have configured CORS for your Pega application server. Here is how to configure CORS for Tomcat: https://tomcat.apache.org/tomcat-8.0-doc/config/filter.html#CORS_Filter


OCBC BANK
SG
Hi I installed personal edition 8.3 and when i imported cable connect RAP into Application tried to user ReactStarterPack813 after changing web,xml in web-inf and in tomact conf folder still iam facing issue as below:
Failed to load resource: the server responded with a status of 403 ()
login:1 Access to XMLHttpRequest at 'http://localhost:8085/prweb/api/v1/authenticate' from origin 'http://localhost:3000'
has been blocked by CORS policy: Response to preflight request doesn't pass access control
check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
i added filter settings as below
Hi I installed personal edition 8.3 and when i imported cable connect RAP into Application tried to user ReactStarterPack813 after changing web,xml in web-inf and in tomact conf folder still iam facing issue as below:
Failed to load resource: the server responded with a status of 403 ()
login:1 Access to XMLHttpRequest at 'http://localhost:8085/prweb/api/v1/authenticate' from origin 'http://localhost:3000'
has been blocked by CORS policy: Response to preflight request doesn't pass access control
check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
i added filter settings as below
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.origins</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
</init-param>
<init-param>
<param-name>cors.exposed.headers</param-name>
<param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
</init-param>
<init-param>
<param-name>cors.support.credentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.preflight.maxage</param-name>
<param-value>10</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
kindly help me in this.


Pegasystems Inc.
US
Hi Venkatesh, your server CORS settings are not configured properly. Things to check:
Did you add your CORS filter from above to web.xml?
Did you restart the server after?
Is your Pega Endpoint-CORS policy mapping configured properly?


OCBC BANK
SG
Please find attached web.xml this is the one i changed in webapps /prweb
Is your Pega Endpoint-CORS policy mapping configured properly?-- i didn't get what you are referring regarding DSS i checked three DSS they are fine as mentioned in PEGA help.
yes i shotdown application after making changes and restarted My Personal Edition. Still Facing The Issue..
Accepted Solution


Pegasystems Inc.
US
Can you change the CORS filter parameter "cors.allowed.headers" in your web.xml to match the following and let me know?
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>If-Match,access-control-expose-headers,Authorization,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
</init-param>
-
Leelabiram Sriramulu


OCBC BANK
SG
Thank You very much.
Issue been Resolved Regarding CORS now i was facing different issue
"Pega_API_022: Use of TLS/SSL is required" when i remove authentication in service package i am getting
TypeError: Cannot read property 'forEach' of undefined kindly help me in this. how to proceed request for http instead of https in personal edition


Pegasystems Inc.
IN
Hi @Venkatesh.Vinnakota -
Glad to know the original query is solved. I have marked the comment as answer on your behalf.
I read that you have a new question as well. I'd suggest you create a new post for additional questions. It ensures your new question gets the right visibility in the community. Here is a direct link to Write Post .
Thanks.


Aaseya
SA
Step1: Download (React Starter Pack)
https://community.pega.com/marketplace/components/react-starter-pack
Step2:Open the ReactStarterPack In your favorite editor and open the README and follow the Installation Instructions
Step1: Download (React Starter Pack)
https://community.pega.com/marketplace/components/react-starter-pack
Step2:Open the ReactStarterPack In your favorite editor and open the README and follow the Installation Instructions
Once you install, here Installed Yarn
· Yarn build
· Yarn start
React application will loaded
## Custom Configuration
If you want to point the application to a different server follow these steps:
* Open `PegaApp/src/_services/endpoints.js` and modify the BASEURL field to your desired system.
* Ensure that your desired application includes the ruleset Pega-API:08-01 (or higher).
* Ensure that your access group includes the PegaRULES:PegaAPI role.
Now login with your credentials.
Open Case


Verizon
US
Getting this error when i hit the login page- login button
"TypeError: Cannot read property 'forEach' of undefined


Pegasystems Inc.
US
Here is my analysis:
- The stack trace shows that the caseTypes property is undefined.
- caseTypes property initial value is an empty array (see case.reducer.js): caseTypes: [],
- caseTypes property is populated by calling caseService.getCaseTypes(), see case.service.js, using the REST /casetypes endpoint:
get(endpoints.BASEURL + endpoints.CASETYPES, { headers: authHeader() })
- After the REST call, caseTypes value is undefined
That means:
- The REST call failed: check the network for URL or authentication errors
or
- The current operator doesn't have privilege: check the operator default access group roles contains PegaAPI
or
- The current logged in operator doesn't have case types in his/her default access group


Pegasystems Inc.
US
Hi.
In addition to the comments above, the error ""TypeError: Cannot read property 'forEach' of undefined" typically occurs when the "api" Service Package has Authentication turned off.
I have found that the error ""TypeError: Cannot read property 'forEach' of undefined" is usually seen when the "api" Service Package has been set to not require Authentication. The "api" Service Package needs to have "Requires authentication" checked and, for typical use with the Starter Pack, the Authentication type should be "Basic" and you can leave "Require TLS/SSL for REST services" in package unchecked.
So, please check these settings if the earlier suggestions haven't solved the problem you are seeing.