Tuesday, 9 April, 2019 UTC
Summary
Angular allows us to build performant web applications that can be deployed to mobile, web and desktop. Firebase Hosting is a popular service that is easy to use with a CLI tool. In this article, we’ll be using Travis CI to automate this deployment.
🐊 Alligator.io recommends ⤵
ⓘ About this affiliate link
Create a new Angular project with the Angular CLI to establish a common base:
# Install the Angular CLI $ npm i @angular/cli -g # Create a new Angular project with the name of your choosing && change directory $ ng new AngularFirebaseCI > N > SCSS $ cd AngularFirebaseCI # Open this up in VS Code and Serve $ code . && ng serve We can now create a basic Angular project. Head over to
app.component.html and create the following template:<section> <article> <h1>Angular, Travis CI & Firebase Hosting</h1> <p>🔥🔥🔥</p> </article> </section> We can also add some CSS styles to make it a little more magic, inside of
app.component.scss:section { display: flex; justify-content: center; align-items: center; height: 100vh; background: #8a2387; background: -webkit-linear-gradient(to right, #f27121, #e94057, #8a2387); background: linear-gradient( to right, #f27121, #e94057, #8a2387 ); } article { text-align: center; color: white; padding: 40px; box-shadow: 1px 1px 200px rgba(0, 0, 0, 0.8); } Finally, inside of the global
styles.scss let’s default the html and body styles:html, body { padding: 0px; margin: 0px; } The first step in our process is to get Firebase Hosting up and running. Head over to Firebase Hosting and create a new project:
We can install the
firebase-tools CLI globally by running the following in the terminal:$ npm install -g firebase-tools After installation, log in to the CLI by running:
$ firebase login Now that we’re authenticated, we can initialize Firebase inside of our project.
$ firebase init > Hosting ? Select a default Firebase project for this directory your-firebase-id ? What do you want to use as your public directory? dist/ ? Configure as a single-page app (rewrite all urls to /index.html)? Yes Sweet. We’re now ready to deploy our application to Firebase! Let’s build it for production using the Angular CLI:
$ ng build --prod This generates a
dist folder with all of our files inside. Deploy that to firebase with:$ firebase deploy If you got a message similar to the below, everything went well:
✔ Deploy complete! Project Console: https://console.firebase.google.com/project/your-app/overview Hosting URL: https://your-app.firebaseapp.com It’s not great having to do this manually each time. Sure, it’s only two commands, but what if we had multiple team members? Also, I don’t want to have to think about deployment, I want to write more code!
Firstly, head over to https://travis-ci.com/ and log in with your GitHub account. Allow Travis access to all of your repositories.
This will show us a list of repositories that we can automate, but ours isn’t there… because it doesn’t exist!
New Repository Create a new GitHub repository over at https://github.com/new
We can then push this to GitHub with the following commands:
git remote add origin https://github.com/YourUser/YourRepoName.git git push -u origin master We’re nearly there. We now need to create a
.travis.yml file that contains the automated deployment steps:language: node_js node_js: - "11.0" branches: only: - master before_script: - npm install -g @angular/cli script: - npm install - npm run build deploy: skip_cleanup: true provider: firebase token: secure: "" The Travis CI automation steps are built in
yml and provide an understandable set of instructions.Something looks off. The
token is blank. This is because we need to generate it with the firebase CLI:$ firebase login:ci You should get back a long token that can be used in place of the empty
token above.Push this
.travis.yml file up to GitHub with the following:$ git add . $ git commit -m "Added Travis CI automation!" $ git push Now, head over to https://travis-ci.com and check out the build!
=== Deploying to 'app-5c310'... i deploying hosting i hosting[app-5c310]: beginning deploy... i hosting[app-5c310]: found 14 files in dist/AngularFirebaseCI i hosting: uploading new files [0/14] (0%) i hosting: uploading new files [12/14] (85%) ✔ hosting[app-5c310]: file upload complete i hosting[app-5c310]: finalizing version... ✔ hosting[app-5c310]: version finalized i hosting[app-5c310]: releasing new version... ✔ hosting[app-5c310]: release complete ✔ Deploy complete! In this article we looked at how to create an application with Angular and deploy it to Firebase Hosting.
We then looked at how to automate this process with Travis CI. Any time the
master branch is updated, this build process will run and publish to Firebase Hosting.