Get Started with Netlify: The Simplest Way to Deploy Your JavaScript Apps

By James Quick

If you follow articles, podcasts, etc. related to Web Development, you’ve probably at least heard of Netlify. I’ve heard about from multiple people and over and over again in my favorite podcast, Syntax (which you should definitely check out!). We’ll dive into the details in a sec, but in a nutshell:> Netlify is a hosting platform where you can “build, deploy, and manage modern web projects”

There’s lots of things that you can do with Netlify, so let’s go ahead and dive in! Key note, the Scotch Dashboard is hosted on Netlify!

Disclaimer: This is NOT a sponsored post. We at Scotch just really like Netlify.

Related Reading: Interested in deploying your first site to Netlify? Deploying Your First Gatsby Site to Netlify.

Feature Overview

Netlify’s features page does a great job at telling all of its features. The rundown is:

  • Hosting (free!)
  • Continuous Deployment from a Git Repo
  • Serverless Functions
  • Identity and Auth
  • Forms

All of these tools together along with your JavaScript single page app written in React, Vue, or Angular gives us much power in building fully featured apps.

Hosting

The easiest answer for what Netlify can do for you is host your web applications, specifically static sites. The benefit of static sites are better security, speed/performance, and scalability.

Netlify actually coined the term “JAM” Stack, which stands for JavaScript, APIs, and Markdown.

Netlify ♥️ Static Sites

Because your front-end is built independent of your back-end or any necessary APIs, there’s a strong decoupling between front-end and back-end. Additionally, because your app comprises solely of a few files, these files can easily be replicated across the world with a CDN. JAM stack is the new hotness, and Netlify is the place to be for hosting.

The free plan includes:

  • HTTPS certs
  • Custom domain name
  • Continuous deployment

Free HTTPS and Custom Domain

Most hosts out there have a free version, but Netlify’s version stands out with the HTTPS and custom domain name. With almost every other host I’ve seen, you need to get a paid plan for custom domain name support. Additionally, not only can you use a custom domain on Netlify for free, they also sell domains. This way, you can get your domain name from the same place you host your site. Not bad huh?!

In addition to the free tier, there are obviously paid ones as well with various different features enabled. Right now, I’m just using the free one with no need for a paid tier. If you’d like to compare the different tiers, you can look at their pricing page.

Continuous Deployment

Netlify is incredibly quick and easy to get started with deploying your website. In fact, the easiest way to do this is to set up continuous deployment using Github, Gitlab, or Bitbucket.

Push to GitHub. Netlify deploys. Simple and easy!

So, after making an initial connection between your site and your source code, to deploy the latest changes to your site, all you have to do is push those changes and…voila, your site is updated!

The most incredible part about this is that it legitimately took me less than 5 minutes to sign up for an account and deploy my first React application. I simply created a new website, connected it to a Github repo, waited a few seconds, and there it was! While this type of continuous deployment setup is not specific to Netlify (it’s actually fairly common), they’ve done it well and made it incredibly easy.

There are a few additional features of Continuous Deployment in Netlify.

First, deploys are atomic, meaning that the entire deploy goes successfully or not at all. Your site will never be left in an unhealthy state.

An awesome side effect of atomic deploy is that there is no downtime. Netlify will deploy your code alongside of your old code first. Then, when everything is ready, Netlify simple switches incoming traffic to your newly deployed site instead of the older version, hints the zero downtime.

Branch Deploys

Netlify will lock onto a main branch for production deploys. It can also deploy other branches and give you a URL to test those deploys.

For instance, if you had a staging branch, you could push to GitHub and Netlify would give you a place to test it!

Here’s branch deploy previews for Scotch dashboard. You can see them on the right and one failed.

Deploy Rollbacks

One more feature is the ability to rollback to a previous deploy. If you deploy new code and something goes wrong, simply choose and older deployment and redeploy that one. With Netlify, you can feel pretty safe with all of these options!

Locking Deploys

