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

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:

• Github to store our code.
• Netlify to deploy and host the application.
• Frontend Robot to test each new deployment.

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:

• a Github account (who doesn’t this days, but if you need one you can sign up here)
• a Netlify account (sign up here)
• a Frontend Robot account (sign up here)

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.

In the Continuous Deployment section, select Github.

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.

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.

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.

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.

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.

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

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.

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:

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.

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.

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.

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

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

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

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!

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.

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.

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.

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.