Deploying React Vite App For Free On Netlify

React is an open-source front-end Javascript library used for building user interfaces, especially Single Page Applications(SPAs). React popularly holds the View layer of the MVC(Model-View-Controller) architecture. Provided is the tutorial for deploying an application using popular Vite Build and Development tool : 

1.1 First it requires creating an application using Vite, this is the link of tutorial for creating a modern React app using popular Vite Build & Development tool. In short the command for creating the app is npm create vite@latest with following steps as provided below:

1.2 Once the process is complete, the application's Local URL can be seen

1.3 The application's success output can be seen which is to be deployed

2.1 Next it requires checking the build command which is "build" in package.json file

2.2 It can be noticed that there is no "dist" folder in the application directory

2.3 "npm run build" command is used to build the application for production

2.4 The "dist" folder can be noticed once the build succeeds

3.1 Netlify requires to be logged in or signed up if there is no account created yet and the landing page can be seen as below on login success

3.2 Next it requires clicking the "Add new project" button and then dragging and dropping the "dist" folder

3.3 The deploy success landing page can be seen as below with the deployed URL

3.4 The Netlify deployment success output can be seen as below

Deploying Webpage for Free on Github Pages Beginner Friendly Tutorial

 Github Pages is a cloud application platform designed to help developers and teams deploy, manage, and scale applications and web services with high speed. It is a platform for building, deploying and scaling modern web applications. It simplifies the process of making websites and apps live online.

Below is a simple tutorial with simple steps for getting your static site live on the Internet using Github Pages:

1. First step requires signing in to the Github Platform

2.1 Next it requires creating a new repository with repository name of choice

2.2 Github new repository creation success can be seen and new file creation is required as pointed in below image

3.1  Next it requires naming the HTML file(index.html) and adding the HTML content, below HTML code can be referred for reference, and then commit changes button is to be pressed

3.2 For committing the changes a proper commit message is to be provided

3.3 Once changes are committed the following page can be seen as redirected

4.1  Next it requires heading towards the repository settings section

4.2 Next it requires heading to the Pages side menu bar of Setting section

4.3 Next it requires selecting a repository branch for deployment

4.4 Next changes are to be saved by pressing Save button

4.5  Next it requires heading towards the repository landing page

4.6  Next it requires heading towards the deployments section in right side bar

4.7 Next the Github Pages deployment link can be seen and it needs to be pressed

4.8  Finally the deployed site success output can be seen

Deploying Webpage for Free on Vercel Beginner Friendly Tutorial

Vercel is a cloud application platform designed to help developers and teams deploy, manage, and scale applications, web services, and databases with high speed. It is a platform for building, deploying and scaling modern web applications. It simplifies the process of making websites and apps live online, without requiring complex server management or DevOps in general.

Below is a simple tutorial with simple steps for getting your static site live on the Internet.

1.1 Navigating the vercel landing page

1.2 Vercel requires some info to be required before creating a account

1.3 Account creation using preferred provider

2. Logging into Github platform and creating a new repository

3.1 Providing repository name and required configuration

3.2 Once the new repository is created, next it requires creating a new file using the Github platform as the cursor points in below image

4.1 Next it requires naming the file and adding the webpage content as in below image

4.2 Commit message and optional description is to be provided and changes need to be committed

4.3 Once the commit success is performed, it requires copying the repository URL

5.1 Next it requires providing the copied git repository URL for deployment

5.2 Next it requires providing the git provider

5.3 Next it requires authorizing the Vercel

5.4 Specific repository is to be selected and vercel is then to be installed

5.5 Next project is to be created

5.6 Deployment is progress output can be seen

5.7 Continuing to Dashboard once the deployment process is completed

5.8 Hitting the deployed domain

6. The Static Site can be seen live using Vercel