Supercharging your frontend CI/CD workflows with Netlify

Preface

Hi There! 👋

If you've been working in or around frontend development for the last few years you will no doubt have noticed that the process around it has expanded quite a bit. Gone are the days where we simply wrote some HTML, CSS, and Javascript, and simply fired up ye olde FTP connection to push the new files to the server. Instead, we now get to have fancy automatic continuous integration and deployment workflows rivaling those on the backend, with bundling, asset optimization, testing, linting, and much more depending on your use case and level of patience.

This leads to a rising need for platforms that not only support these workflows but also expand them and innovates with frontend as a first-class citizen, instead of an afterthought. Platforms like this have started to crop up, and for the most part, they are making our lives as frontend devs easier.

The platform we are going to talk about today is Netlify. Why Netlify? you ask. Well, simply put, Netlify combines a lot of strengths and features into a neat, easy-to-use, package. Many of the features provided by Netlify can be recreated using other tools, with varying levels of effort, but I have yet to see another platform provide the same balance of features, customization, and ease of use that Netlify does.

Also, I just really like Netlify ❤️

In this blog post we will go over how to hook your repo up to Netlify, and then talk about some of the cool things you can do from there.

⚙️ Connecting your repo

Git is a first-class citizen in Netlify. Manual deployment is certainly possible, but you will be missing out on a lot of what makes Netlify awesome. Netlify has support for the major git providers such as Gitlab and Bitbucket, but especially the Github integration is great.

Setting up a new site on Netlify is quite simple. Start by hittin' that big green button

Select the git provider of your repo, and the repo you want to connect.

Then you will have the chance to set some basic settings like which account should own the site (if you are part of multiple organizations on Netlify), which branch to deploy, and which command to run when building the site. Netlify will automatically try to infer the build command and publish folder for your project, based on your framework, and most of the time they actually do a pretty good job. Hit deploy site and you are off to the races. Congratulations, you just made a new Netlify site 🎉

💪 Making your PR's work for you

We all know and love pull requests. Most of you are probably already working in a PR-based workflow. If not, you really should be, there are loads of benefits. In a frontend context though, it can be hard to spot many potentially crucial bugs just by looking at raw code. Things like the smoothness of an animation, the responsiveness of the layout, or behavior across browsers are much easier to spot when viewing the page. We could of course check out the branch of the PR locally, build the project and run it ourselves, but in a hectic and busy workplace with deadlines and a lot of context switching, my experience tells me that this will simply not happen.

When reviewing any piece of code, viewing the product of said code, should be as easy as clicking a button. This is especially true for any code concerning UI - such as frontends.

Luckily, Netlify provides this out of the box with deploy previews when deploying from Github.

It's even enabled by default, neat right! 😎

What this means is, that all our PR will have corresponding on-the-fly deploys made for them, and once the PR is resolved, the deploy will be taken down again.

For extra niceness, Netlify even adds a couple of Github Actions for you, making the preview and build info directly available from the PR

In addition to making life easier for reviewers and reviewees, deploy previews can help bridge the gap between product owners and developers, by giving PO's a way to visually inspect features and catch errors or misunderstandings earlier.

I've seen the benefits of this approach first hand, with PO's performing acceptance testing on singular user stories by reviewing the deploy preview for that story, and will wholeheartedly recommend, that anyone at least tries to incorporate this approach in some way.

🌍 Taking care of your environments

In real-life setups, most of us will end up having multiple environments. Whether it's a develop, stating, or test environment, it's pretty common. In Netlify, this is achieved by enabling specific branch contexts. In our case, we will set up a develop branch with a corresponding environment, which will be automatically deployed to develop--{projectName}.netlify.app.

After that you have to... well... that's that actually. Just by adding the branch here, it will be built and deployed 🎉

Let's say, however, that you would like to use a different build command for development. Maybe you are using storybook and want to expose it on develop, but not production. Fear not, it's just as easy. Although only the default build command can be set through the Netlify UI, it's possible to specify build commands (and loads more) for all contexts in the netlify.toml file.

Now all deploys on develop will use the build command specified here.

This approach can be used to customize a lot of things on Netlify, such as redirects, headers, env vars and so on, even for things like deploy preview contexts, by doing context.deploy-preview instead. Take a look at the documentation to see more.

📈 Getting Analytical

Most people would probably default to Google Analytics (or maybe give Project Clarity a shot) for monitoring and analyzing traffic on their sites, but if you are already hosting your site on Netlify, you can enable analytics with one click for 9$/month. It's not as complex or mature as GA (but let's be honest, what is when it comes to analytics). It is a convenient and easy tool to use, which covers essential things like page views, unique visitors, user location, etc.

Btw, did I mention that according to Netlify, their analytics are fully GDPR compliant? 😮

🔌 Plugin your favorite plugins

One of the biggest (semi)recent features on Netlify is the addition of both Netlify curated and community-driven plugins. Plugins are basically prebuilt pieces of functionality you can add to individual sites. A good example is the Essential Next.js plugin. Installing it on your site will automatically make slug based routes work, fires up Netlify functions (oh yeah, Netlify also provides functions, a convenient wrapper around AWS Lambda), for routes needing SSR, and prerenders the rest. In short, enabling all the Next.js goodness without the hassle of configuring your server from scratch. Other examples include plugins for A11y, AMP SSR, Algolia indexing, Cypress E2E, Gatsby/Gridsome/Hugo cache persisting, and loads more.

Wrapping up

This is, of course, just the tip of the iceberg in regards to what is possible with Netlify, but I hope that it has made you curious or excited about Netlify and frontend workflows. If you have any tips for better and wilder setups or features that I haven't touched on, feel free to leave a comment and let's have a chat 😀

Catch you in the next one 👋