Skip to content
GitLab

Serve the root index.html for all client-side routes when hosted in Netlify or GitLab Pages

Open Administrator requested to merge github/fork/nfriend/nfriend-add-_redirects-file into main

Created by: nfriend

What does this PR do?

Adds a _redirects file that allows client-side pushState routing to work out of the box when deployed on Netlify or GitLab Pages.

More details about the _redirects file can be found here. Here's a section about this specific setup.

Relevant create-react-app docs

https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing

How to test

  1. Create a new GitHub repo

  2. Scaffold a new project using this PR's branch of create-react-app

  3. Commit and push

  4. Using a Netlify account, connect Netlify to the new GitHub repo created in step #1

  5. Use the default Netlify options to deploy the site

  6. Verify that all URL routes result in the root index.html being served. For example, navigating to https://your-netlify-app-here.netlify.app/a/client/side/route should look like this: working

    In contrast, without the _redirects file, Netlify would serve up a 404 page:

    not-working

The process for testing on GitLab Pages is similar, although it involves a few extra steps (setting up a .gitlab-ci.yml pipeline to publish a Pages site).