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 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>

2. Add “PUBLIC_URL” to reference assets in the public folders.

In my project, I stored static image assets in the "public" folder, instead of "src" folder. The app can reference those assets without a problem when you run it locally, but not when you build the app for hosting, because the build process keeps files in the public folder untouched. To successfully reference those assets in the public folder, you need to add to urls in the app, just like the JSX example below.

<div 
className=’icon’
style={{
backgroundImage:
`url(${process.env.PUBLIC_URL}/img/icons/arrow.svg)`
}}
></div>
<img alt='icon-close' src={`${process.env.PUBLIC_URL}/img/icons/close.svg`} /><Link href = {`${process.env.PUBLIC_URL}/about`}/>

3. Build app

Simply .

Then, you just have to place files inside the newly created "build" folder to the right directory of your server. That's it!

Inside your React project, “build” folder gets created after processing the “build”

4. The issue with a single page application

React is a single page application, and Router manages what content to render in each page urls. (I plan to cover Router's basics in the next entry).

In the conventional web apps, when you type in "http://yoururl.com/", it renders at the root directory; when you type in “http://yoururl.com/about", it tries to render located at the "/about" directory. This is how the HTTP server is set as a default, but React app wants to process slightly differently.

Since React is a single page application, there is only one located at the root directory of the app, and the app wants the server to process this root file no matter what URL was typed. For example, when a user tries to access “http://yoururl.com/about" or “http://yoururl.com/contact", the same at the root directory should be read. What changes the content in React is Router, a navigational component to switch what page to render depending on URLs.

Because of this background, we want to make sure that your server is set to read at the root only, no matter what URL was typed as long as if it's within app's directories. To do so, you need to create a file, open it in a text editor and add the below content. Then place this file at the root directory of your server, in our case the root directory of the subdomain.

<IfModule mod_rewrite.c> RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ — [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>

This should be it! And I should cover the Router next.

Table of content

React basic 1 — “Hello React World”. Setting Up Your First React App

React basic 2 — JSX, the syntax extension to JavaScript that looks like HTML

React basic 3 — Reusable Functional Components

React basic 4 — Class Based Component and Lifecycle Methods

React basic 5 — Basic Event Handlers

React basic 6 — Use Axios Library to Fetch Data

React basic 7 — Render a List based on the API response

React basic 8 — Build React App and Host it on Server

Reference

Deploy / Host your React App with cPanel in Under 5 Minutes

Deployment | create-react-app.dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store