problems deploying to Github Pages

[tangway]

decided to follow the guide from https://github.com/sitek94/vite-deploy-demo since it has 253 stars and the youtube video for it has many comments saying it works as explained.

ran into error at the Build step of the job in Github Actions. it couldnt find package.json as im using pnpm and the folder where it was trying to find it is doubled like /flag-guessing-game-frontend/flag-guessing-game-frontend/package.json so that would be 2 problems i would have to fix

seeing the above build steps in Github Actions helped to reduce the mystery of what deploy.yml does as i had copied it wholesale from the guide hoping that it would just magically work. the steps above corresponds with these steps in the file:

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

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

      - name: Setup Node
        uses: actions/setup-node@v4

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

      - name: Build project
        run: pnpm run build

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

[tangway]

i changed the Build project step to use pnpm but that didn't change the outcome and returned the same error. i can now see that it's because the step that produced the error is the Install dependencies step which is before Build project.

i decided to not use Github Actions since the script is giving me an error which i couldnt fix after several tries, and i have sucessfully deployed a React Vite app before to Github Pages without using Actions. when i ran pnpm run build i noticed the dist folder wasn't in my repo. i checked the .gitignore file and commented out the line for the dist folder. this allowed the dist folder to be included in the build output and i committed and pushed the changes to the remote repo.

[tangway]

when i ran the command to deploy to Github Pages gh-pages -d build it tells me there is no file or folder called build. the build folder for Vite projects is dist so i changed it to gh-pages -d dist.

noticed that git push did not trigger a build of the page so on Github Pages settings, i changed the branch where it should build from to gh-pages and ran gh-pages -d dist again.

[tangway]

so after im sure that running gh-pages -d dist triggers the Pages build process, i check the live site and it's blank. the console log's “https://tangway.github.io/assets/index-kUIlE5N5.js” was blocked because of a disallowed MIME type (“text/html”). the url should start with https://tangway.github.io/flag-guessing-game-frontend/ , so it must be something to do with a reference to the repo being wrong.

besides package.json, vite.config.js is the only other file which has to reference the repo so i changed the base value from / to /flag-guessing-game-frontend/

export default {
 base: '/flag-guessing-game-frontend/', 
}

after this change i ran pnpm build and gh-pages -d dist again, checked the live site and it worked!!

Github Actions deployment does not work and i will look at it in the future

[tangway]

changing deploy.yml to these settings worked! the main thing was finding the right code to setup pnpm. it was found at the readme section for https://github.com/pnpm/action-setup

name: Deploy

on:
  push:
    branches:
      - main

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

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

      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 8

      - name: Install dependencies
        run: pnpm install

      - name: Build project
        run: pnpm run build