Setting up deployment on Netlify#

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 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 creating a new Netlify account and wiring up our Furry Friends Gallery Mark II.

Step one - create a new account on Netlify#

This is the easy part. Head over to Netlify and you’ll be greeted with the company’s landing page. Look for the ‘Sign up ->’ button on the top right-hand side of the screen and click it.

You’ll be taken to the signup screen, which will look like this:

Feel free to sign up however you wish. You’ll see that Netlify offers a range of options, including a simple email/password combination.

For the purposes of this lesson, we’ll be logged in with GitHub as it is arguably the most common. However, even if you choose another provider, the meat and potatoes of the lesson here will work in the same way. The main differences will be around signin, choosing your repository and any special GitHub commands.

Step two - create a new project for Furry Friends Gallery#

If you choose to sign up using GitHub or one of the other code versioning platforms, you’ll be whisked off to their specific signin screens to authenticate and then authorize Netlify to be able to read your repository information.

Once authorized, you’ll be taken to the Netlify dashboard. Here’s mine:

On the dashboard, you’ll have easy access to high-level account settings, such as domains, builds, billing, and any team members you have.

You’ll see on my dashboard a list of my Netlify-hosted projects: in this case, my personal website and my podcast, The Front End.

If I were to click on one of these, I’ll be taken to a sub-dashboard with specific information related to this site, such as deploys, previews, and settings. We’ll look at this screen in more depth shortly, but for now, we’re going to add a new project!

Hit the green ‘New site from Git’ button at the top right of the dashboard and you’ll be taken through the new site wizard.

Connecting to a Git provider#

The first step in the wizard is to choose the source for the website or app.

Notice that you can choose to sign up for a Netlify account using whichever method you prefer, but you’re not restricted on where you pull in your projects from. So, you can sign up for a Netlify account with GitLab, for example, but then use projects from GitHub or BitBucket if you prefer.

In our case, we’ll choose GitHub. Click the GitHub button and you may see a popup asking to authenticate to your GitHub account. Once you’ve done that, you’ll be returned to the new site wizard and will be moved onto the next step, picking a repository.

Pick a repository#

In this step of the wizard, we need to choose the repository where our deployable code is located. You can see mine is called real-world-react-module-4-demo in the screenshot, but yours might be called something different.

Important note: you may have been developing along with this course inside of folders on your machine that aren’t tied to any code versioning system like Git. That’s great! However, if you want to deploy this code to somewhere like Netlify, you’ll need to have your code committed into a Git repository such as GitHub, GitLab, or BitBucket. If you haven’t already done that, make sure you have that ready before continuing!

Search through your repositories and find the one where your Furry Friend Gallery is located. Click on it to choose it and you’ll be moved onto the final part in the wizard, build options and deploy.

Build options and deploy#

So far so good (and simple). There’s a little bit more to this final step, but first, let’s check out the screen to see what’s going on here.

You can see in the first section we’ve got the chance to assign an owner and a deployment branch. The owner's information is only relevant if you have multiple members in your team or multiple teams. The branch to deploy, however, might differ depending on your Git versioning approach.