How to setup a production-ready Devops environment for React without a penny— Part 1
If you like me, have countless side projects, and want to deploy your project in industry-standard, but don’t want to spend too much money? I believe this series can help you.
In this series, I will teach you how to deploy your app in multi environment with CI/CD pipeline, using Firebase and Gitlab CI/CD only. And the most important part is, it costs ZERO dollar!
Part 1: Project setup and deployment
Part 2: CI/CD pipeline for auto deployment
Part 3: Multi-environment setup
Before we start, let me talk about why I choose Firebase and Gitlab. If you are a beginner, working on some side projects, money is probably one of the biggest concern. Firebase and Gitlab provides full range of products that help you to build your project. If you are looking for a solution platform that can done thing perfectly in free plan, firebase and gitlab are good choices for your.
In this series, we will talk about how you can
- Deploy your react web app to firebase hosting
- automate deployment process with gitlab CICD
- Setup multiple environments(dev and production)
So, let’s get started!
Step 1: Create Gitlab project
To use Gitlab CI/CD, you have to create Gitlab account. One good thing about Gitlab CI/CD is that it is not required to use Gitlab repository for Gitlab CI/CD. If you prefer to use Github or even self-host git server, you can do so by New Project > Run CI/CD pipelines for external repositories. If you have no preference, create a blank new project in Gitlab is a good choice as it can save your time in integrating those platforms.
Step 2: Create Firebase project
Firebase provides several useful features, such as real time database, authentication, analytics, etc. In our use case, we will host our react app on Firebase hosting. The reason I choose Firebase because no setup is needed, and it provides a domain name and HTTPS support automatically, for FREE! If you already have a custom domain name, you can also link it to Firebase.
To kickstart, you have to create a new Firebase project. You can do so by go to Firebase console, login to your google account, and click new project.
You can create your project with any name, but you need to pay attention to the project ID. Firebase will auto generate a ID to your project by default, and you can customize it by clicking the pencil icon. This ID is extremely important because your hosting URL will be
[project-id].firebaseapp.com . If you are not going to have your own custom domain name, and you want the URL to be pretty, make sure your project ID is good enough. Once you created the project, you can no longer edit the ID. So make sure you won’t regret it in the future.
After the naming, Firebase will ask you to enable Google Analytics for this project. You can enable it if you needed, or setup afterwards if you are not sure what it is.
Once it’s completed, you will see the project overview in the Firebase console.
Step 3: Deploy your app to Firebase storage
To deploy your app to Firebase hosting, you have to first install Firebase CLI. Go to your terminal and install in your computer by
npm install -g firebase-tools
Then, go to the root directory of your project, and login using
Once you logged in, you can tell firebase what service you want to use in this project. In this case, we use the hosting service.
firebase init hosting
Firebase will ask you several questions.
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File public/index.html already exists. Overwrite? No
(PS: If you use create-react-app without any custom config, the default build folder will be
/dist . )
After that, firebase will auto generate
Finally, you can publish your work to the world by
firebase deploy --only hosting
If we want to deploy automatically, it’s kind of difficult to re-login every time. Therefore, we need to use a access token which can be used to re-login. Firebase provides a very simple way to do it.
After login, a access token will be generated and print in the console. Then you can deploy by
firebase deploy --only hosting --token FIREBASE_TOKEN
This command will be used in our CICD pipeline.
In this article, we have discussed how to setup Gitlab and Firebase, and deploy our app to Firebase. In part 2, we will talk about how to automate entire deployment using Gitlab CI/CD. Stay tuned~