Easiest Way To Host N Deploy React App Without Manual Git Actions

Beginner’s Guide For Automated App

I’m going to guide you how to deploy and host your React app with Netlify.
Netlify is a service that automates builds, deployments and manages your websites. It’s one of the fastest and easiest deployment solutions these days.

So far I have only used Heroku to deploy my web applications. Well, that changed today as I decided to branch out and try a different deployment service. I love Heroku, and it is so easy to use, but I hate how my applications go to sleep after 30 minutes of inactivity unless you pay a monthly fee. The sleeping application then takes 30 seconds to “wake-up” which feels like forever from a client’s perspective. I decided to try Netlify after witnessing many other developers use this service to host their applications.

Netlify offers a free plan. So first, we will log in to Netlify using any one of the options(Github, Gitlab, Bitbucket, Email) given on the login page

First we need to register our account on netlify, It’s totally free account for hosting, deployments.

Netlify Account

Step 1: Create React App

We will start off by creating a new react app. I will name my app “automate_without_git_action”. Below are the commands to create the React app. This step should be familiar and simple.

For create folder for project and access on directory

1- mkdir automate_without_git_action
2- cd automate_without_git_action

For create react app

npx create-react-app ./

Create React App

For start app on browser

npm start

Start React App

On localhost

Step 2: Create Build Of React App

First We deploy the simple app, So we need to generate a build

npm run build

Run Build

Step 3: Simple Deployment

Then we’re going to move our netlify. Fresh account seems like this. First we need to drag and drop our build folder in that section

Main Page of Netlify

After Drag N Drop it takes a time host our app, and after that it generates a random domain URL to access our app

Step For Upload

Random domain For Our App

Step 4: Authorized Netlify Account On GitHub

N if change some text in our app , it doesn’t update this URL, So here we need to Automated deployment. So We create a github repository to link our account. If we commit the any changes of app It reflects on our app as well. We do not make a new build and deploy over n over.

So we need authorized our git account to netlify account

Authorized Our Account

Step 5: Select the Repository Of GitHub

And then we select the app repository

Select Our App

After select the repo

Then our app deploy Via Github, and it takes time too.

Steps of deploying

Step 5: Change the domain name

After completion of steps we need to change our domain name as per our wish. So select the “Domain Setting” and redirect to another page.

Page of Change domain

Select the options list , at that point it shows the edit option, select the edit option set our domain name and save the updated changes. So here i rename the domain name “tooba-automate-deployment”.

Access with desired domain and i push the changes on git that impact on my App