One last feature is the ability to “lock down a deploy”. This means you can stop your auto publishing (automatic deployments on code pushes) with a specific version. This ensures that subsequent checkins don’t override the version you wanted to keep. It might make sense to do this every once in a while so that you can continue to check in code but not actually deploy.

Netlify CLI

As with many other hosts, Netlify has a CLI package that can be downloaded from NPM.

After downloading this package globally, you can login to your Netlify account, view your sites, make deploys, etc. You can set up Continuous Deployment by connecting an existing repo or even make manual deploys. This is a great alternative to Continuous Deployment if that option doesn’t work for you for some reason.

For more information, check out the CLI Docs.

Serverless (Lambda) Functions

If you’re interested in a hands on tutorial for creating your first serverless function in Netlify, check out Build and Deploy Your First Serverless Function in Netlify.

When developing static sites, you don’t deal with a back-end directly. You might use a third party solution like Firebase for your backend, but in general, your front-end is very decoupled from whatever back-end services you are using. Because of this, there might be certain pieces of your back-end that you need to create yourself.

Netlify provides serverless functions (AWS Lambda Functions to be exact) to add additional back-end functionality for your application.

With Lambda Functions, you can do anything you need to… save something to a DB, validate data and post to another API, etc. A Lambda Function is more or less a Node endpoint that you can do anything you want with. The amazing thing is that with Netlify, you get 125,000 requests to your functions with the free version. I don’t know about you guys, but I won’t that for a long while 🙂

For more information, check out the Functions Docs.

Forms

With any website or app, the most common way to get information from a user is through a form. They fill out the form, and when they submit, that data goes to a backend somewhere that handles that information to add something to a DB, register a user, etc. Since, as mentioned above, your front-end is decoupled from your backend, you might not have a server to handle form submits.

Netlify provides Forms which allow you, the developer, to conveniently handle form submissions by creating a Lambda Function from above.

The only downside I can see here is that the limits on Form submissions is significantly lower than Function calls. You are only allowed 100 form submissions with the free tier of Netlify, and will automatically be updated to a paid tier if you go beyong that. To tackle this, I’ve got a form that submits directly to a Lambda Function that I created instead of using the built in Forms functionality. This way, I don’t have to worry as much about the limits.

To learn more, check out the Forms Docs.

Deploy Previews

When developing code, you might want to test it out “live” without overriding your existing website. In other words, you might want to test out that a new piece of functionality, hosted in Netlify vs. locally, works the way you expect without actually making a new deploy to your site.

Netlify gives you the ability to create Deploy Previews, which will create separate URLs from pushes to branches other than master. These previews are deployed live, but will not override your actual main site.

Deploy Previews provides an incredible way for you test yourself, or share a live URL with someone else so that they can. You can tell Netlify to do this for every branch that you create or select specific branches. A good example would be a Develop branch to test changes before merging them into master.

For more information, check out the Branches and Deploys section of the Continuous Deployment Docs.

Split Testing

The last feature I want to cover is Split Testing.

Split Testing allows you to deploy two different versions of your site so that you can track analytics on which one users enjoy more, leads to more clicks, more purchases, etc.

Netlify provides an easy way to do this. You can choose multiple different branches of your code along with a percentage. This percentage represents how often users should be directed to each version of your site. You would want to do this when trying out different versions of UI, placements of buttons and callouts, etc. While it is up to you to track the necessary analytics, Netlify gives you an easy way to split your traffic.

From the code point of you, you can dynamically retrieve which branch users are currently using as shown below. You can then use this information to track necessary analytics.

process.env.BRANCH

To learn more, check out the Split Testing Docs.

Recap

Netlify is an incredible platform, specifically for hosting static websites. With an incredible free tier, you get access to loads of functionality without having to spend a penny. If you want to see what all the hype is about, sign up for an account and check it out!

I would love to hear in the comments about the projects you guys are working on and how working with Netlify has been for you.

Feel free to comment below or reach out to me on twitter, @jamesQquick.

Source:: scotch.io