Issues deploying react under custom root path "/app" with create-react-app and react-router

Question

I'm deploying an app on a host that has the following setup:

I need to deploy under a custom root path /app for my React app that will sit under this umbrella. I'm using react-router v5 and create-react-app.

Problem

When I build the app (I'm using vercel's serve), I get a blank page. When I go to localhost:5000/app/, nothing shows up.

I did all the suggestions from here and here, but still can't get my app to load.

I'm also confused: what's the difference between using react-router's basename and CRA's homepage field? Should I be using both, or one or the other?

EDIT: Potentially found the problem. Setting homepage=/app also changes the paths for my JS bundle, which it wasn't recognizing (hence the blank page). I manually added a app folder inside my build dir, like so: build/app/static and it worked. Shouldn't CRA do this automatically?

My setup

app.tsx

<Router basename={process.env.PUBLIC_URL}>
  ...
</Router>

package.json

scripts: {
  "build-prod": "GENERATE_SOURCEMAP=false REACT_APP_ENVIRONMENT=production react-app-rewired build",
},
...
"homepage": "/app",

Command to serve the prod build locally

> npm run build-prod && serve -s build -l tcp://0.0.0.0:5000

The project was built assuming it is hosted at /app/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  bit.ly/CRA-deploy

I navigate to http://0.0.0.0:5000/app/ and get a blank page (no network calls).

What I tried

set homepage: "/app" in package.json source
set the basename for react-router source
The CRA docs shows an example using the full path of the website. That didn't work either:

"homepage": "https://example.com/app",

Is the process.env.PUBLIC_URL value coming in correctly? I could not find it in the build command, or if you have included it in a .env file. Essentially, homepage is used to access your assets relative to the value provided, e.g. your CSS files and images. Whereas the basename value is used by react-router to handle client-side routing relative to the value provided. Both should be included to make the app run correctly. — Mohit Karekar
– Mohit Karekar, Commented Oct 9, 2020 at 16:08
Yes, when I console.log process.env.PUBLIC_URL, I am seeing /app. Ah, I see - thanks for the clarification on homepage/basename!. So I see part of the problem - adding homepage=/app also changes the JS bundle's path from static/js/main.js to app/static/js/main.js. I manually added an app folder inside my build dir and moved my static folder inside it. It worked. Shouldn't this happen automatically? — tbd_
– tbd_, Commented Oct 9, 2020 at 17:13

tbd_ · Accepted Answer · 2020-10-09 18:34:12Z

1

I got it working, although it's a workaround.

As Mohit's comment mentions, the homepage field makes it so all the assets are pre-pended by that sub-path defined in homepage. I was getting a blank screen because it couldn't find the new path to my JS bundle, aka it went from serving /build/static/js/.. to /build/app/static/js/...

Solution (workaround)

Create a new folder called app (or whatever your new root path is called) under your build directory.
Move your /build/static folder to build/app/static.
This is what it looks like with Dockerfile:

RUN pwd
RUN echo $(ls -1 $pwd)
RUN echo $(ls -1 ./build)
RUN mkdir -p ./build/app
RUN mv ./build/static ./build/app # now it should be /build/app/static
RUN echo $(ls -1 ./build)

You can take out the pwd and echo lines, I added it so I could see it working.

I don't know why CRA doesn't do this by default. It might be because I'm using react-app-rewired, which messes around with CRA's webpack config?

answered Oct 9, 2020 at 18:34

tbd_

1,3184 gold badges22 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andy Over a year ago

I'm also having this problem but I've not seen anyone else comment on it so there must be some reason it's not happening for anyone else. did you ever get to the bottom of it?

Andy Over a year ago

OK I get it now (in my case at least). if you are wanting to serve it from an external web server, you will be copying the whole build folder into the /app folder on the web server, so the index file will be /app/index.html and static already will be /app/static, which means you shouldn't need this workaround. In my case I was wanting to serve it with npm's serve -s build which does require a workaround - it seems there's no way for serve to use a folder other than root

ManuelH Over a year ago

Also ran into the same issue. Thanks for providing a clear solution/workaround.

Collectives™ on Stack Overflow

Issues deploying react under custom root path "/app" with create-react-app and react-router

Problem

My setup

app.tsx

package.json

Command to serve the prod build locally

What I tried

1 Answer 1

Solution (workaround)

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Problem

My setup

app.tsx

package.json

Command to serve the prod build locally

What I tried

1 Answer 1

Solution (workaround)

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related