DEV Community

Cover image for 🛠 Continuous Integration to vue-cli
Jules Hablot
Jules Hablot

Posted on

🛠 Continuous Integration to vue-cli

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
Enter fullscreen mode Exit fullscreen mode

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

Capture d’écran 2020-11-03 à 18.21.16

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
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)