React is the javascript library that helps to create a stateful userside web application. If you are planning to create an app that does not require server side computation at all then gitlab pages will be an excellent method to disclouse your creation to the rest of the world. The gitlab pages are not only free like github pages but also offers additional feature of being able to add your own domain name and ssl certificate.

The process of hosting react app on gitlab pages requires the understanding of CI(Continuous Integration) pipleline of the gitlab but it is not complicated and you can get the gist and start with your own apps in minutes once you go through the following tutorial. The process of hosting react app on the gitlab pages can be achived in the following way.

  1. Create a gitlab repo for the hosting your react app

Every repo in the gitlab.com can be used to host gitlab pages. But there are two kinds of the gitlab pages; which mostly matters if you dont have your own domain name and your thinking of hosting your site on the default github pages. The gitlab pages created will be hosted on <username>.gitlab.io/<repo> domain. One exception of this policy is repo <username> which acts as the default website that is being hosted on <username>.gitlab.io.

  1. Create a react app using create-react-app

We can use create-react-app to create a new react app. It gives a basic directory structure of the react-app and also is the tool that we are using with the giltab CI integration tools to host the latest committed app on the site.

  1. Modify the package json file

There are some basic changes that you want to do before sucessfully deploying the app on the gitlab pages. Based on the above information of the domain in which you will be hosting the react-app, you will have to include the following line in the package.json file of the react-app.

{
  "name": "<app_name>",
  "version": "<app_version>",
    "homepage":"<base_url>",
    ...
    ...
}

You need to modify that package.json file to contain the appropriate <app_name>, <app_version>and most importantly the <base_url>

  1. create a .gitlab-ci,yml file

The .gitlab-ci.yml is the directive file for the process of the continuous integration.

image: node:<version>

pages:
  stage: deploy
  script:
    - npm install
    - npm run build
    - rm -rf public
    - mv build public
  artifacts:
    paths:
      - public
  only:
    - master

The gitlab CI testing runs from the docker images. So the image: node:<version> <version> refers to the node package version that you are currently using right now.

We have specifed pages job which runs the list of sequential script on master repo only and the list of commands should ulitmately put the static site on public path artifracts where the gitlab looks for static site to host.