Deploy react app on static web host

Deploying a react app is an important step to get your frontend / backend to the your customers.

The deployment can be performed differently, using a web host that allows to run node or using a static web host that only allows to run rudimentary javascript and HTML.

Following, I’ll describe my journey to get my react app up and running on a static web host.

First, creating a react app is not that difficult. You can use an already generated template (with all relevant functions and stuff) or can create your own stuff from scratch.

To build (compile the react code to javascript) I’ve used react-scripts build.

Next, I’ve copied the output (contained in the build folder), to the corresponding web host (I’m using a sub-domain of my domain).

React is a one page framework, meaning, after compiling, the complete content (regardless of your folder structure) is put into one file. This leads to the issue that I couldn’t use different URLs (meaning subdomain.domain.eu/something), because the react app was only running on subdomain.domain.eu and /something was not found. A 404 was returned.

To fix this, I’ve had to add the host URL to the package.json and I’ve had to create a .htaccess that enforces the redirecting of any URL to the subdomain.domain.eu (in the backend, not visible to the user) to get the right content rendered.

The content of the .htaccess file is

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

Moving everything to the correct place (the static folder inside the build folder has to be moved to the top level), one can access the complete React-App on the static web host.