CI/CD Success for Vue Developers

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

This talk will cover best practices for performance, stability, security, and maintainability of CI/CD pipelines, each supported with practical examples and counterexamples and tailored towards Vue.js developers.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

CI stands for Continuous Integration, which involves automatically building and testing code changes as they are pushed to a remote repository. CD stands for Continuous Deployment, which involves automatically deploying the built and tested code to a production or other environment.

Automation is crucial in CI/CD because it ensures that processes are reproducible and consistent, reducing the risk of human error and allowing for faster and more reliable software delivery.

CI/CD can speed up software development by automating builds and tests, reducing the time developers spend on manual tasks, and providing quick feedback on code changes. It also allows for parallel testing and caching, which further speeds up the pipeline.

Best practices for optimizing CI/CD pipelines include using the right size of machines for builds, implementing caching for dependencies, running tests in parallel, and selectively running tests based on the stage of development.

CI/CD can help with security by automating security scans and keeping credentials secure within the CI/CD system. It can also enforce fine-grained access control policies to ensure only authorized personnel can deploy code.

If a build fails, it's important to understand the logs and debug the environment. Tools like CircleCI's SSH debug feature can help you investigate and fix issues quickly.

CI/CD facilitates team collaboration by providing a self-documenting process that is easily understandable. It allows team members to read and understand the CI/CD configuration, making onboarding easier and encouraging collective responsibility for the pipeline.

Configuration is crucial in CI/CD as it codifies the entire process, making it reproducible and consistent. It typically involves specifying the environment and the steps needed to build, test, and deploy the application.

Yes, CI/CD can help in recovering from deployment failures by allowing you to revert to previous commits and redeploy from a known good state. This makes recovery faster and more reliable.

Continuously integrating and deploying smaller changes reduces the risk of errors, makes it easier to identify and fix issues, and allows for faster feedback and iteration, leading to more stable and reliable software releases.

Zan Markan
Zan Markan
23 min
21 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Today's Talk discusses CI and CD success with Vue.js, emphasizing the importance of automation in software delivery. The speaker shares tips applicable to all CI-CD systems and programming languages, explaining the concept of continuous integration (CI) and its role in automatically building and testing changes. Attention to speed, recovery time, and organizational considerations are crucial for CI-CD success. Techniques such as caching and job splitting can improve speed, while automation and security scanning help maintain a secure environment. Ultimately, CI-CD is a team responsibility that enables frequent releases and adaptability to change.

1. Introduction to CI/CD Success with Vue.js

Short description:

Today we'll be talking about CI and CD success with Vue.js. The difference between the two options is down to automation. Software delivery lifecycle can be compared to growing and tending crops. Manual work gets the job done, but it's not as reproducible.

♪♪♪ All right. Hello. Thanks for having me over. So, today we'll be talking about CI and CD success with Vue.js in particular. But first, let's start with a thought exercise. Think about a time when you were getting ready to release some software. Maybe it's something you'd worked on for the past week. Maybe it's the past four weeks. Maybe it's the past six months. Hopefully not much longer than that.

Anyway, everything has been tested, everything is ready. It's just waiting for you to press this big red button, which then initiates the deployment process and will get the software in the hands of your user. So, without further ado, you press that big red button. It has a nice audible click. It's very satisfying, nice satisfying tactile feedback as well. Like only a nice mechanical keyboard can have. And then it's off to the races. The software is out of your hands and things are being deployed. And in a matter of minutes, maybe hours, depending on what you're actually deploying and how it's actually done, this software will be actually used by your users. And all you can do is hold your breath and sit in silence.

And then you have two options. Option one. You keep holding your breath, sweating, and nervously waiting for it to actually start blowing up, some errors showing up, and your users complaining. Or option B, pack up, go home, because it's 4 pm on a Friday and you've done your job. I certainly prefer option B, partly because it is 4 pm on a Friday when I'm recording this, but also because it's a nicer thing to do if you want to enjoy your weekend. Anyway, the difference between the two, though, it's really just always down to automation, and it's always down to automation, from software to processes, manufacturing, and, yes, also agriculture. Well, we're not talking about agriculture today. I do like to compare software delivery lifecycle with the process of growing and tending for crops. So if you imagine you have a field like this, you can have hundreds of people working that field, planting everything, picking everything manually, watering, weeding, all those things. Doing manually by hundreds of people, it gets the job done, but it's not as reproducible as one might want.

