Deploying REACT+VITE website in Github Pages

Create Vite+react Website

Introduction

Recently I learned how to deploy React+Vite website to Github pages.So These are the steps I followed to deploy my application to Github pages.

Setting up the application

Let us create the basic website of react in vite project

• yarn create vite
• Enter the name of your project
• Select React framework
• Choose the language variant., here I chose Typescript
• After setting up the framework, you will see an output that the project has been scaffolded.

Create Github Repository

• Create a Github repository.As shown in the below picture.

• Build the application using.
  • yarn build 
•  You'll need to build the application. After which you should be able to see a “dist” folder in your root directory.

• Since “dist” folder is ignored with the current .gitignore file, remove the dist from gitignore file.

• Push the code into the Github repository.

Viteconfig.js

• Set the  base in  vite.config.js.

• export default defineConfig({
    base: "/<YOUR_REPO_NAME>/", // add the base as repo name as "/yourRepoName/"
    plugins: [react()],
  });

Install and setup gh pages

Now, install the  gh-pages package

• yarn add -D gh-pages or npm install gh-pages --save-dev

package.json

• Add the below code to package.json:

  •  "homepage": "https://<USERNAME>.github.io/<YOUR_REPO_NAME>/",

• Add the below code to scripts in the package.json

  • "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"

run & deploy

• We are done with the configuration, let's run the command to deploy.
• yarn run deployOrnpm run deploy

Conclusion

The website has been deployed yayy!