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:
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:
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.
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!
So to see this in action…
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!
