Setup automated deployment with Angular, Travis and Firebase

[00:01] I have here a very simple Angular application, which I generated with the Angular CLI. As you can see, the application's already also setup for being deployed on Firebase. You can see here the different files that specify Firebase project. We see here the database rules as well as the Firebase JSON, which basically defines where our application is hosted on Firebase itself.

[00:26] I configure this by using the Firebase tools, which you can install via the npm install manage -g Firebase tools. You have to go and do a Firebase init and answer a couple of questions which then setup your project and create the files which you have just seen.

[00:46] I have also created here a Git repository where it hosts my projects. Basically, the source code of my project. Obviously, there is also here the Firebase project. If you go to the hosting area, which is our main interest, we also see here a deployment which has been done already previously. If I click on this, we see our application being served by Firebase.

[01:09] What we would like to do now is to basically automate the whole deployment story. Whenever someone pushes a new change onto master, that should be automatically deployed onto the Firebase hosting website here.

[01:23] For the period, we will use Travis. Travis CI is continuous integration server which is quite powerful for opensource projects. We would like to call for your Travis coding D to pick up our project and deploy the Firebase.

[01:37] To get started, the first step is to create a so-called Travis YML file -- which is named travis.yml. Inside here, we have to specify the configuration of our project so that Travis can pick it up and deploy accordingly.

[01:55] Here, first of all, we say the language is node_js as we're building a java script application. We also specify node_js version, which in this case let's say it's 8.12. Then we can tell Travis which branch is to deploy.

[02:14] In this case, we say only changes that come to master should be taken up and should be watched, and processed accordingly. Next, the order scripts that have to be executed. The before script should basically install our Firebase tools which we will need to deploy our application to Firebase.

[02:37] Next, there is the main script. The main script is responsible for building our application. Therefore, we run the npm run build up prot command. If we take a look in our package JSON, we see that prot command which is specified here in the script section of our package JSON -- and which basically invokes a command underneath after Angular CLI.

[03:02] The next step here is to specify what should happen after success. Whenever the steps have been successful, we would like obviously to deploy our application to Firebase. Here, we have to basically use the Firebase CLI. We use the deploy command, which will deploy our application to Firebase.

[03:24] Now, there is an important thing however. When we deploy our application to Firebase, we normally have to log in onto the console. You do that usually by doing a Firebase log in command, which will then check your credentials and automatically log in to Firebase.

[03:40] In this scenario obviously, the script would be executed by Travis itself -- in continuous integration pipeline where there is no human interaction. If we have to provide a so-called token, which will be used for authentication purposes, we will see in a minute how to basically create such a token.

[03:59] Let's, for now, just use a Firebase token variable, which will then be provided by Travis. We should also add here the non-interactive to tell the Firebase CLI tool that we are running in a non-interactive environment such as in continuous integration environment.

[04:18] Finally, let's add some modifications. We would like to get an email whenever failure state changes. If something fails or it's a success, changes. Basically, when we have a failure, we will get an email, and whenever we again have successful builds, we will get another email to get alerted.

[04:42] Let's save this one here. Next, let's go to Travis itself. On Travis, you go to the Your Account section. Inside there, you see a series of projects which are your GitHub projects. Now, if you shouldn't find your project, you can here click Sync Account which will then synchronize your GitHub account projects with Travis.

[05:07] Let's search our project here which is ACAT deploy Firebase. Let's switch that on. If we remember, we talked about that Firebase token which we have to provide as an environment variable. For that, we go to Settings here. Down here, we can specify our environment variables. Let's add here a Firebase token. Now, we have to generate one.

[05:33] For the purpose, we return to our project here, and we can use a Firebase command which is login:ci to generate a new Firebase token. This will open up the Google sign in page where we can sign in on our account.

[05:56] Once the procedure is successful, we can return to our CLI. Here, we see the token -- it gets generated. Let's copy that token and return to Firebase, and we copy it in there, and add it to our configuration. Great! We should all be set up.

[06:13] Let's clear here our application. Let's open map quickly, the app compound here. In the 'html' part, let's add here, Welcome to Deployed with Firebase and Travis. Let's save this. Let's commit this. Change application title. Now, we push these changes to our server. This will now land on GitHub.

[06:47] Now, if we switch over to Travis, we see that the build job has been triggered. If we click this button here, we will follow the log off our build. Here in this log, you can see how Travis sets up node.js version we specified, and gets our source code from our Get Up repository.

[07:09] You can see here how the Firebase token is being injected as an environment variable. Here, we're done and npm is being installed. Now, all our package is full. Our application will be installed and built as we specified in the Travis script.

[07:29] We can now see how the deployment command is being invoked passing in our Firebase token. Here, we get the confirmation that the deployment has been completed. If we take our URL here, and open it up on our browser, we can see our newly deployed application with the changed title.