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)
Create a new project on Gitlab and push your react-app
May be you already have this setup done.
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.
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
- rm -rf build
- CI=false npm install
- CI=false npm run build
- rm -rf public
- cp build/index.html build/404.html
- mv build public
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
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.
A successful pipeline
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.
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.