Learning Vue

Chapter 12. Continuous Integration/Continuous Deployment of Vue.Js Applications

The previous chapter showed us how to set up testing for our Vue application, from unit tests with Vite to E2E tests with Playwright. With our application covered with proper tests, we can move on to the next step: deployment.

This chapter will introduce you to the concept of CI/CD and how to set up a CI/CD pipeline using GitHub Actions for your Vue application. We will also learn how to use Netlify as our deployment and hosting platform for our application.

CI/CD in Software Development

Continuous integration (CI) and continuous delivery (CD) are combined software development practices aiming to speed up and stabilize the software development and delivery process. CI/CD includes monitoring the software lifecycle effectively through an automated integration, testing, and continuous software deployment to production process.

CI/CD offers many benefits to software development, including:

• Faster software delivery with automated deployment

• Stronger collaboration between different teams

• Better software quality with automated testing

• Faster response to bugs and software issues in a more agile approach

In short, CI/CD contains three main concepts: continuous integration, continuous delivery, and continuous deployment, and when combined, they form a robust software development process known as the CI/CD pipeline (Figure 12-1).

Figure 12-1. CI/CD pipeline

Continuous Integration

Continuous integration ...