Skip to content

bug: Starter template asset paths break when deployed under a subdirectory (GitHub Pages / non-root base) #44

Description

@AkshatRaj00

🐛 Bug Report

SDK version: @iwsdk/core latest (scaffolded via npm create @iwsdk@latest)
Affected packages: @iwsdk/create (starter template), @iwsdk/vite-plugin-dev


Summary

When a project scaffolded with npm create @iwsdk@latest is deployed to any non-root base URL (GitHub Pages subdirectory, Netlify subpath, custom base via Vite base option), all static asset loads fail with 404.

The root cause is that hardcoded bare paths like "textures/webxr.png" and "audio/chime.mp3" in the starter template do not respect the configured Vite base, causing assets to be requested from /asset instead of /my-project/asset.


Steps to Reproduce

npm create @iwsdk@latest
cd iwsdk-app

Add to vite.config.ts:

export default defineConfig({
  base: '/my-repo-name/',
  // ...
})

Then:

npm run build
# deploy dist/ to GitHub Pages

Result: Console floods with 404s:

Failed to load resource: /textures/webxr.png (404)
Failed to load resource: /gltf/environmentDesk/environmentDesk.gltf (404)
Failed to load resource: /audio/chime.mp3 (404)

Expected: Assets resolve relative to the configured base:

/my-repo-name/textures/webxr.png ✔️
/my-repo-name/gltf/environmentDesk/environmentDesk.gltf ✔️

Root Cause

The starter template uses bare string paths directly in asset load calls:

// ❌ Breaks under non-root base
loader.load('gltf/environmentDesk/environmentDesk.gltf', ...)
loader.load('textures/webxr.png', ...)

Vite's asset handling only rewrites paths that pass through its import pipeline (import url from './asset.png') or use new URL('./asset', import.meta.url). Runtime string paths are passed through as-is and do not get the base prefix injected.


Proposed Fix

Replace bare string paths in the starter template with Vite-aware imports:

// ✅ Vite rewrites this correctly for any base config
import webxrPng from './textures/webxr.png'
import chimeAudio from './audio/chime.mp3'

// OR use import.meta.env.BASE_URL
const assetBase = import.meta.env.BASE_URL
loader.load(`${assetBase}gltf/environmentDesk/environmentDesk.gltf`, ...)

Using import.meta.env.BASE_URL is the most straightforward fix and requires minimal template restructuring.


Impact

This affects every new user who:

  • Deploys their first IWSDK project to GitHub Pages (extremely common for demos)
  • Uses Netlify/Vercel with a non-root base
  • Follows the official "Testing Your Experience" guide and tries to share it

Given that this is a starter template issue, it creates a terrible first impression for developers evaluating the SDK. The project builds successfully but silently fails at runtime with no clear error pointing to the cause.


Environment

  • Node: 20+
  • Vite: 5.x
  • @iwsdk/create: latest
  • OS: Any

Related to #40. Happy to submit a PR for this fix.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions