CI/CD with Vue, Firebase Hosting and Github Actions

CI/CD with Vue, Firebase Hosting and Github Actions

Even if you’re the only developer in a project, you still have to make sure you automate your deployment process and follow certain steps in order to prevent bugs sneak into production code. Writing tests is the first step of it. But then, running those tests everytime you make a change in the code is a time consuming process where you can benefit from some automation. This is where Github Actions come into play: How about creating a workflow in Github Actions which will run the tests for you when you make a pull request and won’t allow merging to master and deploying to production if the tests fail? That would really help with avoiding unintentional deployment of buggy code. Another important point is not forgetting to deploy your code into production when a pull request is merged to master. The Github workflow that we are going to create will also handle that by automatically deploying to Firebase Hosting when a pull request is completed. CI/CD with Vue, Firebase Hosting and Github Actions

Even if you’re the only developer in a project, you still have to make sure you automate your deployment process and follow certain steps in order to prevent bugs sneak into production code. Writing tests is the first step of it. But then, running those tests everytime you make a change in the code is a time consuming process where you can benefit from some automation.

This is where Github Actions come into play: How about creating a workflow in Github Actions which will run the tests for you when you make a pull request and won’t allow merging to master and deploying to production if the tests fail? That would really help with avoiding unintentional deployment of buggy code. Another important point is not forgetting to deploy your code into production when a pull request is merged to master. The Github workflow that we are going to create will also handle that by automatically deploying to Firebase Hosting when a pull request is completed.

Let’s see how it’s done step by step:

Creating a Vue Project

First of all, make sure your Vue CLI is up-to-date. As of this writing, the latest version is 4.5.8. You can check your current installment with this terminal command: vue --version .

If you have an older version, you can update by npm update -g @vue/cli or if you never had installed before you can install it globally by npm install -g @vue/cli.

Next, let’s create a brand new vue project called “vue_ci_cd” with the command vue create vue_ci_cd_example.

Not all settings are relevant for the purpose of this tutorial, but make sure the following settings are handled as follows:

  • Please pick a preset: Manually select features
  • Pick a unit testing solution: Jest
  • Pick an E2E testing solution: Cypress (Chrome only)

It will then install all the necessary dependencies for the app. If everything goes well, you should be able to run the app with this command cd vue_ci_cd_example && npm run serve .

firebase github vuejs ci-cd-pipeline github-actions

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Working with GitHub Actions

GitHub launched GitHub Actions in beta which enabled developers to create automated workflows to build, test, and deploy their source code on GitHub. In this article, we will discuss about GitHub Actions and how it can be used to build an automated software development life-cycle workflow.

Serverless CI/CD on the AWS Cloud

To set up a serverless CI/CD pipeline in your AWS environments, there are several key services that you need to use. Find out more here.

CI/CD with Altostra and GitHub Actions

In this post we’ll learn how to add a simple GitHub actions CI/CD flow to a basic Altostra API service project.

GitHub Demo Days - Using GitHub Actions for testing cloud native applications

A common challenge that cloud native application developers face is manually testing against inconsistent environments. GitHub Actions can be triggered based on nearly any GitHub event making it possible to build in accountability for updating tests and fixing bugs.

CI/CD for Angular Projects with Firebase and Github Actions

CI/CD for Angular Projects with Firebase and GitHub. We can utilise GitHub Actions to automatically deploy when we push something.