Running SPA Demo fails with error 500

Hi,

I am trying to run the demo using the docker-image as described here: https://documentation.bloomreach.com/14/library/concepts/spa-integration/demo-projects.html

I have no experience using docker !
Starting the container using:

docker run --net=host bloomreach/xm-spa-example

=> I can not access cms or the site using http://localhost:8080/site/ or http://localhost:8080/cms/

so I tried:
docker run -p 8080:8080 bloomreach/xm-spa-example

Now I can access cms. After starting the example project (CSR) from ther sdk I can access the site via
http://localhost:3000/ without any issues.

But with http://localhost:8080/site/ I get an Server Error (Status 500) !

I found the Server Error topic in the trobleshooting section of https://documentation.bloomreach.com/14/library/concepts/spa-integration/troubleshooting.html
but I do not understand the solution, I assume, that the docker-image has the correct reverse-proxy configuration.

I guess it is an docker issue- correct ?

Can nobody help me???

Hello Thomas,

it’s a bit hard to tell what exactly goes wrong in your set up as there are many parameters involved. So I will try to guide in the best way possible.

First of all, getting a 500 server error from the site application (http://localhost:8080/site/) has nothing to do with the Server Error mentioned in the troubleshooting page you posted. The error mentioned on that page refers to preview and the proxy not being able to reach the SPA.

So if your site application is erroring I would advise checking your logs for any errors during startup.

Secondly, from my understanding you are running brXM with docker and the SPA without. If that is the case indeed first check your proxy rules in brXM as they might be referencing a docker container name expecting that you run both apps from the same image with docker. You should also make sure that your brXM can communicate with applications outside of its container.

In the case, both applications run with docker make sure that the correct service name is used in the proxy rule and both applications are on the same docker network.

HTH and regards,
Lef

Sorry now that I am thinking the proxy rule probably catches also http://localhost:8080/site/ and while you would expect to see the SPA you are getting a 500. So my feeling is that wherever the URL rewriter rule proxies to can’t be accessed by brXM. So the 2 last points mentioned in my previous reply stand.

Hi @Lef_Karamoulas ,

there are no errors during startup with docker:

15-Apr-2020 10:57:57.626 INFO [main] org.apache.catalina.core.AprLifecycleListener.lifecycleEvent Loaded APR based Apache Tomcat Native library [1.2.23] using APR version [1.6.5].
15-Apr-2020 10:57:57.629 INFO [main] org.apache.catalina.core.AprLifecycleListener.lifecycleEvent APR capabilities: IPv6 [true], sendfile [true], accept filters [false], random [true].
15-Apr-2020 10:57:57.629 INFO [main] org.apache.catalina.core.AprLifecycleListener.lifecycleEvent APR/OpenSSL configuration: useAprConnector [false], useOpenSSL [true]
15-Apr-2020 10:57:57.633 INFO [main] org.apache.catalina.core.AprLifecycleListener.initializeSSL OpenSSL successfully initialized [OpenSSL 1.1.1d  10 Sep 2019]
15-Apr-2020 10:57:57.896 INFO [main] org.apache.coyote.AbstractProtocol.init Initializing ProtocolHandler ["http-nio-8080"]
15-Apr-2020 10:57:57.922 INFO [main] org.apache.coyote.AbstractProtocol.init Initializing ProtocolHandler ["ajp-nio-8009"]
15-Apr-2020 10:57:57.927 INFO [main] org.apache.catalina.startup.Catalina.load Server initialization in [449] milliseconds
15-Apr-2020 10:57:57.960 INFO [main] org.apache.catalina.core.StandardService.startInternal Starting service [Catalina]
15-Apr-2020 10:57:57.961 INFO [main] org.apache.catalina.core.StandardEngine.startInternal Starting Servlet engine: [Apache Tomcat/9.0.29]
15-Apr-2020 10:57:57.970 INFO [main] org.apache.catalina.startup.HostConfig.deployDirectory Deploying web application directory [/usr/local/tomcat/webapps/site]
15-Apr-2020 10:58:00.834 INFO [main] org.apache.catalina.startup.HostConfig.deployDirectory Deployment of web application directory [/usr/local/tomcat/webapps/site] has finished in [2,864] ms
15-Apr-2020 10:58:00.835 INFO [main] org.apache.catalina.startup.HostConfig.deployDirectory Deploying web application directory [/usr/local/tomcat/webapps/cms]
15.04.2020 10:58:07 INFO  main [SearchIndex.doInit:659] Index initialized: /brxm/project/target/storage/workspaces/default/index Version: 3
15.04.2020 10:58:07 INFO  main [ConsistencyCheck.<init>:150] consistency check will skip {}     {http://www.jcp.org/jcr/1.0}nodeTypes
15.04.2020 10:58:07 INFO  main [ConsistencyCheck.run:244] Checking index of workspace default
15.04.2020 10:58:07 INFO  main [ConsistencyCheck.loadNodes:281] Loading nodes
15.04.2020 10:58:07 INFO  main [ConsistencyCheck.checkIndexConsistency:315] Checking index consistency
15.04.2020 10:58:07 INFO  main [ConsistencyCheck.checkIndexCompleteness:406] Checking index completeness
15.04.2020 10:58:23 ERROR main [LocalHippoRepository.start:329]

        Insecure default administrator credentials are enabled! Change the password!

15-Apr-2020 10:58:32.825 INFO [main] org.apache.catalina.startup.HostConfig.deployDirectory Deployment of web application directory [/usr/local/tomcat/webapps/cms] has finished in [31,989] ms
15-Apr-2020 10:58:32.828 INFO [main] org.apache.coyote.AbstractProtocol.start Starting ProtocolHandler ["http-nio-8080"]15-Apr-2020 10:58:32.841 INFO [main] org.apache.coyote.AbstractProtocol.start Starting ProtocolHandler ["ajp-nio-8009"]
15-Apr-2020 10:58:32.852 INFO [main] org.apache.catalina.startup.Catalina.start Server startup in [34,924] milliseconds
15.04.2020 11:36:22 INFO  http-nio-8080-exec-7 [AbstractBundlePersistenceManager.logCacheStats:876] cachename=defaultBundleCache[ConcurrentCache@13c33ae5], elements=1939, usedmemorykb=1765, maxmemorykb=8192, access=176784, miss=1941
15.04.2020 14:08:45 INFO  http-nio-8080-exec-9 [AbstractBundlePersistenceManager.logCacheStats:876] cachename=defaultBundleCache[ConcurrentCache@13c33ae5], elements=2030, usedmemorykb=2020, maxmemorykb=8192, access=177292, miss=2032

Maybe something is missing in the instruction here:

I understand the instruction so, that I start the docker image with:

docker run --net=host bloomreach/xm-spa-example
start React with:

$ npm install
$ npm run build
$ npm run start

But as mentioned, that does not work at all !
Is the Url-rewriter in the demo not configured correct?
Should with SPA localhost:8080/site deliver the pages ?
The instruction does not describe, how to run the React-App in docker :frowning: - as mentioned I have no experience with docker.

On the other hand - when I build the app with option 2 ( Create a local Bloomreach Experience Manager project) - what about the URL-Rewriter ? As I know this is an enterprise feature and I have no enterprise license! Does that mean, that I cannot use SPA at all?

I guess you are you running on Mac? On this page https://hub.docker.com/r/bloomreach/xm-spa-example there is a specific instruction regarding the proxy rule. Have you followed that instruction?

Also could you make sure that the brXM version and the SDK versions in the example react app that you are using match?

With option 2 the SPA Integration demo that you install from Essentials probably takes care of the required preparations. Not having an enterprise license doesn’t mean you can not use the SPA feature.
However, the integration part between the SPA and CMS is not possible meaning you won’t have editing capabilities in the Experience Manager.

Kind regards,
Lef

No, it is a Windows Machine!

Yes they match!

Hey Thomas,

As far as I am aware, if you are using SPA then your site url should be localhost:3000.

Localhost:8080 should not be delivering pages.

If localhost:8080/cms works, and you can access the channel manager normally and localhost:3000 delivers your site you should be good to go.

Kind Regards,
George

Yes, that works that way.
Preview in experience manager does not work- that should be an Reverse Proxy issue !? So demo does not work out of the box :frowning:
And link from @Lef_Karamoulas:

instructs to start docker on mac with -p 8080:8080 and on Windows with –net=host .
But my Windows Machine seems to think its a Mac :slight_smile:

Preview in experience manager does not work- that should be a Reverse Proxy issue !?

The preview will not work as it requires an enterprise version which as you said you don’t have.
See my last comment in the previous reply.

instructs to start docker on mac with -p 8080:8080 and on Windows with –net=host .
But my Windows Machine seems to think its a Mac

That’s why my guess was that you are running on Mac which I can not explain without looking into docker specifics.

Is that also true, when I run the demo as docker-image?

Can you share your urlrewriter configuration @Thomas ? I suspect that the brxm application cannot reach the react application from inside the container. You might need to replace the “localhost” with “host.docker.internal” (what @Lef_Karamoulas initially suggested, in more detail) This should fix the preview issue. (btw, If you’ve been using the docker image then you should be fine w.r.t enterprise version)

Sure! I did not change the rules of the demo (Docker-Image)

### Rewrite-Regel in <urlrewrite> XML *

<rule>
<!-- Rule 1: Exclude requests for Page Model API and binaries -->
<from>^(?:/[^\/]+)?(?:/_cmsinternal)?/(?:binaries|resourceapi|images)([\?/].*)?$</from>
<to last="true">-</to>
</rule>

<rule>
<!-- Rule 2: Ensure bloomreach-preview query parameter for preview requests -->
<from>
^((?:/[^\/]+)?/_cmsinternal(?:/[^\?]*)?)(?:\?((?!(.*&amp;)?bloomreach-preview=.*).*))?$
</from>
<to type="redirect" last="true">$1?$2&amp;bloomreach-preview=true</to>
</rule>

<rule>
<!-- Rule 3: Proxy requests to route to the SPA server -->
<from>^(?:/[^\/]+)?(?:/_cmsinternal)?([\?/].*)?$</from>
<to type="proxy" last="true">http://localhost:3000$0</to>
</rule>

Can you change http://localhost:3000$0 to http://host.docker.internal:3000$0 ?

I can try that- but React is not running in docker-container. Only CMS!

Exactly the reason why you should change that :slight_smile: see Explore networking features on Docker Desktop | Docker Docs search for host.docker.internal in the page

The host has a changing IP address (or none if you have no network access). From 18.03 onwards our recommendation is to connect to the special DNS name host.docker.internal , which resolves to the internal IP address used by the host. This is for development purpose and will not work in a production environment outside of Docker Desktop for Windows.

I tried that, but it did not work.
This is the output of my console:

Looks like the docker part definitely worked :slight_smile: Now you have an issue with the static files not loading. I believe this is because the PUBLIC_URL parameter does not work with the development mode. This is mentioned in the readme here: https://code.onehippo.org/cms-community/bloomreach-spa-sdk/tree/bloomreach-spa-sdk-14.1.0/examples/react-csr. You can try either running the prod build npm build or use this hack mentioned here with the homepage attribute in package.json https://github.com/facebook/create-react-app/issues/1487

ok- we are getting closer :slight_smile:
The hack does not work in my case :frowning:

Inspecting Network in Devtools of Chrome tell me the following URL:
http://localhost:8080/static/brx-theme.css
or
http://localhost:8080/static/js/main.chunk.js

I guess the correct URL should be:
http://localhost:3000/static/js/main.chunk.js

If so, how do I get there ?

By setting the

PUBLIC_URL=http://localhost:3000

But you probably already did that. But since you are running the react app in dev mode it is not picked up. You can try using the npm prod build. You can see the deployment section here https://create-react-app.dev/docs/deployment/