Create and Deploy simple React website in 5 mins
Step1: Setup and Installation:
Go to website : https://nodejs.org/en and install npx from here in your MAC Book
Step2: Creating Simple App
To create a new app, you may choose one of the following methods:
npx create-react-app my-app
npm init react-app my-app
yarn create react-app my-app
It will create a directory called
my-app inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
Once the installation is done, you can open your project folder:
Inside the newly created project, you can run some built-in commands:
Step3: Start/Run your React Project
npm start or
Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.
The page will automatically reload if you make changes to the code.
npm test or
Runs the test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit.
npm run build or
Builds the app for production to the
It correctly bundles React in production mode and optimizes the build for the best performance.
Your app is ready to be deployed.
Step4: Deploy Your React App
There are different ways for React Deployment at the below link:https://create-react-app.dev/docs/deployment
I used quick Deployment using Vercel with my personal GitHub account, Since I want to deploy new changes as soon as I push my changes to Github Repo. To use it follow the steps in link:https://vercel.com/docs/concepts/deployments/git
Deploying Git Repositories with Vercel
Vercel allows for automatic deployments on every branch push and merges onto the Production Branch of your GitHub…
Step a.) : Click on New Button from the above link which will open https://vercel.com/new
Step b.) : Search your repo from Github for which you want to deploy your React Project then a new page will open which will ask project config that is simple and straight forward and deployment will be completed easily.
Benefit of this Github integration with Vercel is that whenever you will push any changes in your repo , it will automatically build the web changes and you just need to reload the deployed link on your browser to see new changes.
This article is written for the people who want to do some experiements with testing demo web app whether they have background of working on Website or not.
Step5: Debug React App
a.) At first Install Extension from Chrome Browser or We can use Microsoft Edge browser that is available automatically with VS Code.
b.) Click on Run and Debug Button in VS code left panel and then click on create a launch.json file, use Edge extension from drop down option.
c.) launch.json file will be created and use localhost:3000 url for debugging the web page.
d.) Now put the Breakpoint in your code and run your project from left panel button . That’s it.
Reference Video: https://www.youtube.com/watch?v=15GySiVfMB8