Git Product home page Git Product logo

deployvite's Introduction

deployvite

How to deploy a Vite Project using github pages.

Follow the steps below on how to deploy a vite react app:

  1. Create a vite react app:
    npm create vite@latest
  1. Create a new repository on GitHub and initialize GIT:
    git init 
    git add . 
    git commit -m "add: initial files" 
    git branch -M main 
    git remote add origin https://github.com/[USER]/[REPO_NAME] 
    git push -u origin main
  1. Setup base on vite.config:
    base: "/[REPO_NAME]/"
  1. Create ./github/workflows/deploy.yml and add the code bellow:
name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 16

      - name: Install dependencies
        uses: bahmutov/npm-install@v1

      - name: Build project
        run: npm run build

      - name: Upload production-ready build files
        uses: actions/upload-artifact@v2
        with:
          name: production-files
          path: ./dist

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      - name: Download artifact
        uses: actions/download-artifact@v2
        with:
          name: production-files
          path: ./dist

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
  1. Push:
  git add . 
  git commit -m "add: deploy workflow" 
  git push
  1. Active workflow:
  Config -> Actions -> General -> Workflow permissions -> Read and Write permissions 
  Actions -> failed deploy -> re-run-job failed jobs 
  Pages -> gh-pages -> save
  1. For code changes:
  git add . 
  git commit -m "fix: some bug" 
  git push

Whenever you push to GitHub, it will deploy automatically.

deployvite's People

Contributors

letsdothis94 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.