title: Hosting React app with Gitlab pages on root domain
body: <p>I have a React app, and I want to deploy it on Gitlab pages.</p>
  
  <p>I could successfully deploy it to: <code>https://company.gitlab.com/projectname</code></p>
  
  <p>but I am unable to deploy it on: <code>https://company.gitlab.com/</code>, I always get a 404</p>
  
  <p>Here is my configuration:</p>
  
  <p>.gitlab_ci.yml</p>
  
  <pre><code># Using the node alpine image to build the React app
  image: node:alpine
  
  # Announce the URL as per CRA docs
  # https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration
  variables:
    PUBLIC_URL: /
  # Cache node modules - speeds up future builds
  cache:
    paths:
    - node_modules
  
  # Name the stages involved in the pipeline
  stages:
  - deploy
  
  # Job name for gitlab to recognise this results in assets for Gitlab Pages
  # https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-requirements
  pages:
    stage: deploy
    script:
      - npm install # Install all dependencies
      - npm run build --prod # Build for prod
      - cp public/index.html public/404.html # Not necessary, but helps with https://medium.com/@pshrmn/demystifying-single-page-applications-3068d0555d46
      - mv public _public # CRA and gitlab pages both use the public folder. Only do this in a build pipeline.
      - mv build public # Move build files to public dir for Gitlab Pages
    artifacts:
      paths:
      - public # The built files for Gitlab Pages to serve
    only:
      - master # Only run on master branch
  </code></pre>
  
  <p>In App.js, I added <code>basename={process.env.PUBLIC_URL}</code></p>
  
  <pre><code>import React, {Component} from "react";
  import {BrowserRouter, Switch, Route} from "react-router-dom";
  import browserHistory from "react-dom";
  import "./App.css";
  import {HomeLayoutFr, HomeLayoutEn, MentionsLayout} from "./layout.js";
  const supportsHistory = "pushState" in window.history;
  export default class App extends Component {
      render() {
          return (
              &lt;BrowserRouter basename={process.env.PUBLIC_URL} forceRefresh={!supportsHistory}&gt;
                  &lt;div className="main"&gt;
                      &lt;Switch&gt;
                          &lt;Route history={browserHistory} path="/mentions"&gt;
                              &lt;MentionsLayout /&gt;
                          &lt;/Route&gt;
                          &lt;Route history={browserHistory} path="/en"&gt;
                              &lt;HomeLayoutEn /&gt;
                          &lt;/Route&gt;
                          &lt;Route history={browserHistory} exact path="/"&gt;
                              &lt;HomeLayoutFr /&gt;
                          &lt;/Route&gt;
                      &lt;/Switch&gt;
                  &lt;/div&gt;
              &lt;/BrowserRouter&gt;
          );
      }
  }
  </code></pre>
  
  <p>When I use a /project at the end of the url, I had to add: </p>
  
  <pre><code>variables:
    PUBLIC_URL: /projectname
  </code></pre>
  
  <p>in <code>.gitlab_ci.yml</code></p>
  
  <p>I also had to add:</p>
  
  <pre><code>"homepage": "https://company.gitlab.io/projectname",
  </code></pre>
  
  <p>in <code>package.json</code></p>
  
  <p>Any idea how to get out of the 404 error ???</p>