I decided to migrate the Typolino application to GitLab and this blog post describes how I did it.
Until now I hosted my code on GitHub or Bitbucket. I wasn’t really interested in GitLab. But after taking a closer look I realized that GitLab has some very nice features aboard, specifically in the area of CI/CD. I’m really new to GitLab, so apologies if I did some things wrong – happy to learn how to do it better.
First steps
The first thing was to create an account on GitLab. I just used one of my social logins and I was in. This one was very easy.
Next I had to import my project from Bitbucket. There are a few import options and after granting GitLab access to my repositoires I just needed to select the repository I’d like to import.
Importing repositories is really simple, I was positively surprised how well that worked.
Update local project
Being a lazy guy I really didn’t want to setup my project again on all my machines. Git makes this one quite easy as well:
- remove the existing origin remote
- add a new origin remote
- push to the new origin
git remote remove origin
git remote add origin https://your-remote-url/...
git push origin master
..after that I could just continue to work on my code and everything was migrated to GitLab.
CI/CD
The reason I wanted to move to GitLab was to play around with CI/CD. The idea to push some code and let someone else just build and deploy my stuff is very tempting. Specifically as this is more like a personal project I also don’t need something fancy. The main concern I had was: how can I login to Firebase?
But let me first explain the steps I usually took on my local machine before.
ng build --prod
firebase deploy --only hosting
But of course there are more steps if you setup a machine from scratch, and all these commands need to be run in the CI/CD pipeline as well, so I would need to do something like this:
npm install -g @angular/cli
npm install -f firebase-tools
firebase login
ng build --prod
firebase deploy --only hosting
Luckily the CI/CD feature can easily be enabled for a repository. I just had to add a file describing the pipeline and that’s it! This files resides in the root of the repository and is named .gitlab-ci.yml
image: node:latest
stages:
- build
- deploy
cache:
paths:
- dist/
build:
stage: build
script:
- npm install -g @angular/cli
- npm install
- ng build --prod
deploy:
stage: deploy
script:
- npm install -g firebase-tools
- firebase deploy --only hosting --token $FIREBASE_TOKEN
My pipeline has two stages:
- build the application
- deploy the files to Firebase
As these stages run in separate containers but are dependent upon each other I had to cache the dist/ folder. This ensures the files built in the build stage are also available in the deploy stage.
My main concern using GitLab was that I would have to put my credentials into the code (login to Firebase). But luckily Firebase allows you to generate an access token that you can just pass along with your commands (as seen above). I configured the actual token as a variable, which is injected automatically in your build. So this is a very nice way to keep your secrets secret.
Get a token
On your local development machine just run firebase login:ci and follow the steps. It is very well described in the Firebase Docs. It will spit out the token on the command line and you can grab it there.
Configure a CI/CD Variable
Not sure if there is a simpler way, but I had to move my project into a group. Then on the group settings for CI/CD you can expand the variables section and define your custom variables.
Run the pipeline
Just commit some code and the pipeline starts automatically.
Conclusion
It’s pretty cool how easy everything was to setup and configure. I still feel in control of every single step and the possibility to store secrets in a secure way resolved one of my main concerns. I just scratched the surface of GitLab, but this project helped me to understand some of the concepts better and I’m looking forward to migrate a bigger project and setup a nice pipeline.