2. CI-CD Success with Vue.js

Short description:

CI-CD systems, like a finely tuned greenhouse with automated processes, can greatly improve efficiency. However, it's important to remember that any issues that arise are typically due to human error. The speaker, En Marken, a developer advocate at CircleCI, shares tips and tricks applicable to all CI-CD systems and programming languages. En Marken explains the concept of continuous integration (CI) and its role in automatically building and testing changes pushed to remote repositories. The CI process includes running tests, security scanning, and producing a built application in an isolated environment.

Of course, you can do it with a lot fewer people if you employ some tractors, if you get some irrigation systems in place, or take this a few dozen steps further and put everything in a greenhouse with controlled atmosphere, controlled lighting, controlled nutrients that are directly fed to each individual plant, and I like to imagine that these robot hands, they use computer vision to pick the plants at their best ripeness for essentially selling them at optimal profit. And that's what I like to compare to a really finely tuned CI-CD system.

Everything is automated. Everything is out of your hands and things just work. Until, of course, they don't. And while I'm not expecting your CI-CD system and the robots in a greenhouse to suddenly rise up and turn into dinosaurs that try to kill us all, they can definitely A, kill your crops, and B, your CI-CD system can definitely ruin your day if you've deployed something that's not really deployable. But yeah, fret not. It's never the machine's fault. It's always us, you know. It's always the humans that kind of program these machines, and it's our fault to actually break things.

And with that thought in mind, my name is En Marken. I'm a developer advocate at CircleCI, and I do break a lot of things. And I'm often the problem between keyboard and chair. This talk is titled CI-CD Success with Vue.js and for Vue.js Developers. But the tips and tricks I'm handing out here are essentially universal for every CI-CD system, for every programming language, whatever you're building, however you're doing it. Most of the things will always hold true. As I mentioned, I work for CircleCI. We've been around for 10 years. We're the world's leading CI-CD provider and a huge number of teams all over the world working on so many different platforms, programming languages with programming paradigms are using us, including parts of Vue.js as well, the open source projects, which is really cool to be now talking to you about this. So yeah, this is not to talk about CircleCI. This is a talk about generally CI-CD best practices, optimization, tips and tricks to help you get the most out of it. But as we're talking about CI-CD, what does it actually stand for? What does it really mean?

So it's a double acronym where CI stands for continuous integration. And this is the practice of getting all the changes automatically built and tested as they are pushed to remote repositories by developers. So if you're working on a GitHub project with a team, every time you push a commit, the CI process will essentially run all your tests, do all verifications that you might have, like security scanning, static code analysis, and ultimately produce a built application. In addition to that happening automatically, everything is also happening in isolation. So that's where the greenhouse analogy comes from. Because all the builds, all the tests, they are run in virtual machines or Docker containers, which are spun up from scratch essentially. So you just specify the type of environment you want and then all the necessary steps. Everything is also configured with a configuration file which lives inside of the same repository, at CircleCI, we use YAML, but you could use any other format for that. But ultimately, yeah, you codify, everything is tied to the same commit and everything is reproducible.

3. CI-CD Dimensions and Speed Considerations

Short description:

Now that the app is built and tested, the deployment phase begins. CI-CD success requires attention to multiple dimensions, including speed, recovery time from failing builds, and organizational speed considerations. Onboarding new team members is also facilitated by the code-based configuration. To improve speed, consider the resources allocated to your CI, such as machine size, and utilize caching techniques to reuse previous work.

That's the CI part of it. But now that we have our app built and tested and ready for primetime with users, we also want to deploy it. And CD is the part of it that actually does the deployment. And, yeah, again, it doesn't matter what environment you're deploying to, it could be a preview environment for your Vue app or it could be a production Kubernetes cluster that you're trying to get this software to or anything in between, really.

But, yeah, the continuous deployment step is that. And as you might imagine, this whole CI-CD thing has many dimensions that we need to essentially be on top of, we need to think of, we need to take care of in order to be successful. And, yeah, we need to be successful in every single one of them because every single one of them can actually hold you back and prevent you from having a good time developing something. So, yeah, in this talk, we will be untangling some of those dimensions and, yeah, breaking them down and talking about tips and tricks for it.

