Completing the CircleCI

It’s nice to have the sense of security and confidence in your code that testing can provide, but running tests manually before every push can feel like a real chore. Thankfully there are some very handy cloud-based SaaS solutions that can outsource this repetitive task.

The solution we’ll be working with is CircleCI. If you are unfamiliar with continuous integration and deployment, take a look at Lev Lazinskiy’s explanation.

Before We Start

Get or Make the App

This repository has some starter code. Alternately, you can install vue-cli and set up a new project. After running create, remember to choose:

• Manual setup
  • E2E Tests
  • Unit Tests
  • Jest
  • Cypress

Cool. You should be good to go. Take a minute to cd into your new app and spin up the local dev server, run the tests and familiarize yourself with it. While you are there check that you have a config file on the right path. If you don’t, add it:

$ touch .circleci/config.yml

Link Everything Up

• Add a GitHub remote locally.
• Create a new account on CircleCI
• Run through the steps to link your GitHub account
• Install circleci Command Line Interface

Sign in to your CircleCI account and navigate to the add projects tab. Search for your Vue Hello World repo and select add project.Preflight checklist done. Let’s set up our CI/CD.

 

CircleCI Configuration

Orbs and Workflows

Orbs are certified or third party configurations that streamline an action while simultaneously allowing you to access the underlying configuration options. We are going to use two orbs. The Heroku orb and the Cypress orb. The Heroku orb is in CircleCI’s registry. For the Cypress orb to work correctly, you’ll need to change security settings in CircleCI to allow for uncertified and third-party orbs.

Workflows are a collection of jobs run in parallel or sequence. We’ll define those as we build our configuration file.

Config Setup, Simple

Orbs are only available in version 2.1 of CircleCI, so we need to specify that version on the first line of our config file. After that CircleCI is going to be looking for some defaults. Let’s add those in as well.

# .circle/config.yml
version: 2.1
jobs:
  build:
    docker: 
      - image: circleci/node:12 # the primary container, where your job's commands are run
    steps:
      - checkout # check out the code in the project directory
      - run: echo "hello world" # print a message to verify action

workflows:
  test_then_build:
    jobs:
      - build

As we begin to add lines to our yaml we can use our command line tool to validate and confirm steps incrementally.

$ circleci run validate
Config file at .circle/config.yml is valid.

Then you can pack it up and push it to GitHub. The build won’t take too long for this one. Take a look at the logs in CircleCI. You should see your echo run in the console:Adding Orbs

 

We could build out each step in turn by picking the container, establishing each process and testing it, but we have orbs! Someone has already done that for us. Let’s scratch some of that original file and add our e2e test runner.

# .circle/config.yml
version: 2.1
- jobs:
-   build:
-     docker: 
-       - image: circleci/node:12 # the primary container, where your job's commands are run
-     steps:
-       - checkout # check out the code in the project directory
-       - run: echo "hello world" # print a message to verify action
+ orbs:
+   cypress: cypress-io/cypress@1 # Versions are changing a lot, leave off specifics to get the latest

workflows:
  test_then_build:
    jobs:
-     - build
+     - cypress/run:
+         start: npm run serve # We need our server running
+         wait-on: 'http://localhost:8080'
```

**Wait!** before you push that...  `cypress/run` is going to run our tests inside the container and needs some direction to find its way.  Let's add a `baseUrl` to `./cypress.json`

```javascript
{
  "pluginsFile": "tests/e2e/plugins/index.js",
  "baseUrl": "http://localhost:8080"
}

Wait! before you push that… cypress/run is going to run our tests inside the container and needs some direction to find its way. Let’s add a baseUrl to ./cypress.json

{
  "pluginsFile": "tests/e2e/plugins/index.js",
  "baseUrl": "http://localhost:8080"
}

Now, when our container spins up and runs Cypress, instead of looking for local files it will look for a base url and run our e2e tests. Add it, commit it and open up your workflows panel in CircleCI.Passed, with flying colors. Now let’s add the next step:

 

version: 2.1
orbs:
  cypress: cypress-io/cypress@1 
+ heroku: circleci/heroku@0 # Heroku orb for deployment

workflows:
  test_then_build:
    jobs:
      - cypress/run:
          start: npm run serve # We need our server running
          wait-on: 'http://localhost:8080'
+     - heroku/deploy-via-git:
+          requires: # Makes the above command wait until the required command is complete
+            - cypress/run

Reading down to the jobs section of the Heroku orb at the deploy-via-git command you’ll see that CircleCI needs an API key and an app name to complete its remote URI. We can set those up in our project env vars.

Push it to GitHub and watch it build:Now as you start to build tests and code CircleCI will check all your tests and only deploy if your tests pass. From here you can customize even further. Some options you can experiment with are adding unit tests, running them in parallel, deploying different branches or deploying to different hosting services. There are a lot of possibilities. Take some time and keep exploring.