Host your React-App with Gitlab

Rajdeep Deb
Jun 19 · 3 min read

“Life begins at the end of your comfort zone” — Neale Donald Walsch

Photo by Tudor Baciu on Unsplash

We are not here for Life-Mantras…right…?
We are here to know how to host a React-App with Gitlab.
Wait…are you here for something else..? I hope you would invest your time responsibly. Ahh..!! not another mantra.

React has been around for quite long and we don’t want another blog covering the basics.
So my assumption is that you got the following covered:
1. A working react-app (reference-link)
2. Basic Git understanding and a Gitlab account (go-now)

Step Zero

Create a new project on Gitlab and push your react-app
OR
May be you already have this setup done.

First Step

Enable Page support for your project. The setting would have to be for Everyone for the website to be accessible publicly. Please note that the project’s visibility is a different setting.

Setting > General > Visibility > Pages

Second Step

Create a CI file ( .gitlab-ci.yaml ) in your project’s root directory

image: node:10.16.3 # change to match your project's node version

cache:
paths:
- node_modules/

before_script:
- rm -rf build
- CI=false npm install

pages:
stage: deploy
script:
- CI=false npm run build
- rm -rf public
- cp build/index.html build/404.html
- mv build public
artifacts:
paths:
- public
only:
- master

Once committed, this file will help get the pipelines trigger everything we do in our local machine. Install the required dependencies, run for a production build.

Checkout this link for what all we can have a brief look into what all is possible with the .gitlab-ci.yaml

The line cp build/index.html build/404.html helps us to redirect every route to the index page. This is necessary for React or any other Single Page Applications.

Third Step

A successful pipeline

CI/CD > Pipelines

The pipeline will now do it’s job and you would see a similar page.

Seeing is believing

You should now see a link in Settings > Pages
You can find the link to your application in here. The link might take some time to work but I found it to be fast enough for me.

Settings > Pages

You’ve successfully deployed a react application with Gitlab CI/CD and it’s gonna update itself with each of the commit you make. 😃

Well, sometimes steeping out of your comfort zone gets you a new one, and save time for always.😉


Don’t forget to hit the 👏 if you like this or let me know your thoughts in the response section below.

Frontend Weekly

It's really hard to keep up with all the front-end…

Rajdeep Deb

Written by

6+ years with Node.js -> NoSql -> APIs -> APPs revolving around my mind. Trying escape to AWS.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Rajdeep Deb

Written by

6+ years with Node.js -> NoSql -> APIs -> APPs revolving around my mind. Trying escape to AWS.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store