Vite with Github Pages

Using Vite to run your Javascript or react locally, or like whatever it supports these days is not a bad idea. The same thing can be said for Github pages, it is an easy way to host your Static website yadda yadda. So it doesn’t take a genius to go try to use both on the same project. But this can cause some problems.

Problems

Getting started

You first need to get it working, this is a small challenge if you don’t know how it works, so here is an explanation that someone else had for this. The reason I don’t list these things myself is that it has been a while since the last time I have needed to do this, so I don’t fully remember + I just follow this guide myself as well. There was 1 more thing that I figured out myself on how to fix it, that was not mentioned in here, but like I said: I don’t remember.

Public FIles

Vite has an easy way to like, access assets. GH pages won’t be able to understand this properly. I don’t exactly remember what Vite has, like how the public folder works etc, I just know that it doesn’t work with github pages.

Relative Asset paths

I personally use an assets/ folder in the root, this will work fine, it will be uploaded as a file, and you’ll be able to fetch it etc etc. But if you use a gh pages default URL oldmartijntje.github.io/blanked_out/, your asset location will be different local vs hosted, and this sucks. If you were to use your own domain like oldmartijntje.nl and reroute Github pages to it, you will be fine.

But the thing that I am talking about is that when I will try to load my sprite-font-white.png, locally it is located at http://localhost:5173/blanked_out/assets/sprites/sprite-font-white.png, and on github pages it is located at https://oldmartijntje.github.io/blanked_out/assets/sprites/sprite-font-white.png. And this is indeed the same, but when it is hosted locally it sees my base path as http://localhost:5173/blanked_out/, and when it is hosted on gh pages, the base path is: https://oldmartijntje.github.io/. This means that you will need to either account for this, or you only use assets hosted somewhere else.

I tackled this on my 2 projects by doing the following:

var baseUrl = '';
        try {
            baseUrl = process.env.NODE_ENV === 'production' ? "/" + config['baseUrl'] + "/" + config['assetsPath'] + "/" : './' + config['assetsPath'] + '/';
        } catch (e) {
            console.log(e);
            baseUrl = "/" + config['baseUrl'] + "/" + config['assetsPath'] + "/";
        }

For the rest of the code that renders my assets at the start of the launch, go to either of y 2 repos:

• Project_Kazamata
• Blanked_Out

I put both here since 1 of them is likely to get a rename, so now I will be sure that at least 1 URL will stay active.

Imports

This issue is easy to handle, it is just annoying.

You know how you might want to import files in your code:

import { events, EventTypes } from "./Events.js";
import { GameObject } from "./GameObject.js";
import { Vector2 } from "./Vector2.js";

Well Vite allows the following as well:

import { events, EventTypes } from "./Events";
import { GameObject } from "./GameObject";
import { Vector2 } from "./Vector2";

But Github pages will not allow this. And you will only notice this once you have pushed it, and trying to figure out what is broken is annoying. and it happened to me like, 7 times. That’s why I wrote a python script to notify me of these mistakes.

import datetime
import os
import json
ingore_files = ["node_modules", ".git"]
hasToInclude = [".js"]
def map_folder_to_json(folder_path):
    data = {}
    for root, dirs, files in os.walk(folder_path):
        for file in files:
            add = True
            file_path = os.path.join(root, file)
            # Use relative paths for JSON structure
            relative_path = os.path.relpath(file_path, folder_path)
            for ingoreTest in ingore_files:
                if ingoreTest in relative_path:
                    add = False
            for includeTest in hasToInclude:
                if includeTest not in relative_path:
                    add = False
            if add == True:
                data[relative_path] = {
                    "checked": False,
                    "result": None,
                }
    return data
def scanFile(file_path, jsonItem):
    global linesChecked
    with open(file_path, 'r') as f:
        errors = []
        lines = f.readlines()
        doneWithImports = False
        lineNumber = 0
        activeComment = False
        for line in lines:
            lineNumber+= 1
            linesChecked += 1
            if line.strip().startswith("```"):
                activeComment = not activeComment
                continue
            if activeComment == True:
                continue
            if doneWithImports == True:
                if line.strip().startswith("import"):
                    errors.append(f"Error in {file_path} at line {lineNumber}: imports should be at the top")
                else:
                    continue
            if line.strip().startswith("import") or line.strip() == "" or line.strip().startswith("//"):
                if line.startswith("import"):
                    if ("./" in line or ".\\" in line) and not (".js" in line or ".jsx" in line or ".ts" in line or ".tsx" in line):
                        errors.append(f"Error in {file_path} at line {lineNumber}: No .js found in import")
            else:
                doneWithImports = True
        if len(errors) > 0:
            jsonItem["result"] = {
                "failed": True,
                "errors": errors
            }
            jsonItem["checked"] = True
        else:
            jsonItem["result"] = {
                "failed": False
            }
            jsonItem["checked"] = True
def save_to_json(data, output_file):
    with open(output_file, 'w') as f:
        json.dump(data, f, indent=4)
if __name__ == "__main__":
    folder_path = "./"
    output_file = "Scripts/Results.json"
    folder_data = map_folder_to_json(folder_path)
    filesScanned = 0
    filesScannedFails = 0
    filesScannedWins = 0
    willRemove = []
    linesChecked = 0
    for file_path in folder_data.keys():
        filesScanned += 1
        scanFile(file_path, folder_data[file_path])
        if folder_data[file_path]["checked"] == True and folder_data[file_path]["result"]["failed"] == False:
            willRemove.append(file_path)
            filesScannedWins += 1
        else:
            filesScannedFails += 1
    for file_path in willRemove:
        del folder_data[file_path]
    finalJson = {
        "CheckDate": datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
        "Errors": folder_data,
        "ScanLog": {
            "totalFiles": filesScanned,
            "passedFiles": filesScannedWins,
            "failedFiles": filesScannedFails,
            "linesChecked": linesChecked
        }
    }
    save_to_json(finalJson, output_file)
    print(f"Folder mapped successfully to {output_file}")

It will output a json file that will look something along the lines of the following codeblock:

{
    "CheckDate": "2025-04-07 16:50:27",
    "Errors": {
        "src\\system\\Resource.js": {
            "checked": true,
            "result": {
                "failed": true,
                "errors": [
                    "Error in src\\system\\Resource.js at line 1: No .js found in import"
                ]
            }
        }
    },
    "ScanLog": {
        "totalFiles": 33,
        "passedFiles": 32,
        "failedFiles": 1,
        "linesChecked": 3562
    }
}