This video is available to students only

Setting up deployment on Netlify

In this final lesson of the module, we'll walkthrough the deployment process to host our Furry Friends Gallery Mark II app on the Netlify hosting platform.

From the previous lessons we’ve discovered that we’ll need a suitable hosting platform to serve our built and processed apps, websites, and SPAs.

Because the code you’re likely to produce with React is dependent on some kind of build process to get from development code to production-ready output, it’s useful to choose a hosting provider that can handle this building process for you. You could, of course, just run build commands manually and then deal with the output yourself, but this is a tedious, unnecessary, and very error prone-process.

In modern development environments, it’s much more common to deal with some sort of predictable build and deployment pipeline where tests are run, code is built, bundled and packaged for deployment, and physically deployed somewhere for public consumption.

We’ve briefly introduced Netlify as an option for hosting your React apps and sites, but we’ll take a look in more depth here. We’re going to sign up for a new account, attach Netlify to our GitHub repositories, set up a build and deployment project for the Furry Friends Gallery Mark II, and finally, deploy our app to the world.

Why Netlify#

In the previous lesson, we looked at a range of different options available for hosting more complex projects such as SPAs and React-driven apps and websites.

The reason for picking Netlify is that it has the perfect blend of simplicity, flexibility, and power. It’s simple and straightforward enough for beginners and those new to deploying their apps to grasp, but powerful enough to run huge, enterprise-level applications (you’ll see the likes of Nike, Victoria Beckham, and LiveChat as but a few of their customers!).

Whilst hosting options such as AWS can introduce a steeper learning curve — as they have many distributed and interconnected services that need to be wired together — they also bring with them a complex pricing model that means you can potentially be paying for services that you have mistakenly left running in the background.

Netlify offers a much more straightforward approach, focusing on lightning-fast, CDN-backed hosting with some really cool add-ons and plugins.

Netlify's landing page

Netlify’s benefits include:

  • A simple, three-step process from connecting your code repository to viewing a deployed app.

  • The use of custom domains.

  • Free SSL certificates as standard.

  • Build-time plugins, such as image optimization as your project is building.

  • Form capturing add-ons dealing with any form submission on your website.

  • Preview builds of your site before committing to full deployment.

  • Automatic repository watching — your site builds and deploys every time you make a new commit to a specified branch.

All of this can be managed through a clean, user-friendly GUI, but power-users also have the option of using a command-line interface if they prefer.

For our purposes, we’ll start by creat