We Keep Coding

Problem with loading .gltf files in Github pages of my React Three.js app with Vite

I deployed my React Three.js with Vite app in Github pages, and I can't get it running on a live server - https://thehero9.github.io/ThreeJsReactFiber/
This here is the code in my repo - https://github.com/TheHero9/ThreeJsReactFiber
I have no trouble with the app locally, you can try cloning it with git, then run:
npm install
npm run dev
In order to check how it works locally.
I think the .gltf files are not being loaded correctly due to a problem with the file paths or the loading code. Please, can you help us and check whether you can find why the .gltf files are not loading?
Errors:
Everything is loaded properly on a local server:
[3]: https://i.stack.imgur.com/xV31l.jpg

How to Build Vue 3 Vite App for production

I created a fresh vue project with the new version which includes vite init.
When I run npm run build a dist/ is created. But when I open dist/index.html inside the dist folder it doesn't show anything. My question is how can I build the app and run it without any command (Building for production). Thanks

You need a server, otherwise assets will fail to be found and you'll get errors and a blank page. Use npm run preview.

npm run build cannot access in localhost

I want to test my react/ node.js web app with a production build. I already run npm run build at the app directory and created build folder.
I was unable to run the application using localhost:8080 (server port).
Are there any ways to double check if the application is actually running in that port or access production-ready application?
PS. I used serve to host the application but it posts error 404: The requested path could not be found
Thank you for your help.

Every SPA application has its own package.json file. Inside you have to see the script section:
Normally after you run nm run build you have a compiled version of your code.
At this point, you have a see the dist folder.
After this, you can either run npm run start and you have to see
(this option is not suitable for SSR frameworks like NUXT or NEXT)
or if you don't have that option install an npm package that renders your compiled code by doing the following:
npm install -g serve
serve -s build
and you have to see

Vue.js PWA Plugin not loading service-worker.js when deployed to subfolder (Github Pages)

I used the Vue CLI to create a new Vue project, and selected PWA support when using 'vue create'.
I also used the vue-gh-pages plugin to deploy the app to a github pages URL.
The problem is that it's attempting to load
http://myusername.github.io/service-worker.js
..instead of:
http://myusername.github.io/app-name/service-worker.js
Inside of /src/registerServiceWorker.js I can noticed:
register(`${process.env.BASE_URL}service-worker.js`, {
But when I attempt to set the BASE_URL in vue.config.js with:
module.exports = {
baseUrl: '/app-name/'
}
..it breaks the links from all of the other scripts.
The app works when I run it locally, along with the PWA support. Anyone know how to get this to work with sub folders / github pages?
Thanks

I think you are forgetting to build your project before you deploy it. If you are running a Vue CLI that uses a build process, you should be running npm run build which will generate a dist folder that has all your resources as a static bundle.
You should commit that to your gh-pages branch and serve that instead.
I'm saying this because process.env.BASE_URL is something that the node.js side of things understands. GitHub pages won't be populating that for you at runtime since it only serves content statically.

Guidance on how to setup the basic “Components” example from the official EmberJS homepage

My background is in old-school web development and LAMP stack development mixed with Linux server administration. Meaning I can code HTML, PHP, CSS and JavsScript—as well as manage a Linux server—with ease. But have decided I need to be a bit “modern” as far as web client side technology goes and am teaching myself EmberJS on my Mac OS X 10.9.5 machine. Core versions are as follows:
Ember CLI version: 1.13.12
Node JS version: 4.2.2
NPM (Node Package Manager) version: 2.14.10
Watchman: 4.1.0
The basic “Auto-Updating Handlebars Templates” example on the official EmberJS site works, but I am lost on the “Components” example on the EmberJS homepage.
My process so far as been to init a new app like this:
ember new new-app
Then once that is done and the folder structure is built, I am simply creating new documents based on that “Components” example as follows; see screenshot for an example:
app/templates/components/gravatar-image.js
app/templates/application.hbs
app/templates/components/gravatar-image.hbs
Since I am new to EmberJS I am assuming this is the proper folder structure for this simple app example since templates/application.hbs is the only place I am seeing application.hbs installed and all of the paths on that simple homepage example are relative to some root, correct? But when I attempt to run it like this:
ember serve
It consistently fails with the following error:
version: 1.13.12
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
EEXIST: file already exists, symlink '/path/to/new-app/tmp/template_compiler-input_base_path-97V11oKY.tmp/0/ember-sandbox/templates/components/gravatar-image.js' -> '/Applications/MAMP/htdocs/Ember-Sandbox/tmp/template_compiler-output_path-Tn5z8iTb.tmp/ember-sandbox/templates/components/gravatar-image.js'
Doing some basic online searches led me to believe it might require me to delete cached files and dependencies like this:
rm -rf node_modules tmp dist bower_components
And then reinstall them like this:
npm install && bower install
But even after that’s done, the same EEXIST: file already exists, symlink… pops up again.
What am I doing wrong? And what can I do to get this very basic example up and running?

The problem you have here is that you have placed the gravatar-image.js file in the templates/components folder and it should be in the components folder. Inside templates folder goes only *.hbs (templates is used for route templates and templates/components is used for component templates).
There is another way of structuring the folders called POD in which you have a folder with the name of the component and its files inside. With your component would be like this:
gravatar-image/component.js
gravatar-image/template.hbs
Check this tutorial if you are interested in using this POD structure.