Deploy a React Application to Netlify
Tags: react, javascript, netlify, webdev
Published: 2021-06-13 02:22:01

Hey guys 👋, in this article we are going to look at the two different methods that we can use to host and deploy your react applications using Netlify.

The first method takes less than a minute, **which is crazy**. and the second method which includes continuous deployments and updates to our app through GitHub will only take you a few minutes to set up 🤠. That's amazing. excited? i am too 😀, let's get right into it 👇.

<blockquote>
	To follow along with this tutorial, you need to have a <a href="https://github.com/">Github</a>
	and
	<a href="https://www.netlify.com/">Netlify</a> account. so go to their sites and create one if
	you
	haven't already.
</blockquote>

with that done. we are going to create a new react app. so that you can follow along 100% of the
way.

<h1>Create a new React App</h1>

create a new empty folder on your desktop or any directory of your choice. give it a name. I'm gonna
call mine `react_app`. great.

open it in your VS Code or any editor of your choice.

Next, we will need to open up a terminal. you can make use of your operating system default Terminal, Git bash, or the integrated terminal that is built-in with VS Code.

Navigate to the directory where your app is. mine is
```bash
cd desktop/react_app
```

> you won't have to do this if you are using the integrated VS code terminal 😏.

From here you will be able to initialize your react app. by simply running
```bash
npx create-react-app (Name_Of_App)
```

where `(Name_Of_App)` would be what you want to name your react app.

> This might take some time. so feel free to go make yourself a hot cup of tea ☕ while it runs on your device 😊.

Great!, after that's done your folder structure should look similar to this in your code editor.

![folder structure](https://cdn.hashnode.com/res/hashnode/image/upload/v1620856597519/uKInHJStX.png)

run
```bash
npm start
```
to start the application and preview it in your browser. you should see something like this.

![our react app in the
browser](https://cdn.hashnode.com/res/hashnode/image/upload/v1620787771597/EL3y0gHkL.png)

Great! 🎉🎇. we successfully created a demo react app.

<h1></h1>

you can go to the `src` folder and edit the `App.js` file before deploying. to customize it a bit.

Something like this.

```javascript
function App() {
return (
<div className="App">
	<header className="App-header">
		<img src={logo} className="App-logo" alt="logo" />
		<p>This is my first Deployment 😊🎉</p>
	</header>
</div>
);
}

```

Save, and now you should see your edited version in the browser.

![edited version of our
app](https://cdn.hashnode.com/res/hashnode/image/upload/v1620787837688/urYTG9Ea0.png)

Great!, now let's focus on the main goal of this article. to show you how we can take our app from the `localhost port 3000`
that only we can see. to the internet. so that you can share it with your friends, employers. really anyone.

<h1> Time to Deploy! </h1>

<h2> Manual Deployment </h2>
We are going to try out the first and easiest method of deploying react apps. but you need to have a 
<a href="https://www.netlify.com/">Netlify</a> account. so go ahead and signup or log in if you
already have one.

after logging in. go to the bottom of the page and you will see this empty box. where we can drag and drop our site folder.

![image of empty drag-and-drop
box](https://cdn.hashnode.com/res/hashnode/image/upload/v1620787999263/Y9ZxMB8oE.png)

Before getting to it. first, stop the react server by hitting `Ctrl C` in our terminal.
next, we would need to `build` our react app. simply run

```bash
npm run build
```

This is going to create a `built` version of react that our browsers can natively understand. and we can freely deploy on the web. read more about this 
<a href="https://docs.npmjs.com/cli/v6/commands/npm-build/">here</a>.
<br>

once done, you should see the `build` folder. in your folder structure.

![Folder structure showing the build
folder](https://cdn.hashnode.com/res/hashnode/image/upload/v1620788203439/J-c2dJm8a.jpeg)

open your react app in finder if you're on a mac or file explorer for windows.
<br>

next, drag and drop the build folder into the empty box on the Netlify page. that is it. after a few seconds, the application should be deployed on the web! 🎉. now we have a real URL
that we can share with people to access the site 😊. that is it this process works for any frontend react application. it's that simple.

<h2>Automated Deployment</h2>

One major problem with our current deployed version is that. if we make a change to our source code, the changes are not going to be reflected on the deployed version.

And this makes sense, because. remember it is the `build` folder that contains the version of our app that is accessible by web browsers. And we had manually pushed it to Netlify already, so changes made to our code, won't be reflected on our `build` folder on Netlify. unless we `build` our app again. and deploy it manually again 👀.

As you can see this process is impossible 😞🤦‍♂️.

🤔 So how do we deploy our applications so that, all the changes made to the code are reflected on the deployed site, each time we push to Github.

To do that we need to add the project to a Github repository. go to <a href="">Github</a> and create a new empty repository for your app. follow this guide on the <a href="https://docs.github.com/en/github/importing-your-projects-to-github/adding-an-existing-project-to-github-using-the-command-line">Github docs</a>, on how to connect your app to a remote repo on github.

once your repo is connected to your app. run
```bash
git push -u origin main
```
on your terminal to push your code to GitHub.

we can head back to Netlify. scroll to the top and press on the "New site from Git" button.

![image of "New site from Git" button](https://cdn.hashnode.com/res/hashnode/image/upload/v1620788502193/r73NY6HC1.png)

You will be asked to choose the Git provider where your site’s source code is hosted. When you push
to Git.
<br>

Then you can search for the specific repository you wish to deploy, among all your Github
repositories. Click on it.

![A list of our GitHub repository ](https://cdn.hashnode.com/res/hashnode/image/upload/v1620857044256/PTFyg0dYN.png)

 Click on the "Deploy" button.

And there you have it!. your app is now Live!. congratulations! 🎉

<h3>Proving that our Deployment is Automated</h3>

Now, whenever you push to Github. Netlify would automatically `build` our app for us and update our
deployed version.

To prove this. we are going to make some tweaks to our `App.js` file by simply changing some text. To see if truly our
changes would be reflected on the live site. once we push to Github.

```javascript
function App() {
return (
<div className="App">
	<header className="App-header">
		<img src={logo} className="App-logo" alt="logo" />
		<p> SECOND DEPLOYMENT: BREAKING CHANGES 😊🎉</p>
	</header>
</div>
);
}

export default App;
```

Once those changes are made. commit and push your code to Github.
<br>

In no time you should see your changes reflect in your Netlify website.

![final deployed  app](https://cdn.hashnode.com/res/hashnode/image/upload/v1620856489994/LwsZuoMnt.png)

Hurray!

<h2>Conclusion</h2>

And that is it, guys. we now have a deployed version of our react application, which would be updated whenever we push
our changes to Github.
<br>

Thanks so much for reading. hope you wouldn't break a sweat when next you are deploying your react
applications 😅.
<br>

Let me know in the comments which free hoisting service you have been using. and maybe I might write
on that.

What are you still waiting for? 🤷‍♂️. go deploy that react app to Netlify!.

<a href="https://www.buymeacoffee.com/molipa" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 30px !important;width: 120px !important;" ></a>

**I hope you found this helpful, Thanks so much for reading!! 💖 And keep on coding! 👨‍💻.**