How to Deploy Your First React App on Netlify

[00:00 - 00:09] Lesson 3. Setting up deployment on Netlify. From the previous lessons we've discovered that we'll need suitable hosting platform to serve our build and process apps, websites and SPAs.

[00:10 - 00:28] 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 then deal with the output yourself, but this is a tedious, unnecessary and very error-prone process.

[00:29 - 00:46] 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 our React apps and sites, but we'll take a look in my depth here.

[00:47 - 01:05] 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 2, and finally deploy our app to the world. But why Netlify? In the previous lesson we looked at a range of different options available for hosting while complex projects such as SPAs and React driven apps and websites.

[01:06 - 01:17] 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.

[01:18 - 01:37] You'll see the likes of Nike, Victoria Beckham and Live chat 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 be potentially paying for services that you have mistakenly left running in the background.

[01:38 - 02:08] Netlify offers a much more straightforward approach focusing on lightning fast CDN backed hosting with some really cool add-ons and plug-ins. Netlify's benefits include a simple three-step process from connecting your code repository to reviewing a deployed app, the use of custom demands, free SSL certificates as standard, build time plug-ins such as image optimization as your code project is building, form capturing add-ons to deal with any form submission on your website, preview builds of your site before committing the full deployment and automatic repository watching.

[02:09 - 02:20] Your site builds and deploys every time you make a commit to a specific 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.

[02:21 - 02:31] For our purposes we'll start with creating a new Netlify account and wiring up our furry friends gallery mark 2. Step 1 - Create a new account on Netlify. This is the easy part.

[02:32 - 02:41] Head over to www.netlify.com and you'll be greeted with the company's landing page. Look for the sign up button in the top right hand side of the screen and click it.

[02:42 - 02:51] You'll be taken to the sign up 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.

[02:52 - 03:00] 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.

[03:01 - 03:11] The main difference will be around signing, choosing a repository in any special GitHub commands. Step 2 - Create a new project for the furry friends gallery.

[03:12 - 03:27] If you choose to sign up using GitHub on one of the other code versioning platforms, you'll be whisked off to their specific sign-in screens to authenticate and then to authorize Netlify to be able to read your repository information. Once authorized you'll be taken to the Netlify dashboard. Here's mine.

[03:28 - 03:38] On the dashboard you have easy access to high level account settings such as domains, builds, billing and any team members that you have. You'll see on my dashboard a list of Netlify hosted projects.

[03:39 - 03:53] In this case my personal website, robkendall.co.uk and my podcast The Frontend, The Frontendpodcast.site. If I were to click on one of these, I'd be taken to a sub dashboard with specific information related to this site such as deploys, previews and settings.

[03:54 - 04:04] We'll look at that 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.

[04:05 - 04:15] The first step in the wizard is to choose the source for the website or app. Notice that you can sign into a Netlify account using whichever method you prefer but you're not restricted on where you pull your projects from.

[04:16 - 04:28] 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. So click on the github button and you might see a pop-up asking to authenticate with your github account.

[04:29 - 04:40] Once you've done that, you'll be returned to the new site wizard and we'll move to the next step, picking a repository. In this step of the wizard we need to choose the repository from where our deployable code is located.

[04:41 - 04:54] You can see mine is called real world react module 4 demo in the screenshot but yours might be called something different. An 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.

[04:55 - 05:06] That's great, however if you want to deploy this code 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 before continuing.

[05:07 - 05:18] So now we're going to search through our repositories and find the one where our furry friend gallery is located. Click on it to choose it and you'll be moved onto the final part of the wizard, build options and deploy.

[05:19 - 05:31] So fast or good, and quite simple. There's a little bit more to this final step but let's check out the screen to see what's going on here. You can see in this first section we've got the chance to assign an owner and a deployment branch.

[05:32 - 05:39] The owner 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.

[05:40 - 05:53] It's quite common to have a main or master branch in your project and this will be the primary source of truth for the project where all releases are made from . Leave this section as main or master or whatever the default branch is unless you have a specific need to deploy your code from a different branch.

[05:54 - 06:07] In the basic build settings section we'll define our build command and directory in which Netlify will look to find all the files it needs to deploy. Netlify does a pretty good job at working out what these values should be based on the type of project you're deploying.

[06:08 - 06:23] However for clarity we need to know what command to give Netlify to trigger the build process as well as the final folder that is output as part of that build process. In our case we can open up the project furry friends gallery mark 2 and look in the package Json file under the script section.

[06:24 - 06:36] Since this is a create react app you'll see the command build. If we were to build this project ourselves manually in a terminal window we'd type yarn build so that's what we have to pass the Netlify in the build command input box.

[06:37 - 06:51] Similarly if we run the yarn build command and let it finish we'd see a new folder in our project called build. This is the location of the build and processed project files ready to be deployed so we'll pass build as the folder to the published directory input here.

[06:52 - 07:01] Advanced build options. Usually this is where we'd leave things and just click the deploy site button. However we need an extra step because our furry friends gallery is using environment variables.

[07:02 - 07:12] At the bottom of this page look at the advanced build settings section where it talks about environment variables. In the previous module we introduced the concept of environment variables and how they're stored in .n files.

[07:13 - 07:28] The drawback to .n files is that they usually start on each developers local machine and not checked into code versioning systems and are therefore not available to build systems such as Netlify. When we built the furry friends gallery mark 2 in the very last module we used two environment variables to access our dog API.

[07:29 - 07:43] Namely react app dog API URL and react app dog API key. So how do we make those variables available at build time for Netlify? Fortunately like all good build pipelines Netlify provides us with the option to add environment variables to be used at build time.

