I'm encountering an issue while deploying a small Flask app that incorporates JavaScript and Three.js library files on a live server. I am facing a 404 resource not found error when attempting to import the necessary three.js files in my app.js file. The structure of my project directory on a DigitalOcean droplet is as follows:
app
├── __init__.py
├── static
│ ├── css
│ │ └── style.css
│ ├── js
│ │ └── app.js
| | └── three (folder containing all Three.js library files)
│ └── models
│ └── poly_ann.glb
├── templates
│ └── index.html
└── views.py
The app.js file is specified as type "module" in index.html. Here is a snippet of the beginning of app.js:
import * as THREE from '/js/three/build/three.module.js';
import { GLTFLoader } from '/js/three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from '/js/three/examples/jsm/loaders/DRACOLoader.js';
import { GUI } from '/js/three/examples/jsm/libs/dat.gui.module.js';
.
.
.
When running this as an HTML/JavaScript application locally, these paths function correctly. The app.js file resides within the static folder, as recommended by various tutorials. However, the issue lies with locating the three.js libraries. Even though the three folder is located within the js folder, it seems unable to locate them for some reason.
Any assistance provided would be greatly appreciated.