Continuous deployment for static websites with Github, Netlify and Frontend Robot

Avatar
Mario Casciaro@mariocasciaro
July 25, 2019

In this article we'll see how Frontend Robot's "Smart Triggers" can be used to integrate with Netlify and Github to create a completely automated deployment workflow for static websites.

The rise of static

It’s 2019, and even though everything on the internet seems so dynamic, a good chunk of it is in reality static. Yes, static is the latest trend in web development and for good reasons. Static websites can be scaled easily and massively, they can take full advantage of CDNs and are easy to deploy.

But don’t be fooled into thinking that static means static content, it just means static resources (html, js, css, images, etc.), resources generated at build-time rather than at runtime at each request. This may seem limiting, but thanks to the current client side technology and modern static site generators - such as Gatsby, Hugo and Hexo, just to name a few - there are actually very few cases where a server-side web application cannot be replaced by an API plus a static website.

A fully serverless deployment workflow

As we already mentioned, deploying a static website is very simple nowadays. Forget about launching FTP commands, configuring servers or setting up load balancers, all you need today is available on the cloud and allows a highly automated workflow also known as continuous deployment.

In this article we will see how we can deploy a simple client-side application using:

We will be able to deploy and test our application by simply committing code into our Github repo. There will be no servers to manage or commands to run besides git commit followed by git push.

Let’s get started.

Preparations

Before we start, let’s make sure we have:

Fork the sample repository

Once you have your Github account, go to https://github.com/frontend-robot/todo-mvc and fork the repository into your account. That’s the application we will deploy and test as part of this tutorial. It’s an adapted version of the popular TodoMVC application using vanilla Javascript, it’s intentionally simple as it doesn’t require any build step.

Deploying to Netlify

OK, the first step is getting our sample application out there. With Netlify this is very easy. From the dashboard page of your Netlify account, click on New site from Git.

Adding a site on Netlify
Adding a site on Netlify

In the Continuous Deployment section, select Github.

Connecting a Github repo on Netlify
Connecting a Github repo on Netlify

After authorizing the Netlify app on Github, you will be prompted to install the Netlify Github app in a Github organization. Choose the organization that contains the repository we forked earlier.

Installing the Netlify app on Github
Installing the Netlify app on Github

In the next screen, you can choose which repository Netlify will have access to. You can chose All repositories for convenience, or select just those we need to connect on Netlify. Click Install and you will be redirected back to Netlify where you can now select the repository to deploy. If you have many repos, search for the todo-mvc repository.

Selecting a Github repo on Netlify
Selecting a Github repo on Netlify

Select the todo-mvc repository, then on the next screen, you can leave all the default values untouched and just click Deploy site.

After a few seconds, our application will be deployed and ready to use. Netlify will assign to the deployment a random URL, click on it to open our freshly deployed app.

The new deployment on Netlify
The new deployment on Netlify

Triggering a new deployment

When deploying a site from Github, Netlify will continue to listen for new commits pushed to the source repository and will automatically deploy the new changes.

Let’s try it. For example, we can try to change the top header of the application from <h1>todos</h1> to <h1>My Todo App</h1>. You can find this in the file index.html.

To do that, you can clone the repository locally, make some changes and then commit and push those changes back to Github. Alternatively you can edit the file straight from Github: simply click on a file, then click on the small pencil icon at the top right corner of the file contents to start editing the file. Scroll down and click Commit changes to commit the changes straight away.

Now let’s go back to Netlify and check if the changes have been deployed. Go to the site overview and you should see the new deploy in the list of Production deploys.

Changes deployed on Netlify
Changes deployed on Netlify

Now you can open the project URL and verify that our changes were actually deployed.

Nice, it worked!

Creating a test case for our app

That was easy, wasn’t it? Netlify allows us - with just a few clicks - to have a fully working continuous deployment solution. But there is one piece missing, testing. Testing is an essential part of continuous deployment, as it allows the developers to ship code often and with confidence.

Frontend Robot allows you to create end-to-end tests with just a few clicks and connect them easily into your continuous deployment pipeline. Frontend Robot it’s a fully integrated cloud solution so you won’t have to configure or manage other servers or products.

