Victor Ikechukwu

Posted on Jun 13, 2021 • Originally published at vickyikechukwu.hashnode.dev

Deploy a React Application to Netlify

#react #javascript #netlify #webdev

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 👇.

To follow along with this tutorial, you need to have a Github and Netlify account. so go to their sites and create one if you haven't already.

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

Create a new React App

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

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

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.

run

npm start

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

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

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

Something like this.

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.

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.

Time to Deploy!

Manual Deployment

We are going to try out the first and easiest method of deploying react apps. but you need to have a
Netlify 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.

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

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
here.

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

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

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.

Automated Deployment

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 Github and create a new empty repository for your app. follow this guide on the Github docs, on how to connect your app to a remote repo on github.

once your repo is connected to your app. run

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.

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

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

Click on the "Deploy" button.

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

Proving that our Deployment is Automated

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.

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;