Deploying A React App With Netlify

As a new Web Developer, you spend your time learning languages and packages to build your applications. You may even run a command like “npm start” or “rails s” to run your application on a local server. But what about when it’s time to share your creation with the world?

This question sat in the back of my mind for the entirety of my coding bootcamp experience, and once I finished the program, I decided to learn what to do next. In this entry, I will explain to you in hopefully the simplest terms, how to deploy a React.js app using Netlify’s for free.

To show this example, we will also be building a very simple background color changing application. This process will of course work with whatever app you decide to build as long as you are using React.

Creating the App

We will begin by creating our React application by running the command npx create-react-app your-app-name. This will create the framework of our application. You will receive the following messages:

yarn start or npm start will both work

As stated in the terminal, be sure to cd (change directories) into your new app’s directory so you can begin working. To run the app as it is, run yarn start or npm start in your terminal while in the app’s directory. After running that command, you should be brought to a page that looks something like this:

Boiler plate React app

You’ll notice the URL says “localhost:3000”. This is because currently your React app is using your computer as a local server. We’re going to change this when we eventually deploy the app to Netlify, but for now, let’s start building our calculator.

Building Our Color Changer

We can build this app entirely inside the src/App.js file. After clearing out the current contents of App.js, let’s create a function called “changeColor” and inside it three variables, “red”, “green”, and “blue” to represent the rgb values of a color. The JavaScript Math.floor() function will round down a Math.random() function multiplied by 256, which will give us a maximum value of 255 and a minimum value of 0. We will then create the random color with a fourth variable, “newColor”, that uses backticks to concatenate the random numbers into an rgb value.

This is the function body

Now to make this value change on a button click, let’s use the useState hook to add a color state and a setColor function. In the end of our “changeColor” function, we can setColor equal to the new value we have created. In our App’s return statement, we can create a button with an onClick event that calls this changeColor function. Finally, we add some inline CSS to our <div> tag to expand the background, and to set its color to the value of the current state of color, and ta-da! We have built a background color changing application in React!

This is the return statement with added inline CSS

So to see this in action…

A simple but effective app

Deploying To Netlify

Now for the reason you’re here, how to get this app online!

First you will want to install the Netlify command line interface on your machine globally. You can do this simply with entering the command:

$ npm install netlify-cli -g

Next, go to https://www.netlify.com/ and sign up for an account. The easiest way to do this is through your GitHub profile, but you can also use your email address or other methods if you prefer. Once you verify your email, create your Team.

Now, go back to your React app, and in the command line enter:

$ npm run build

This runs a build for you app and sets it up to be deployed. Next, enter:

$ netlify deploy

The command line will then ask you what you want to do, and simply select Create & Configure a New Site, and select the Team name you have created. Give your app a name, and enter “build” when prompted to publish your build folder that we build earlier.

A draft of your website will be available to see before your final deploy. If you everything went well and you wish to continue, deploy your app with the command:

$ netlify deploy — prod

And enter a “build” one more time and hit enter, and you have deployed your very first React app using Netlify!

Congratulations, you have now published your first static or single page application. Netlify certainly makes it easy to get your site up and running to show off to friends, family, or potential employers. If you don’t feel like using the command line, you can even upload directly from your GitHub. I hope this brief overview was helpful and you can start making and publishing your apps!

Github: https://github.com/AidanMcB/React-Color-Changer

Netlify: https://react-color-changer.netlify.app/

I ‘m a Web Developer and a Flatiron coding bootcamp alumni. I currently work in the financial tech industry as a Front End Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store