Deploy your First React App

Learn how easy it is to deploy a React App using Netlify

I was blown away with how simple it can be to a deploy an app with Netlify when I first came across this tool. It’s honestly one of the coolest tools that I use as a software developer. It takes something that can be incredibly tedious and complex and turns it into the simplest part of your development workflow. I will be showing you just how simple it is by walking you through how to deploy a React Application to it.

Prerequisites

• Node and NPM (Node Package Manager) must be installed
• An account on Github (Really simple to create one if you don’t have one)
• Basic command line experience

Let’s Get Started

The first thing we will need to do is open a terminal/command prompt (depending on your OS). After you have done this you are going to want to go ahead and navigate to the directory where you want your project to live and run this command.

npx create-react-app my-first-app

While this is installing we can go ahead and proceed to the next step which is going to be creating a repo in Github. There is more than one way to do this, so if you are already familiar with what to do then you can go ahead and do that. Otherwise you can follow along below.

First we are going to navigate to the site for Github. Hopefully you already have an account and are signed in. Otherwise you can go ahead and do that now.

GitHub: Where the world builds software

Once you have signed into Github go ahead and click new to create a new repository. You can give it whatever name you would like. You can make it public or private. Then don’t check any of the boxes. Now go ahead and create the repository. You should be greeted with a screen that looks something like this.

We are going to be interested in the commands for an existing repository. Go ahead and keep these commands handy, because we are going to be using them next.

Now let’s go back to our terminal/command prompt. If everything is installed we should now be able to run this command to navigate to our project.

cd my-first-app

Once we are here we can go ahead and copy and paste the different git commands into the command line. It may ask you to sign in after you run the last command. This is okay and can happen if you don’t have a default account setup on your computer.

Now to confirm that everything we did works, we are going to want to go ahead and refresh the browser page with our Github repository and we should now see that our code from the project we just created is there.

Now the moment we have all been waiting for…

Time to Deploy our Code to the Web

So the first step is to create an account on Netlify. I find it easiest to simply sign in with Github, but you can also use your email if you would like. After you create an account you will be greeted with a quick-start guide. You can go ahead and read that or close it out.

Netlify: Develop & deploy the best web experiences in record time

After you have created an account, the next step is to give Netlify permission to access your repositories on Github. This is really quite simple. The first step is to click the “New Site From Git” button. This will take you to a page that looks something like this.

We’re going to click on Github. This will open up a new window which may ask for you to give Netlify access to your Github repositories. Make sure you choose to give it access to all repositories. After you have done this you should be able to go back to the Netlify webpage and search for your repository there. Go ahead and click on it and you will be greeted with a screen that looks like this.

The default options will work for us here so you can click on the “Deploy site” button.

Your build command may look different than mine. Mine says yarn build, but yours may say npm run build

After you have clicked deploy the magic of Netlify happens! You’ll see a screen that looks like this.

When it’s done if you look under production deploys you should see that it says published. And there will be a link at the top of your screen with your first React app on it! This is now a live site that can be shared with anyone across the world.

Wrap Up

Netlify is an amazing tool which provides so much more than I have shown you today. It allows you to easily deploy to a custom domain, automatically encrypt your sites with ssl certificates, and also auto deploys code to your site upon pushing new code to your repository. Feel free to experiment and have fun with it though. Netlify is extremely simple to learn yet incredibly expansive in what you can do with it.

Now that you see how easily a React app can be deployed to the internet hopefully now you can go out there and share your awesome apps with the world!