Preparing your React app before deploying with CI/CD
For those who care about development planning
When you start planning the process of developing a new project, it’s important to consider the settings that you need to set up your application, and when it’s time to deploy it, you run into a problem that can affect the entire process:
Every time you need to set up this work space again, perhaps to add someone to your development team, some of your configuration steps can be missed, you need to upload raw environment files to the server or run deployment scripts which can be forgotten by their sequence, because it’s written only in the README file.
Thinking about improvements you read something about Continuous Integration (CI) and decided to introduce it to your team. After that, all you have to do is worry about new features or bug fixes for Continuous Delivery (CD).
In case you want to read more about CI/CD before continue:
Before talking about CI/CD setup, you need to know a few things about it.
My motivation to write an article about it
I chose Firebase to start this article because it can be integrated with a new React app easily without paying anything, nor waiting for an approval process to start using cloud resources. In case you want to know more about Firebase: https://firebase.google.com
If you don’t use Firebase…
You can continue reading it as well.
There are many articles on the internet talking about CI/CD but I’ve never seen just one worry about your code before this development step.
So here I am to bring this caution to you.
Shall we start it?
1. Pay attention to the packages version
When we install a new package it’s common to use it in the latest version. For now on you’ll be certain to use a specific version in the install step. It will prevent the installation of packages that are incompatible with the ones the project has used so far.
~$ npm i package@versionor if you prefer using yarn:
~$ yarn add package@version
2. Put all your app settings in environment variables
If you’re coding a new project it’s a good practice to bring the app settings as a global configuration. First you should create a config file with app settings, such as:
- Api endpoint url
- Integration tokens (i.e: Facebook app ID, Google Photos key, Analytics, AWS SDK, Github)
- Firebase settings
- Storage bucket names
- Other Api keys
Note: In cases that you need to pass sensitive values, such as secret tokens for authentication or database connection, it’s recommended to do this on the server side.
In case you want to read more about Environment Variables in React:
3. Take advantage of npm scripts
That’s not an obligation, but it’s still good practice using npm scripts instead of writing them directly to the YML file.
In case you want to read more about Npm scripts:
4. Start running eslint in your code
Start using eslint to analyze your code and fix problematic JavaScript patterns. This is part of good development practices and is also a Firebase recommendation.
In case you want to read more about ESLint:
5. Remove all yellow warnings before deploy your project
The React app will fire yellow warnings when something is running outside React specifications. You may not have noticed but React has eslint and its plugins as dependencies, so it’s a good development practice solving all yellow warnings before deploy your application. Also because most CI servers will automatically treat warnings as errors and the compile will fail.
6. Test your app in local machine before deploy it
Take advantage of testing! It’s my advice to avoid noticing or letting users reporting errors in your application. The CI/CD requires at least one test to be performed before deploying.
In case you want to read more about Running Tests in React apps:
7. Commit & push the code before sending it to deploy
In this time, you’ll start using Continuous Integration in your app. Basically every time you push the code to its repository, the CI servers will clone a new version of it, change to a specified branch and run the scripts according to your demand. All this process is mentioned in the YML file in your project.
Firebase authentication error, let’s fix it
If you get a “Authorization failed” error in the deploy stage like this:
Error: Authorization failed. This account is missing the following required permissions on project bestamericas-dashboard-staging: firebase.projects.get
firebasehosting.sites.update
ERROR: Job failed: exit code 1
..it could be related to one of three reasons below:
- check your Firebase token, maybe you should generate another one in your command line
- check the correct
firebase deploycommand - If you use multi projects, you should set up its names in the
.firebasercfile with its alias
You should store your Firebase token and project alias as environment variables and use it in the deploy stage. For this scenario, the correct npm deploy script will be:
~$ firebase deploy -P $FIREBASE_PROJECT — token $FIREBASE_TOKEN — only hostingWhere FIREBASE_PROJECT must be the project alias defined in your .firebaserc file.
React environment variables
Make sure to pass all app environment variables starting with REACT_APP.
I faced some problems using Gitlab because in the build stage I didn’t inform the environment name, so the Gitlab CI job couldn’t find the correct environments.
Now that’s all okay, you should be able to deploy your React apps appropriately.
In case you are not familiar with Ci/CD yet, I’ll give you some link tutorials about this topic:
