Hosting React app with Gitlab pages on root domain

I have a React app, and I want to deploy it on Gitlab pages.

I could successfully deploy it to:

but I am unable to deploy it on:, I always get a 404

Here is my configuration:


# Using the node alpine image to build the React app
image: node:alpine

# Announce the URL as per CRA docs
# Cache node modules - speeds up future builds
  - node_modules

# Name the stages involved in the pipeline
- deploy

# Job name for gitlab to recognise this results in assets for Gitlab Pages
  stage: deploy
    - npm install # Install all dependencies
    - npm run build --prod # Build for prod
    - cp public/index.html public/404.html # Not necessary, but helps with
    - 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
    - public # The built files for Gitlab Pages to serve
    - master # Only run on master branch

In App.js, I added basename={process.env.PUBLIC_URL}

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 (
            <BrowserRouter basename={process.env.PUBLIC_URL} forceRefresh={!supportsHistory}>
                <div className="main">
                        <Route history={browserHistory} path="/mentions">
                            <MentionsLayout />
                        <Route history={browserHistory} path="/en">
                            <HomeLayoutEn />
                        <Route history={browserHistory} exact path="/">
                            <HomeLayoutFr />

When I use a /project at the end of the url, I had to add:

  PUBLIC_URL: /projectname

in .gitlab_ci.yml

I also had to add:

"homepage": "",

in package.json

Any idea how to get out of the 404 error ???

1 answer