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