Create ,Deploy & Test Website

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

npx create-react-app my-app

npm

npm init react-app my-app

Yarn

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:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

Once the installation is done, you can open your project folder:

cd my-app

Inside the newly created project, you can run some built-in commands:

Step3: Start/Run your React Project

npm start or yarn start

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 yarn test

Runs the test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit.

npm run build or yarn build

Builds the app for production to the build folder.
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

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

Thanks.