Introducing the Vue.js CI/CD series

This is the first article of the Vue.js CI/CD series. It will be the opportunity to explain the purpose of the series and the topics we plan to cover.

Why this series?

We delved deeply into CI/CD for Vue.js when preparing a DevOps practices course for students in engineering school. The course wasn't directly related to Vue.js; however, we chose to use a Vue.js application for hands-on exercises focused on implementing CI/CD pipelines. Through this process, we gained valuable insights that we now wish to share.

While there are numerous blog posts on Vue.js, not many articles specifically address setting up CI/CD pipelines for Vue.js projects. Yet, having proper continuous integration and automating deployments are two aspects that should not be neglected in a project. That's the main reason why we decided to write this Vue.js CI/CD series.

What are we going to talk about?

As you can expect, we will cover the usual topics:

package management
build & artifacts
static analysis
testing
security
deployment

Examples will be shown using different CI/CD platforms and cloud services.

CI/CD platforms

We can't cover all the CI/CD platforms so we will focus on GitHub Actions and GitLab CI.

Even though each platform has its unique features, the majority of the concepts we will discuss can be applied to other platforms as well. So, don't stop reading the series just because you are using a different platform 😉.

Cloud services

There are numerous hosting options for a Vue.js application, and we will demonstrate how to deploy an application on at least the following platforms:

Azure Static Web App
Vercel
Netlify

Which sample application will we be using?

This series aims to discuss CI/CD for Vue.js applications so that anyone can learn how to set up a CI/CD pipeline for their Vue.js project. That's why we will use the sample code from the basic application generated when creating a new Vue.js project.

And to be clear, when you start a new Vue.js project you don't want to use the Vue CLI because it is in maintenance mode. Instead, you should use create-vue which is based on Vite and is the recommended way of scaffolding a Vue.js project.

I think it's important to mention it because I still see new blog posts talking about creating new projects using Vue CLI.

So nothing specific in the code of the application we will build and deploy, just the basic things you get when you run the pnpm create vue@latest command with:

TypeScript enabled ➡️ it's 2023, I don't see any valid reason why to choose Vanilla JS instead of TypeScript so if you are not using TypeScript you probably should
Vitest enabled ➡️ the vite-native unit test framework you want to use to test your code
ESLint enabled ➡️ because static analysis should be part of your Continuous Integration pipeline

The last thing to mention: we will use the latest version of pnpm to manage dependencies. Our preferred package manager is pnpm for various reasons, but the primary one is its remarkable speed!

You can check the pnpm website to read more about pnpm or have a look at our pnpm 101 series.

We hope you will have a great time learning about CI/CD for Vue.js application. See you in the next article.