First one, probably most obvious dimension that we can think of is speed. How fast does your CI-CD pipeline run? That's like the most obvious thing you can think of, especially if developers are counting on your CI to actually tell them whether their work is essentially passing all the tests, is successful. As soon as you can get that information to them, the better because they can continue their work, but there's more to speed, much, much more to speed. The other one could be time to recovery from a failing build. If you're thinking that if you're working off a main branch and you merge something that doesn't pass the build, so, the build essentially goes red as opposed to green, you want to get that back to green, back to passing as soon as possible because your main branch is essentially where you can get all the deployment out to your users, to your testers, to your stakeholders. So, yeah, that's another very important facet of speed.

And then there's organizational speed considerations, like time to ship a feature, how long does my team need from getting a mandate to a product manager for a new feature to actually shipping that to users. CI can definitely help you build that continuously and obviously CD can definitely help you get that to users as soon as possible, as soon as it's ready, and, yeah, all the updates as well. And lastly, there's things like you might not think about a speed, but it could help you onboard new team members because, as I said, everything is configured in code, everyone can read YAML, hopefully. So a new team member can then be just pointed to this CICD configuration and tell, hey, these are the environments, everything, all the jobs that we're doing, all the different types of tests. Maybe you're doing unit tests, maybe you're doing integration tests, maybe you're initiating some smoke tests as well. Maybe you're doing like a canary deployment, like a really advanced type of deployment, and a new team member can actually understand what's happening and then ask you questions about individual portions of that essentially pipeline which is all automated, which is beautiful. Anyway, speed. Running things faster. First thing to do is really think about whether you're running things on the right size of machines. So, you've got a developer laptop and that's probably got a number of gigabytes of RAM, a number of virtual processors or threads that you can work with. And if your laptop is building something in a minute and your CI takes five minutes, maybe your CI needs more resources to get more up to speed, literally, to how quickly this might need to work. The second one is things like cache. For example, cache is just reusing things you've already done. For example, node modules, you've run npm install once, maybe if your package.json hasn't really changed, maybe that's enough for now, you don't need to update all the dependencies. Maybe you can just store them and pull them from cache next time so you don't have to take that loading hit each individual moment. Maybe you're using some advanced caching techniques, testing techniques with some testing utilities, and for that maybe you don't want to install everything on your Docker container, maybe you can just use a Docker image which has all of that pre-installed.

4. Speed, Failures, and Signal in CI/CD

Short description:

You can cache and split jobs to speed up the process. Choose which tests to run based on your needs. Recover from failures faster by understanding your builds and debugging them. CI-CD speed should be like an ambulance, fast but maintaining the quality signal.

So these are all the things that you can cache and really kind of help you speed up the whole thing across many runs. Speaking of runs, jobs themselves, so building, testing, various types of testing can also run in parallel. And also they can be split, especially if you've got a long-running integration test suite or a lot of functional tests kind of hit different parts of your application as a user would. You can actually split those within a single test suite across multiple parallel test jobs, which essentially run just a portion of that, which obviously takes the time down quite significantly.

And, of course, you can pick what runs whenever you want to run it. For example, maybe, yes, you want to run your test, maybe you want to run some functional tests, but you don't need to run all of them. You just need to do that minimum part and then do that preview deployment of your website, which is good enough for most use cases. But then when you're kind of ready to merge this to the main branch, get ready for a release, you want to run all the tests.

So that's speed in general. But what about when things don't go as planned? Sometimes you just break things. For that, you really want to recover from failures a lot faster. First one is understanding what's happening to your builds. Like logging everything, being able to kind of get those logs out. This depends on your frameworks, on your tools. But really invest time into understanding them, understanding how to read the logs, how to get that out and just get as much out of your CI-CD. Because there is information in there.

And my favorite thing is actually being able to debug your builds as they fail. So sometimes your environment will fail, something in your environment will fail. With CircleCI, for example, we have this cool feature called SSH debug. So essentially, SSH into that environment and you can see what's going on as your tests have failed. Maybe there's something wrong with the state. Maybe there's something wrong with the database that you're connecting to. And it really helps you quickly debug things. But yeah, speed is fine. We're all trying to get go as fast as possible. But you know what? It's not a race. It's very important, but yeah, it's not a race. And CICD speedwise should be seen more like an ambulance instead. So it should definitely go fast, but still keep that payload, keep that signal alive. So signal meaning the quality of your app that's telling you, hey, all of my tests have passed or some of them have failed.

