React basic 8 — Build React App and Host it on Server
In the previous post (React basic 7 — Render a List from the API response), we've got to render image data retrieved from the Unsplash API. Before going forward, I thought it's important to host the work-in-progress app on a server, so others can see what we've built so far, and we can see how the loading speed is in the real environment. The create-react-app framework provides an easy build process, but there are some small pitfalls to pay attention to. In this post, I've covered the four basic steps to upload React apps to a subdomain directory of server.
1. Add "homepage" to your package.json File
By default, built app from the create-react-app would assume it runs in the root directory of your server. To override this, you can add homepage attribute to the package.json file.
“homepage”: “http://yoururl.com/yourpath",Extra: In order for React app to work properly, you may need to make a small change to your server settings, which I will cover later. I found it easier to host on a subdomain instead of a subdirectory. If you still need to host your app on a subdirectory of your server, you should add a basename to a Router.
<BrowserRouter basename="/subdirectory-name">
...
</BrowserRouter>
