Skip to main content

How to deploy react app to github pages?



Deploying a React app built with Vite to GitHub Pages involves several steps utilizing the gh-pages package: install gh-pages.

    npm install gh-pages
Configure package.json: Add the following scripts to your package.json file to automate the build and deployment process:

    "scripts": {
      "predeploy": "npm run build",
      "deploy": "gh-pages -d dist"
    }
The predeploy script ensures your app is built (npm run build) before deployment, and deploy uses gh-pages to publish the contents of the dist folder to the gh-pages branch.
Configure vite.config.js: Add a base option to your vite.config.js file, setting it to your GitHub repository's name (prefixed with a slash). This ensures correct asset paths on GitHub Pages.
JavaScript

    import { defineConfig } from 'vite';
    import react from '@vitejs/plugin-react';

    export default defineConfig({
      plugins: [react()],
      base: "/YOUR_REPOSITORY_NAME/", 
    });
Initialize Git and Push to GitHub: If you haven't already, initialize a Git repository, commit your changes, and push them to your GitHub repository.

    git init
    git add .
    git commit -m "Initial commit"
    git remote add origin YOUR_REPOSITORY_URL
    git push -u origin main
Deploy: Run the deploy script to build your app and push it to the gh-pages branch:

    npm run deploy
Configure GitHub Pages:
Navigate to your GitHub repository on the web.
Go to Settings > Pages.
Under "Build and deployment", select Branch as the source, and choose gh-pages as the branch.
Click Save.
Your Vite React app should now be accessible at https://YOUR_USERNAME.github.io/YOUR_REPOSITORY_NAME/.

Comments

Post a Comment

Popular posts from this blog

Poridhi: Stacks & Queues

  Stacks & Queues related problems: This collection of solutions tackles three classic problems often encountered in technical interviews and competitive programming. The Valid Parentheses problem checks whether a string has properly matched and ordered brackets using a stack. The Sliding Window Maximum efficiently finds the maximum value in every window of size k across an array using a deque, a popular sliding window pattern that ensures optimal performance. The Stock Span Problem simulates a real-world stock analysis scenario and calculates the number of consecutive days before today for which the stock price was less than or equal to today's, also utilizing a stack for efficient computation. These problems test understanding of stacks, queues, and sliding window techniques. ✅ Valid Parentheses def isValid ( s: str ) -> bool : stack = [] mapping = { ')' : '(' , '}' : '{' , ']' : '[' } for char in s: ...
Post a Comment
Read more

Data Recovery: DevOps pre-state learning

  Data Backup Data backup is the practice of copying data from a primary to a secondary location, to protect it in case of equipment failure, cyberattack, natural disaster or other data loss events. This can include documents, media files, configuration files, machine images, operating systems, and registry files. Essentially, any data that we want to preserve can be stored as backup data. Data Restore Data restore is the process of copying backup data from secondary storage and restoring it to its original location or a new location. A restore is performed to return data that has been lost, stolen or damaged to its original condition or to move data to a new location. Pilot Light A pilot light approach minimizes the ongoing cost of disaster recovery by minimizing the active resources, and simplifies recovery at the time of a disaster because the core infrastructure requirements are all in place. Warm Standby The warm standby approach involves ensuring that there is a scaled down, ...
Post a Comment
Read more

Poridhi: Basic Programming & Math

Basic Programming and math related problems: Extracting digits means breaking a number like 1234 into [1, 2, 3, 4], often using string conversion or modulo/division. Counting digits involves finding how many digits are in a number using length of a string or repeated division. Reversing an integer flips its digits (e.g., 123 becomes 321), with care for signs and 32-bit limits. A palindrome number reads the same forward and backward, often checked by comparing the original and reversed number. Armstrong numbers are those equal to the sum of their digits each raised to the number of digits, like 153 = 1³ + 5³ + 3³. To find the sum of all divisors of a number, loop through integers and check which divide the number without a remainder. Prime numbers are only divisible by 1 and themselves, and checking up to the square root is efficient. GCD, the greatest common divisor of two numbers, can be found using a simple loop or more efficiently with the Euclidean algorithm, which uses repeated mo...
Post a Comment
Read more