Question 161002 in Html Question posted in
Some basic documentation can be found here.

Why does my ThreeJS project fail to load on GitHub Pages?

I’m having problems deploying my ThreeJS project on GitHub page.
When i run the code locally with npm run dev it work fine, but deploying it on GitHub Pages gives me an error of Failed to load resource: the server responded with a status of 404 ()

The project:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tazzina di Caffe</title>
  </head>
  <body bgcolor="#d6d1d1">
    <canvas id="bg"> </canvas>
    <div id="app">
    </div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

CSS:

canvas {
  position: fixed;
  top: 0;
  left: 0;
}

JS Imports:

import './style.css';
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
import {GUI} from 'dat.gui';

Directory Files

I’m but a beginner, any tutorial just has people simply deploying their project with no issue whatsoever.

Tags:

2

Answers


  1. 0

    Your local directories are way different from your production deploy directories.

    First, I would recommend to generate a production build in your PC, try them locally, and then upload those production build files/directories to github pages.

    Good luck!

    Login or Signup to reply.
  2. 0

    Your HTML in the github repo is serving your main.js files with an absolute url.

    <script type="module" src="/main.js"></script>

    This is a problem because your github pages url is:

    https://giorgiolotti.github.io/TazzinaDiCaffe/index.html

    and when the HTML file tried to download the main.js file it goes to the url:

    https://giorgiolotti.github.io/main.js

    but the file is located at:

    https://giorgiolotti.github.io/TazzinaDiCaffe/main.js

    Try changing you script src to a relative url

    <script type="module" src="./main.js"></script>

    and see if it fixes the issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search