[07:44 - 07:55] So if we take a look towards the bottom of the build settings screen you'll see an advanced build settings section. This is where we can add our environment variables to enable the site to connect with our dog API.

[07:56 - 08:09] Click the new variable button twice and you'll see two sets of inputs appear that hold key and value values respectively. We want to enter our environment variables for the API URL and access key into these new inputs like this.

[08:10 - 08:19] With that covered it's time to deploy our hard work. Hit the green deploy site button and you'll be taken to the projects dashboard to check on the build progress.

[08:20 - 08:32] Step 3. Inspect the build via the project dashboard. So here we are the project dashboard for our project and it should look something like this. Up at the top of the dashboard you'll see we have a funny looking name.

[08:33 - 08:47] Unless you're using a custom domain for the project Netlify will assign a random three part name for you which you can use to identify your projects in lists and access publicly once it's deployed. It'll be an address that looks like this. Your unique name dot netlify dot app.

[08:48 - 08:56] Note yours look different to the one I have here. The topmost area holds the preview of the deployed site once it's finished as well as the status of the current build and deploy.

[08:57 - 09:06] Notice that ours is currently set as yellow with a site deploying progress message. The other main points of interest here are the getting started section and the production deploys area.

[09:07 - 09:20] Getting started is a one time panel that shows for all new projects that you add to Netlify. Once your site is deployed successfully you'll be given the option to bring in and use a custom domain and finally to add a free SSL certificate.

[09:21 - 09:35] We'll leave the custom domain and SSL for now as they're outside the scope of this course but Netlify has some fantastic documentation on custom domains and how to use them with your projects. With production deploys you'll find a list of the most recent deploys for your project and whether they're succeeded or failed.

[09:36 - 09:47] You can inspect each separate build run to see a log of exactly what happened during the build. After a while you should see your project is finished building and then you can view your hard work in all its glory at the public URL.

[09:48 - 09:55] Bernard what's this? Red text, a warning and message about site deploy failed. Something's gone wrong with our build and the build has failed.

[09:56 - 10:09] Fortunately we can step into the specific build run and see exactly what went wrong. Looking under the production deploys area of the project dashboard you can see that we have at least one build run with a failed tag in red next to it.

[10:10 - 10:27] If we click on the most recently failed build tag to view the build log under this wall of white on black terminal text you can scroll down to see a specific point in the build where things went wrong and look for a possible solution. This is a good place to highlight the major difference between running things locally and building and deploying in a separate production environment.

[10:28 - 10:37] Locally if you run yarn build everything will build fine and you won't see any issues. However by pushing things to production deployment environment such as Netlify some sort of issues being introduced.

[10:38 - 10:48] Now the error we have here is a rather specific build environment error that's unique to Netlify. From the middle of 2020 Netlify started adding a ci = true environment variable to all builds on its platform.

[10:49 - 11:10] The build environment such as Netlify will have a list of standard internal environment variables that they make available to projects during builds but this one causes an easy to fix issue with create react app in particular. The main problem here is that this automatically injected environment variable ci = true causes the build of our project to interpret some rather innocuous warnings as real problems shutting down the build.

[11:11 - 11:20] You can read all about this specific issue on the Netlify community blog where they have an entire thread dedicated to this problem and how to solve it. Fortunately for us it's a really easy fix that we'll apply now.

[11:21 - 11:33] So step 4, exploring the build settings. Fixing our build error is quite straightforward and it only takes a simple change to the build settings but it also gives us a good opportunity to review the build settings and see what else is in there.

[11:34 - 11:43] From the project dashboard click on settings menu item in the top navigation. Once in the site settings click build and deploy link from the left hand menu.

[11:44 - 11:58] This section is where you can discover and edit all of the settings related to your site or apps build and deployment. You can change the deployment branch, environment variables, apply post processing tricks like injecting Google analytics into your site and controls who gets what notifications.

[11:59 - 12:11] For now however we're concerned with the very top box build settings. Click the edit settings button and change the build command from yarn build to ci = yarn build.

[12:12 - 12:21] Hit the save button and that's it. Such a simple fix but now Netlify will not interfere with our create react app build and you'll find things go much more smoothly from now on.

[12:22 - 12:27] The last thing is to trigger a new build and deployment run. To do that head over to the deploy section from the top navigation.

[12:28 - 12:41] This area lists out the most recent deployments as well as giving access to deployment settings, notifications and stopping automatic publishing. For our needs we're mainly concerned with the trigger deploy select element in the top right of the deployment list.

[12:42 - 12:52] Click trigger deploy and then select deploy site to kick off a new site deployment. This will add a new deployment item to the existing list and mark it as in progress.

[12:53 - 13:04] If you click into this new build you'll be able to follow along in real time as Netlify builds a project. Hopefully if everything goes according to plan you'll reach a nice blue box surrounding the message Netlify build complete.

[13:05 - 13:14] If you reach this point everything's built and will be able to go view our deployed project at our very own unique URL. Step 5 Viewing the deployed app.

[13:15 - 13:31] So back at the top of the screen click the deploys link to get back to the deploys dashboard and then take a look at the nice green URL under our project name. Mine will look different to yours but the point here is that you can click on this link to open a new screen which will have our lovely furry friends gallery mark 2 running.

[13:32 - 13:46] Take a look at the public app and take it for a spin. Select and breed from the left page through them view the dog pictures. Although we haven't built anything new in this module we've covered an awful lot of ground in understanding how building and deploy our apps in a realistic setting works.

[13:47 - 14:14] You should give yourself a huge pat on the back and go grab a well earned rest before we tackle the next module thinking in react. [ Tapping ]