Firebase and react Continuous Deployment
My experience with Continuous Deployment of firebase-react projects
Yes I know, there are already tutorials for firebase CI. Even an official one on YouTube and a great one for Firebase CI on GitLab from Dennis Alund. You should watch and read both of them! But there are still things they didn’t cover. Mostly the full deployment with functions, database and storage rules. I will try to share our experience with continuous deployment of Firebase react applications.
Defining the terms
First of all we need to define some terms we will use. These definitions are how I understand these things and are no reals definitions!
Continuous Integration (CI): Continuous integration of code to the mainline in most cases serving a result of unit tests.
Continuous Delivery (CD): Extension of CI serving the ability to manually deploy the project on “push of a button”.
Continuous Deployment (CD): Extension of Continuous Delivery that automatically deploys the project to production.
Yes, I see, there are two CD. To not always write the full name we will use mCD for Continuous Delivery and aCD for Continuous Deployment. The m and a are standing for manually and automatically deployment.
Environment
In this case we will use a react project. In detail it is a CRA (Create React App) project. The project uses Firebase hosting, realtime-database, functions and storage. So I think everything you can do with Firebase in a react project.
The code is hosted on GitHub and for CI and aCD we will use Travis. We will not explain in detail how to add a GitHub repo to Travis. There should be enough tutorials on that out there ;) The shortest way to explain it: press the “plus” button in Travis, select your repo and in your repo add an .travis.yml file. In that file you control how Travis runs the CI and aCD.
The alternative to Travis would be GitLab. The article from Dennis is for CI and CD on GitLab. In that case you would add a .gitlab-ci.yml file. We will continue here with the Travis integration.
Because we have a CRA project a build of it is required to deploy it. No matter if we do it manually on our local device or with aCD on Travis. As we know from David in the YouTube video deploying a Firebase project is easy as just running the command firebase deploy. It is as easy as that because you are logged into firebase on your local device. If not you would see an error. To be able to deploy to Firebase we need a Firebase token and add it to the deploy call when deploying with Travis. To not waste our time here, please take a look into the video from David East. He explains this part in the best possible way. When you finish watching the video return here…
…so you watched it? No!? Do it please. I can’t write an explanation that is even close to his video. Do it for yourself.
OK. Watched or not. I will continue. If you watched it you should know now how to create a firebase token and set it up in your .travis.yml file and how to make a deploy.
Setting up our travis.yml file
Our project uses Firebase functions. For that we need to make some more adjustments to our .travis.yml file. Let us take a look into our file how it would be if we would set it up after the video:
language: node_js
node_js:
- 6
cache:
directories:
- node_modulesbefore_install:
- npm install -g firebase-toolsscript:
- npm testafter_success:
- npm run build
- firebase deploy -m "Travis deploy" --non-interactive --token $FIREBASE_TOKENbranches:
only:
- master
If we would run it this way and we use Firebase functions our deployment would fail. The reason is that the Firebase functions are stored in a seperate folder functions. And that folder has his own node_modules folder where all it’s npm packages are installed. We need to install them before the deployment. Seems complicated but because we write code for a terminal we can do just this after the npm install -g firebase-tools:
- cd functions
- npm install
- cd ..That is all the magic. With that small adjustment we can deploy the whole project. Our file would look now like this:
language: node_js
node_js:
- 6
cache:
directories:
- node_modules
- functions/node_modulesbefore_install:
- npm install -g firebase-tools
- cd functions
- npm install
- cd ..script:
- npm testafter_success:
- npm run build
- firebase deploy -m "Travis deploy" --non-interactive --token $FIREBASE_TOKENbranches:
only:
- master
And now you will ask yourself a logical question: why did this author write a whole article just for adding three lines of code to something we already have. Well just continue to read ;)
Get Tarik Huber’s stories in your inbox
Join Medium for free to get updates from this writer.
Maybe you notice that we are also cashing the node_modules folder with:
cache:
directories:
- node_modules
- functions/node_modulesTravis provider
If you google something like “travis firebase” you could get directly to this documentation part of Travis. It explains that you should use the build in Travis provider for deploying firebase projects. It seems complicated and for me it is more complicated than the way we use above. Even if you get it to run adding the part with the functions would be also a heavy quest so if you ask me I would recommend to do it the simple ways and write your own deploy script. If the provider would be “the solution” David would explain in his video how to use it ;)
In the next parts we will explain some problems you could get into.
Multiple projects
If you have a seperate development and production Firebase project initialized in your .firebasesrc file you would need to say Firebase on which project to deploy the code. We use for that this line:
- firebase use production --token $FIREBASE_TOKENBecause our demo project has just one default project to deploy we can change our file so it uses the default project:
language: node_js
node_js:
- 6
cache:
directories:
- node_modules
- functions/node_modulesbefore_install:
- npm install -g firebase-tools
- cd functions
- npm install
- cd ..script:
- npm testafter_success:
- npm run build
- firebase use default --token $FIREBASE_TOKEN
- firebase deploy -m "Travis deploy" --non-interactive --token $FIREBASE_TOKENbranches:
only:
- master
If we later have separate projects we can change this.
Timeouts
If your project build takes to long the Travis build could timeout and end up with an error. Usually every line code in Travis has 10 min to run. If the line of code needs more Travis would throw an error. We can here change the file so it waits more than 10 min. This is done with the command travis_wait. That command increases the timeout to 20 min. If you still need more you can write travis_wait 40 for a 40 min timeout. Deploying all Firebase features can also take some time. Let us change our file so it gives the production build a timeout of 40 min and the Firebase deploy 20 min.
language: node_js
node_js:
- 6
cache:
directories:
- node_modules
- functions/node_modulesbefore_install:
- npm install -g firebase-tools
- cd functions
- npm install
- cd ..script:
- npm testafter_success:
- travis_wait 40 npm run build
- firebase use default --token $FIREBASE_TOKEN
- travis_wait firebase deploy -m "Travis deploy" --non-interactive --token $FIREBASE_TOKENbranches:
only:
- master
GitLab user problem
Before Travis we used for our company project a private GitLab repo. There we had a hard time fixing a problem caused by the new Node version and some weird user permission errors. Long story short solution ;) After a longer googling session we found the solution by simply changing the npm configs. This code snipped shows the solution:
before_script:
- npm -g config set user root
- npm install -g firebase-tools
- npm installGitignore
If you want to deploy your project using Travis or GitLab don’t forget to remove your Firebase files like .firebasesrc , database.rules.json , firebase.json and others from your .gitignore file. Yea this is logically but there are people out there forgetting to do this (me) ;) I don’t even know why I put them in the gitignore file.
Conclusion and example
I hope that this article can help others to avoid some problems we ran into. The solutions are very easy if you have experience with React, Travis and Firebase but I can imagine the pain for devs experiencing React, Travis and Firebase for the first time. I have used Travis for CI but never before for aCD. It is a huge relieve and joy to use it!
If you would like to have something to “touch” and see the example file in a real world project check out the demo project React Most Wanted and it’s source code.