So, let’s create a simple test in Frontend Robot. Go the Frontend Robot dashboard and click New Suite.

Creating a new Suite on Frontend Robot
Creating a new Suite on Frontend Robot

Give the test suite a meaningful name, then click on the Tests tab and then on Create a test.

Creating a new test on Frontend Robot
Creating a new test on Frontend Robot

Let’s call the test Create todo. Now let’s create our first instruction, copy/paste the URL assigned by Netlify to our new deployment in the Navigate to URL field. Then, click Save & Next.

Navigating to a URL
Navigating to a URL

Now it’s time to add our first real instruction. Select Click from the Instruction dropdown and then hover your mouse over the todo app text field and click. This will extract its CSS selector. Then click Save & Next as shown in the GIF below:

Adding a click instruction

The Click instruction will give focus to the text field. Now we can type something to create a todo. Select Send keys from the instructions list, then type in Hello world! and add the Return special key as shown in the video below.

Typing some keys

This will create our new todo item. Now, let’s add an assertion to automatically check that the todo was actually created. Select the Element exists instruction, then hover the mouse over the newly created todo to extract its CSS selector, finally click Save & Next as shown in the GIF below.

Asserting that an element exists

Our nice little test is now ready. We are automatically creating a new todo and then checking that it’s actually there. That was easy!

Automatically running the test at each deploy

To create a fully automated continuous deployment solution, we need to automate the testing step as well. That is easily done with Frontend Robot and Netlify.

First, let’s generate a new smart trigger. Go to the test suite’s settings as shown below.

Go to the suite's settings
Go to the suite's settings

Then scroll down to the Smart trigger section and click Generate Smart Trigger URL. Select and copy the generated smart trigger URL.

Generating a smart trigger URL
Generating a smart trigger URL

Now go to Netlify and go to your site’s settings.

Netlify site settings
Netlify site settings

Navigate to Build and Deploy, then from the Deploy notifications section click on Add notification and then on Outgoing webhook.

Netlify outgoing webhooks
Netlify outgoing webhooks

From the Event to listen for dropdown select Deploy succeeded, then paste in the URL to notify field the smart trigger URL we generated previously. Click Save and we are done!

Adding an outgoing webhook
Adding an outgoing webhook

Now every time our project is deployed, the test suite associated with the smart trigger will execute automatically. Let’s give it a try. Trigger a new deployment by pushing a new commit, wait a few seconds, then go to the test suite results on Frontend Robot to see your first automatically-triggered test run.

Test run results on Frontend Robot
Test run results on Frontend Robot

Showing the test results on Github

Now let’s close the loop. We are automatically triggering a test run for each commit, it would be awesome to see the results of the test directly on Github. With Frontend Robot this is a simple one-step operation.

Go to your organization’s Settings - click on the cog icon on the left-side toolbar. Then open the Integrations tab and in the Connected Github organizations section click on Connect an organization.

Connect a Github organization
Connect a Github organization

Follow the instructions on Github to install the Frontend Robot app on the organization that is hosting our repository. We recommend to install the app in All repositories so you don’t have to update the installation later if you want to use a different repository.

That’s it. Now the Frontend Robot’s smart trigger will extract the repository information from Netlify and will add the test run result on Github beside the commit.

To verify that, trigger a new deployment, then go to the Github repository and watch the result coming up live from Frontend Robot.

Test results on Github
Test results on Github

That’s it. With this we have closed the circle and setup our simple continuous deployment workflow.

Conclusions

Automation in software development is key for a successful project. It’s important not only because of the time savings it can provide, but also because it helps define a repeatable workflow that can be improved and refined over time to obtain levels of stability and efficiency not attainable otherwise.

In this article we’ve seen how it’s possible to integrate three different products - Github, Netlify and Frontend Robot - to obtain a fully automated workflow for deploying and testing static websites. As we’ve seen this is a very simple process that can be applied very easily to both new and existing projects.

Share the article

Ready to automate?

Free 14-day trial, no credit card required.