How to build a react project and deploy it in 10 minutes

We are here again to explain you how we can create a React project and deploy it on gitlab pages in 10 minutes.

For that, we are going to use a powerful tool called create-react-app . This is best way to start building react projects in few seconds, so we focus on the business straightaway.

The details on how to install it and create your own project can be found in the documentation

The next step is create the .gitlab-ci.yml file, so you can set the continuous integration system on gitlab. There are many ways for do it, but we propose this simple configuration:

image: node:6.11

pages:
  script:
    - npm install
    - CI=true npm test
    - CI=true npm run build
    - rm -Rf $CI_PROJECT_DIR/public/*
    - mv build/* $CI_PROJECT_DIR/public/
  artifacts:
    paths:
      - public

  only:
    - master

What the above does is the following. Firstly we set the docker image that will be used as deployment base for our project. In this case, we use an image with node 6.11. Then, we run our scripts in order to install node dependencies, check (and pass) the unit tests and build project and finally move to public folder.

That’s all. Now you need to set up your gitlab and web server in order to deploy static files from public folder.

After all, every git push, gitlab will start building a new image, it will run the tests and will deploy on public folder if they everything is successfull.

Very easy and very powerful!