Simplest way to put everything under http://localhost:3000/app instead of http://localhost:3000/ in React

Question

How to change root path of React app, to be specific: all html, css and js will be under http://localhost:3000/app instead of just http://localhost:3000?

Is there a simple way to amend existing app to just have one more level?

(this is useful when having reverse proxy e.g. nginx or apache in front of the React)

Note that compiled project should also have the same /app prefix everywhere

Many thanks

score 1 · Accepted Answer · answered Jun 05 '19 at 23:05

Found solution for compiled code!

Add to package.json

  "homepage": "/app/",

Add to index.html

<head>
  <base href="%PUBLIC_URL%/">
</head>

Now build the app with npm run build

Copy files to web server (e.g. Nginx) cp -r build /usr/share/nginx/html/app

Access this at:

http://localhost/app

So all paths should have prefix app/ now

1 Answers1