5. CI-CD Security and Team Responsibility

Short description:

When it comes to security, keeping credentials inside the CICD system and automating security scanning are important. There are also other features and external services beyond the CICD tool that can be integrated. CICD is a team responsibility, and it helps in recovering from failures and enables frequent and error-prone releases. The ultimate goal is to be free to deliver software on your own terms, focus on quality and team happiness, and adapt faster to change.

And yes, obviously when red lights are flashing, when the build is red on your main branch, go fix it as soon as possible. Don't let it wait around for that. Anyway, that speed.

Now, let's think about some other things like security, something that can really slow you down as you're building things. As many of you are probably very aware that, yeah, a security review can definitely kind of slow you down. But there's ways to actually get on top of security with a CICD system as well. First one, most important one is actually keeping the credentials inside of the CICD system and using it to kind of really fine-grain your access control policies and really only allowing whoever has the right permissions to ship or deploy to a particular environment or just keeping the credentials out of your Git repos at the very least. That's something you can do. And the next one is automating security scanning. You know how vulnerable, how easy it is to kind of get some vulnerable or even compromised library into your application and there's tools available that will just kind of tie into your CICD flow and automate all of that for you so that you're not leaking your customer's credit card numbers or passport numbers or what not from the front end, which is just horrid. So, yeah, these are the things that you can think about when you're thinking about security.

But yeah, there's more and more to the ecosystem than just the CICD system and there's features beyond the CICD tool. First, obviously, there's the features that are built in, so is there something available that you're not using? It's worthwhile just kind of reading the release logs, release notes every couple of months and seeing, hey, maybe they've released something cool and we can actually utilize this and I think about whether there's any external services that you're using, maybe product project management tools that you're using that you could be integrating with and just tying that into your CICD flow and really informing everyone of your process. And of course, it's never a DevOps talk if we're not talking about the team. And yes, I mentioned that your configuration is definitely a good onboarding aid, but also it's worth reiterating that CICD is never a single person's responsibility. It's always a team responsibility and just kind of get everyone on board to at least understand what's happening, if not be able to introduce and suggest improvements to the whole process because that's gonna benefit you all. And obviously we've initiated deployment in the beginning and sometimes everything goes fine, but sometimes it doesn't. Things will happen that you're gonna break some software, gonna break some deploys, and you will need to kind of get stuff back to a working shape. Luckily, we have a time machine because everything is tied to a commit. We can just revert to a previous commit and restart that process, and your CICD process can definitely help you recover a lot faster than you would have to... that you could ever think about doing it manually. And yeah, another thing is because we're doing all those testing, all this testing, all those verifications all the time, we can actually ship a lot smaller changes a lot more frequently and have releases which are a lot less error prone because there's just less stuff to do. And, yeah. Best thing for this is, best thing to prepare is to plan and to actually prepare and practice to understand, hey, we've broken something, how do we get it back? Let's do a dry run. Let's deploy it back to the staging environment, see how this will fare, how the team is ready. Ultimately, though, to me, to be successful with a CICD system, it means to be free. And it means to be free that you're able to deliver software on the terms that you really control. And that's the best thing you can get out of it. And you can focus on quality, you can focus on team happiness. And you can always adapt faster to change because you're able to ship constantly and release things a lot faster than you would have without the whole kind of... a greenhouse approach. And yeah, as a benefit you have this self-documenting, build, test and deploy process which anyone can just kind of read and utilize and obviously recover from failure a lot faster because a, everyone understands the whole process and b, it's all reproducible. My name is Anne Marken. This was a talk on succeeding with CI-CD for Vue.js.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Levelling up Monorepos with npm Workspaces
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Levelling up Monorepos with npm Workspaces
Top Content
NPM workspaces help manage multiple nested packages within a single top-level package, improving since the release of NPM CLI 7.0. You can easily add dependencies to workspaces and handle duplications. Running scripts and orchestration in a monorepo is made easier with NPM workspaces. The npm pkg command is useful for setting and retrieving keys and values from package.json files. NPM workspaces offer benefits compared to Lerna and future plans include better workspace linking and adding missing features.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
Watch video: Vue: Feature Updates
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.

Workshops on related topic

Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Deploying React Native Apps in the Cloud
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance