React - Deployment - Routing for client side router

create-react-app

For a create-react-app React application, all URL must be redirected to the index.html page.

Example for a deployment with the following server:

• Apache: in a htaccess file with the module apache rewrite. Redirect all URL to the index.html page

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    Options -MultiViews
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]
</IfModule>

• Node Express

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function (req, res) {
   res.sendFile(path.join(__dirname, 'build', 'index.html'));
 });

• Serverless Hosting - Now - from https://zeit.co/examples/create-react-app

{
    "version": 2,
    "name": "my-react-app",
    "builds": [
        { "src": "package.json", "use": "@now/static-build", "config": { "distDir": "build" } }
    ],
    "routes": [
      { "src": "/static/(.*)", "headers": { "cache-control": "s-maxage=31536000,immutable" }, "dest": "/static/$1" },
      { "src": "/favicon.ico", "dest": "/favicon.ico" },
      { "src": "/asset-manifest.json", "dest": "/asset-manifest.json" },
      { "src": "/manifest.json", "dest": "/manifest.json" },
      { "src": "/precache-manifest.(.*)", "dest": "/precache-manifest.$1" },
      { "src": "/service-worker.js", "headers": { "cache-control": "s-maxage=0" }, "dest": "/service-worker.js" },
      { "src": "/(.*)", "headers": {"cache-control": "s-maxage=0"}, "dest": "/index.html" }
    ]
}

React-snapshot

With React - React-Snapshot creating pre-rendered pages, example of htaccess to use for an Apache deployment after a build with react-snapshot

Options -MultiViews
RewriteEngine On
RewriteBase /

# Redirection to the HTML page
RewriteCond "$1.html" -f
RewriteCond "$1" !-f
RewriteRule "^(.*)$" "$1.html"

# Last one
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]