How to host a Babylonjs website coded in typescript

Questions
1

I am trying to host my website using git hub, but when I do: the page is blank. I have tried netily and several other, none have worked. I tried following the steps on the website.

"

  • Make sure all your non-code assets (images, 3D models, etc.) are in the public folder to ensure that they end up in the final bundle.
  • If it’s not already open as a tab, right-click on your project’s folder (not the main one) and choose Open in Integrated Terminal. Or just click on your second Terminal tab if you still have it.
  • Run this command: npm run build
  • Your exported code bundle is now in a folder called dist. Check if it works by running: npm run preview
  • IMPORTANT: Once you verify this test works, open dist/index.html and look for any file paths that point to root with /. Add a period in front of all of those root paths (meaning /assets would become ./assets) and save the file. For a more permanent solution, you can modify the package.json file in your project directory. Change the line: “build”: “tsc && vite build” to: “build”: “tsc && vite build --base=./”. This will ensure that the base path is correctly set during the build process, eliminating the need to manually edit file paths in dist/index.html after each build.

Final dist folderExpand

NOW you can upload the contents of your dist folder to a host like GitHub Pages or Vercel to share it with the world! It’ll run way faster than a project from the Playground since the code bundle only includes the parts of Babylon.js that you need, instead of the entire engine.

Note to advanced users: if you really want to push the limits of Vite and its bundling capabilities, you can look into using Dynamic import Statements. This feature allows you to put import statements inside functions instead of at the top of your code, which helps reduce the overall size of your exported bundle via code-splitting. I haven’t tried this feature myself, but this overview video from Beyond Fireship is a great place to start exploring this workflow if you’re interested.

Note to existing Vite users: you might’ve noticed that I instructed users to put all static assets in the public folder, instead of using URL-holding variables that come from having every asset as an import statement, as specified in the Vite documentation. This is because we don’t really have to do this when Babylon.js projects contain heavy assets like 3D models by default. The obscured filenames that result from using the Vite docs’ method don’t really prevent the end user from ripping assets from Babylon.js projects either. If you still want to use this “Importing Assets as URLs” workflow anyway, do note that you’ll have to create a .d.ts file in your src folder and figure out this code snippet to get it to work with TypeScript. As you can probably tell, I also haven’t tested this method."

This did not work, I tried using the “npm run preview” function.

Any help is appreciated.

2

It’s not clear to me exactly what did not work. You ran npm run preview and what happened? Did it give you an error? Did it tell you to visit a URL in your browser?

When I preview, it tells me to visit a URL in my browser. When I do that with a working setup, I can view my application.

I take it that you have not yet gotten to the step of copying the files from dist to your actual website, but perhaps I misunderstood.

3

Show us the folders on your web server please as well.
Copying the index.html and the assets folder to the root of your server should be enough.

How exactly?

4
5

When I tried it said ‘new users can’t upload attachments’

6

Neither happened, it just said that the script was missing, I don’t know how to install it.

7

Let’s start with the basics:

  1. Install Node.js — Run JavaScript Everywhere to install npm (on your local computer).
  2. Use npm create vite@latest your-app-name -- --template template-name to install Vite if you want to use Vite. Replace your-app-name and template-name (e.g. vanilla-ts) with the appropriate values.
  3. After that, you can start following the instructions in the first post to build and run the site locally on your computer.
  4. Once you have a local build, you can start following roland’s instructions to copy files to GitHub Pages.
1 Like
8

@L14M or just share your repo so we can identify what’s wrong… :wink: