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.
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!
We hope you will have a great time learning about CI/CD for Vue.js application. See you in the next article.
Execute commands using your project dependencies
You have a dependency in your project and want to execute a command using it? The pnpm exec command can help you with that.
Manage multiple Node.js versions
If you are working on various projects, you have likely encountered situations where you need to have multiple versions of Node.js installed on your computer.