React building for Relative Path

kdj(57)
Published in
#kr-dev
Words
189
Reading
1 min
Listen
Play
9y

If you want to publish your react app on the static web server,
here is a tip "building for relative path".
Of course, it is for production build.

Starting a project

You may start a new react project by create-react-app.
While developing, turn on the dev server

$ npm start

Dev server is just for development supporting hot plug & auto loading

Production Build

$ npm run build

./build folder created, there is production code.
You can serve the folder in static web server.

The problem is

"It is serviced only on / (root)"



If you want to publish on my github.io page in myprog folder,
you need to do something more.

1. First step is in package.json



add

"homepage": "."

It makes any relative path works.

You can set "/myprog/", and it works only on the folder.
You can also set "http://foo.bar/myprog", it only works on the URL.

2. Second step is in src/index.js



If you use BrowserRouter, you need to set the path here
If not, skip the second step.

put basename

<BrowserRouter basename="/myprog/"><App /> </BrowserRouter>



That's all
You can run your react App on static web service.

React building for Relative Path | Ecency