To make the most of this tutorial, you should have the following:<\/p>\n\n\n\n
- CircleCI account<\/strong><\/a>:<\/strong> CircleCI is a CI\/CD platform that we\u2019ll use for automated deployment (which includes testing and building our application before deployment).<\/li>
- GitHub account<\/strong><\/a>:<\/strong> We\u2019ll store the project and its tests in a repo.<\/li>
- Heroku account<\/strong><\/a>:<\/strong> Heroku is a platform used for deploying and scaling applications. We\u2019ll use it for deployment and hosting.<\/li>
- Coveralls account<\/strong><\/a>:<\/strong> Coveralls is a platform used to record and show code coverage.<\/li>
- NYC<\/strong><\/a>:<\/strong> This is a package that we will use to check for code coverage.<\/li><\/ul>\n\n\n\n
A repo containing the example covered in this post is available on GitHub<\/a>.<\/p>\n\n\n
Let\u2019s set things up<\/h3>\n\n\n
First, let\u2019s install NYC<\/a> in the project folder:<\/p>\n\n\n\n
npm i nyc<\/code><\/pre>\n\n\n\nNext, we need to edit the scripts in
package.json<\/code> to check the test coverage. If we are trying to check the coverage while running unit tests, we would need to edit the test script:<\/p>\n\n\n\n\"scripts\": {\n \"test:unit\": \"nyc vue-cli-service test:unit\",\n},<\/code><\/pre>\n\n\n\nThis command assumes that we’re building the app with Vue, which includes a reference to
cue-cli-service<\/code>. The command will need to be changed to reflect the framework used on the project.<\/p>\n\n\n\nIf we are trying to check the coverage separately, we need to add another line to the scripts:<\/p>\n\n\n\n
\"scripts\": {\n \"test:unit\": \"nyc vue-cli-service test:unit\",\n \"coverage\": \"nyc npm run test:unit\"\n},<\/code><\/pre>\n\n\n\nNow we can check the coverage by with a terminal command:<\/p>\n\n\n\n
npm run coverage<\/code><\/pre>\n\n\n\nNext, we\u2019ll install Coveralls which is responsible for reporting and showing the coverage:<\/p>\n\n\n\n
npm i coveralls<\/code><\/pre>\n\n\n\nNow we need to add Coveralls as another script in
package.json<\/code>. This script helps us save our test coverage report to Coveralls.<\/p>\n\n\n\n\"scripts\": {\n \"test:unit\": \"nyc vue-cli-service test:unit\",\n \"coverage\": \"nyc npm run test:unit\",\n \"coveralls\": \"nyc report --reporter=text-lcov | coveralls\"\n},<\/code><\/pre>\n\n\n\nLet\u2019s go to our Heroku dashboard and register our app there. Heroku is what we\u2019ll use to host it.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/cavv1CkE.png?resize=1362%2C143&ssl=1\")
<\/figure>\n\n\n\nWe\u2019ll use CircleCI to automate our CI\/CD process. Proceed to the CircleCI dashboard to set up our project.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/GFXZcxtC.png?resize=1350%2C661&ssl=1\")
<\/figure>\n\n\n\nWe can navigate to our projects through the Projects<\/strong> tab in the CircleCI sidebar, where we should see the list of our projects in our GitHub organization. Click the \u201cSet Up Project\u201d button. That takes us to a new page where we\u2019re asked if we want to use an existing config. We do indeed have our own configuration, so let\u2019s select the \u201cUse an existing config\u201d option.<\/p>\n\n\n\n
After that, we\u2019re taken to the selected project\u2019s pipeline. Great! We are done connecting our repository to CircleCI. Now, let\u2019s add our environment variables to our CircleCI project.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/MrClw8k4.png?resize=1366%2C665&ssl=1\")
<\/figure>\n\n\n\nTo add variables, we need to navigate into the project settings.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/ywfpjoFc.png?resize=1355%2C662&ssl=1\")
<\/figure>\n\n\n\nThe project settings has an Environment Variables<\/strong> tab in the sidebar. This is where we want to store our variables.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/maHAQR6Q.png?resize=1366%2C667&ssl=1\")
<\/figure>\n\n\n\nVariables needed for this tutorial are:<\/p>\n\n\n\n
- The Heroku<\/a> app name:
HEROKU_APP_NAME<\/code><\/li>- Our Heroku<\/a> API key:
HEROKU_API_KEY<\/code><\/li>- The Coveralls<\/a> repository token:
COVERALLS_REPO_TOKEN<\/code><\/li><\/ul>\n\n\n\nThe Heroku<\/a> API key can be found in the account section of the Heroku dashboard<\/a>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/iDzf6rqg.png?resize=1343%2C662&ssl=1\")
<\/figure>\n\n\n\nThe Coveralls repository token is on the repository\u2019s Coveralls account. First, we need to add the repo to Coveralls, which we do by selecting the GitHub repository from the list of available repositories.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/cjnAMj6I.png?resize=1352%2C665&ssl=1\")
<\/figure>\n\n\n\nNow that we\u2019ve added the repo to Coveralls. we can get the repository token by clicking on the repo.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/ug_Ux80t.png?resize=1350%2C493&ssl=1\")
<\/figure>\n\n\nIntegrating CircleCI<\/h3>\n\n\n
We\u2019ve already connected Circle CI to our GitHub repository. That means CircleCI will be informed whenever a change or action occurs in the GitHub repository. What we want to do now is run through the steps to inform CircleCI of the operations we want it to run after it detects change to the repo.<\/p>\n\n\n\n
In the root folder of our project locally, let\u2019s create a folder named
.circleci<\/code> and, in it, a file calledconfig.yml<\/code>. This is where all of CircleCI\u2019s operations will be.<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/cGszd9c8.png?resize=180%2C386&ssl=1\")
<\/figure>\n\n\n\nHere\u2019s the code that goes in that file:<\/p>\n\n\n\n
version: 2.1\norbs:\n node: circleci\/node@1.1 \/\/ node orb \n heroku: circleci\/heroku@0.0.10 \/\/ heroku orb\n coveralls: coveralls\/coveralls@1.0.6 \/\/ coveralls orb\nworkflows:\n heroku_deploy:\n jobs:\n - build\n - heroku\/deploy-via-git: # Use the pre-configured job\n requires:\n - build\n filters:\n branches:\n only: master\njobs:\n build:\n docker:\n - image: circleci\/node:10.16.0\n steps:\n - checkout\n - restore_cache:\n key: dependency-cache-{{ checksum \"package.json\" }}\n - run:\n name: install-npm-dependencies\n command: npm install\n - save_cache:\n key: dependency-cache-{{ checksum \"package.json\" }}\n paths:\n - .\/node_modules\n - run: # run tests\n name: test\n command: npm run test:unit\n - run: # run code coverage report\n name: code-coverage\n command: npm run coveralls\n - run: # run build\n name: Build\n command: npm run build\n # - coveralls\/upload<\/code><\/pre>\n\n\n\nThat’s a big chunk of code. Let\u2019s break it down so we know what it\u2019s doing.<\/p>\n\n\n
Orbs<\/h4>\n\n\n
orbs:\n node: circleci\/node@1.1 \/\/ node orb \n heroku: circleci\/heroku@0.0.10 \/\/ heroku orb\n coveralls: coveralls\/coveralls@1.0.6 \/\/ coveralls orb<\/code><\/pre>\n\n\n\n - Our Heroku<\/a> API key:
- GitHub account<\/strong><\/a>:<\/strong> We\u2019ll store the project and its tests in a repo.<\/li>
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/5iSnVvuP.png?resize=305%2C500&ssl=1\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/k1HYPT9c.png?resize=1359%2C667&ssl=1\")
<\/figure>\n\n\n![\"A](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/passimage.png?resize=1353%2C659&ssl=1\")