🛠 Continuous Integration to vue-cli

Jules Hablot — Tue, 10 Nov 2020 07:22:26 +0000

Starting a project in any language should be as easy as possible. We generally don't want to spend time initialising adding the common used library, setting up the test environnement, add a linter, a formatter, a CI environment. Basically, we just want to type a command and get started with our development.

This is what VueJS does, as it provides a powerful cli to create projects.

vue create my-project

This command opens a prompt that asks you many key components of your app. You can choose to use Vuex, VueRouter, Typescript, etc.

After generating the project, you are ready to develop! You have an init commit, different configuration files representing your choices, you even have a working application that passes tests!

Plugin

Everything has a default configuration? Everything no! Some parts of your development resist auto-configuration! The continuous integration configuration file agent is missing 🦺

When the time of pushing your code comes, you need automated checks in order to make sure nothing is broken in your application. You need to add some CI to your repository.

This is where my vue-cli plugin (vue-cli-plugin-ci) comes in! By adding it to the project, you can directly choose among some famous CI agents, to generate a config file to run checks inside their environment.

vue add ci

You can currently generate working example for:

Gitlab CI
Github Actions
Azure Pipeline
Circle CI

CI checks are : install dependencies, lint, test, and build.

I plan to add more of them, but if you are confident to help me make the services count grow, feel free to contribute : the project is open source 🤗

Let’s give it a try!

DEV Community: Jules Hablot

🛠 Continuous Integration to vue-cli

Plugin