How to Connect CircleCI With Netlify

How to Connect CircleCI With Netlify

Improve the quality of your deploys with webhooks
Ferenc AlmasiLast updated 2021 November 11 • Read time 7 min read
Get your weekly dose of webtips
  • twitter
  • facebook

Netlify, the all-in-one platform to automate the deployment of modern applications, is a great tool to get our sites live the fastest we can.

The only problem is that we don’t really have the flexibility to run a complete test suite beforehand without much hassle. Yet, this is essential to keep our applications bug-free and prevent breaking our site accidentally.

Luckily, there is a solution. And we don’t have to leave Netlify. Instead, we will connect CircleCI to set up the testing process to our own taste. The rest will be handled by Netlify. Let’s set up a new project to start from scratch.


Setting Up Our Project

In order to test if we can prevent the deployment process from CircleCI, we will need some kind of test that we can fail purposefully. For this, I’m going to use Cypress. Set up a new project and install it with npm i cypress --save-dev. I’ve also added a script to the package.json file to make it easier to run.

Copied to clipboard!
"scripts": {
    "cypress": "node_modules\\.bin\\cypress open"
}
package.json

If you run npm run cypress, it should now open Cypress for you. If this is your first time, it will generate a cypress.jon configuration file at your project root and a cypress folder as well.

You can get rid of everything from the cypress/integration folder and create a new test.js file. As writing tests is not in the scope of this tutorial we will have on single spec:

Copied to clipboard! Playground
describe('Testing Cypress.io', () => {
    it('Should verify that Cypress.io is live', () => {
        cy.visit('https://cypress.io');
    });
});
test.js

To be able to execute this on CI, add another script to your package.json file. We will call this in our CircleCI configuration file. After this, you can push your changes to GitHub.

Copied to clipboard!
 "scripts": {
     "cypress": "node_modules\\.bin\\cypress open",
+    "e2e": "node_modules\\.bin\\cypress run"
 }
package.diff

Integrating CircleCI

Our next step is to integrate CircleCI into our app. Head over to CircleCI and log in with your GitHub account. You’ll be greeted with the list of repositories. Click on the “Set Up Project” button.

Setting up the project in CircleCI

It will generate a config file for you. But before adding that, make sure you add the E2E script as the last step.

Copied to clipboard!
- run: npm install
- run: npm run e2e
config.yml
You can merge the branch created by CircleCI to master

Now you should see your pipeline running. If your builds are failing because of a similar error like this one:

CircleCI throwing errors for missing libs for Cypress

You need to add an additional step to your config.yml file:

Copied to clipboard!
steps:
  - run:
      name: Install libs
      command: sudo apt-get install libxtst6 libgconf-2-4 libnss3 libasound2 libgtk-3-0 libxss1
  - run: npm install
  - run: npm run e2e
config.yml

This will install the missing libraries beforehand. Now that we have CircleCI set up, we can also set up Netlify.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScriptinfo Remove ads

Deploying the Site Through Netlify

The next step is to get our site live through Netlify. Go to the home page of Netlify and create a new account if you haven’t got one already. Then on your dashboard, create a new site from Git.

Creating a new site from git on Netlify

If you don’t see your repository after connecting Git to Netlify, you need to add read access to your repo by configuring the Netlify app on GitHub.

Link to configure Netlify on GitHub
The link on the bottom of the page will redirect you to the configuration page on GitHub

For the third step, leave everything as is and deploy your site. You will be redirected to the page’s overview section where you can follow the link to view it.

The default page on Netlify says that the page cannot be found

Unfortunately, you will get a page not found, as we haven’t added any HTML file that could show up. So let’s fix it quickly. Add the following to your project’s root folder and commit your changes.

Copied to clipboard! Playground
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hi there</title>
    <style>
        body {
            margin: 0;
            background: #161616;
            font-size: 50px;
        }

        h1 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin: 0;
            animation: wave 1.5s;
        }

        @keyframes wave {
            0%   { transform: rotate(0) translate(-50%, -50%); }
            10%  { transform: rotate(-5deg) translate(-50%, -50%); }
            20%  { transform: rotate(10deg) translate(-50%, -50%); }
            30%  { transform: rotate(-5deg) translate(-50%, -50%); }
            40%  { transform: rotate(10deg) translate(-50%, -50%); }
            50%  { transform: rotate(0) translate(-50%, -50%); }
            100% { transform: rotate(0) translate(-50%, -50%); }
        }
    </style>
</head>
<body>
    <h1>👋</h1>
</body>
</html>
index.html

It will trigger a build on CircleCI and also deploy the changes on Netlify. The only problem is that these steps happen separately. Even if the tests fail, the site still gets deployed. And this is not what we want. So as a last step, let’s finally connect the two together and trigger the Netlify deploy through CircleCI.

waving from the deployed site

Connecting CircleCI to Netlify

Lastly, we need to connect CircleCI to Netlify. This is actually easier than you think. First, go to your “Build & deploy” tab on Netlify and set up a build hook.

Adding build hooks to Netlify

Name it however you like. Once you save it, you will get an API endpoint. If we send a POST request to this URL, Netlify will trigger a build. So let’s head over to the CircleCI config file and add it as a last command.

Copied to clipboard!
steps:
  - run:
      name: Install libs
      command: sudo apt-get install libxtst6 libgconf-2-4 libnss3 libasound2 libgtk-3-0 libxss1
  - run: npm install
  - run: npm run e2e
  - run:
      name: Deploy
      command: curl -X POST -d {} ${hook}
config.yml

Now it’s not a good thing to commit sensitive information about your app to source control. Instead, we will set it up as an environment variable called “hook”. So before you commit your changes, open up your dashboard on CircleCI and go to the project settings under the “Jobs” tab.

Howto navigate to the project settings on CircleCI
Click the gear icon to go to the project settings

Under “Environment Variables”, add a new key with the name “hook”, where the value is the endpoint that Netlify has provided for us for the build hook.

Adding the build hook as an environment variable to CircleCI

If we commit the changes made to the config file, we can see that at the end of the job, the deploy is triggered. But still, as soon as we push changes to the repository, it also triggers a deploy on Netlify. This means, even if a previous step fails, the site is still deployed.

Site is deployed even if something fails in CircleCI
We don’t want deploys to be triggered by a push.

To fix this, there’s only a workaround unfortunately. Go to your “Build & deploy” settings and set the production branch to something that will never exist. This way, Netlify won’t be able to deploy the branch and only a hook can trigger a deploy.

How to prevent deploys from code changes in Netlify

If we break the tests, CircleCI will never do a post request to Netlify and our site won’t get deployed unless we fix the issue.


Summary

Now whenever you push your local changes, it’s just a matter of seconds to get things live. The good thing about Netlify is that even if your tests don’t catch a critical issue, you can still revert back to a previous build with just a click of a button.

You can revert changes by publishing previous deploys
Revert changes by publishing previous deploy

Thank you for taking the time to read this article, happy deploying!

  • twitter
  • facebook
Did you find this page helpful?
📚 More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.