# How to host a Babylonjs website coded in typescript **URL:** \ **Category:** Questions\ **Created:** [September 30, 2024, 12:26am UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838 "2024-09-30T00:26:05Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![L14M](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/l14m/32/43769_2.png) [@L14M](https://forum.babylonjs.com/u/L14M)\ **Post date:** [September 30, 2024, 12:26am UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/1 "2024-09-30T00:26:05Z")
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 folder](https://doc.babylonjs.com/img/how_to/using-vite/11.png)Expand 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](https://www.youtube.com/watch?v=kwUfeWe7DCw) 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](https://vitejs.dev/guide/assets.html#importing-asset-as-url). 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](https://stackoverflow.com/questions/51100401/typescript-image-import#answer-51163365) 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. ---
**Author:** ![ecartz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecartz/32/42571_2.png) [@ecartz](https://forum.babylonjs.com/u/ecartz)\ **Post date:** [September 30, 2024, 12:32pm UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/2 "2024-09-30T12:32:24Z")
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. ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [September 30, 2024, 12:55pm UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/3 "2024-09-30T12:55:34Z")
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. > [@L14M](#): > > I am trying to host my website using git hub How exactly? ---
**Author:** ![L14M](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/l14m/32/43769_2.png) [@L14M](https://forum.babylonjs.com/u/L14M)\ **Post date:** [October 4, 2024, 2:11am UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/4 "2024-10-04T02:11:05Z")
[![](https://img.youtube.com/vi/e5AwNU3Y2es/maxresdefault.jpg "How to Host a Website on GitHub Pages Free (Custom Domain Setup Included)") ](https://www.youtube.com/watch?v=e5AwNU3Y2es) ---
**Author:** ![L14M](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/l14m/32/43769_2.png) [@L14M](https://forum.babylonjs.com/u/L14M)\ **Post date:** [October 6, 2024, 12:39am UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/5 "2024-10-06T00:39:46Z")
When I tried it said ‘new users can’t upload attachments’ ---
**Author:** ![L14M](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/l14m/32/43769_2.png) [@L14M](https://forum.babylonjs.com/u/L14M)\ **Post date:** [October 6, 2024, 12:40am UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/6 "2024-10-06T00:40:34Z")
Neither happened, it just said that the script was missing, I don’t know how to install it. ---
**Author:** ![ecartz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ecartz/32/42571_2.png) [@ecartz](https://forum.babylonjs.com/u/ecartz)\ **Post date:** [October 6, 2024, 3:13am UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/7 "2024-10-06T03:13:28Z")
Let’s start with the basics: 1. Install [Node.js — Run JavaScript Everywhere](https://nodejs.org/en/) 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](https://github.com/vitejs/vite/tree/main/packages/create-vite) (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. ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [October 6, 2024, 6:29am UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/8 "2024-10-06T06:29:26Z")
@L14M or just share your repo so we can identify what’s wrong… 😉 ---
**Author:** ![L14M](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/l14m/32/43769_2.png) [@L14M](https://forum.babylonjs.com/u/L14M)\ **Post date:** [October 20, 2024, 6:05am UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/9 "2024-10-20T06:05:47Z")
What are your usernames on github? ---
**Author:** ![L14M](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/l14m/32/43769_2.png) [@L14M](https://forum.babylonjs.com/u/L14M)\ **Post date:** [October 20, 2024, 6:09am UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/10 "2024-10-20T06:09:01Z")
Here’s the link: [General](https://github.com/L14MtheC0der/Prototype/settings) ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [October 20, 2024, 11:00pm UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/11 "2024-10-20T23:00:26Z")
Your link doesn’t work: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/0/20cfe2feae9fb7fd66a2433fdee81905f886f8a9.jpeg) This is the right link: > **[GitHub - L14MtheC0der/Prototype](https://github.com/L14MtheC0der/Prototype)** > > Contribute to L14MtheC0der/Prototype development by creating an account on GitHub. ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [October 20, 2024, 11:30pm UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/12 "2024-10-20T23:30:28Z")
Ok, so here it is hosted online: [https://playgrounds.babylonjs.xyz/proto/](https://playgrounds.babylonjs.xyz/proto/) I have two questions: Do you need Vue? Do you need Webpack or can we switch to Vite - I’ll create you a Vite based project. ---
**Author:** ![L14M](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/l14m/32/43769_2.png) [@L14M](https://forum.babylonjs.com/u/L14M)\ **Post date:** [October 20, 2024, 11:48pm UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/13 "2024-10-20T23:48:06Z")
What do you mean by: “Do I need vue”? I have it installed if that’s what you mean. Also, the tutorial for learning BabylonJs I found set it up like the way it is. Here’s the link: https://www.youtube.com/embed/videoseries?list=PLym1B0rdkvqhuCNSXzxw6ofEkrpYI70P4&wmode=transparent&rel=0&autohide=1&showinfo=1&enablejsapi=1 ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [October 20, 2024, 11:52pm UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/14 "2024-10-20T23:52:06Z")
> [@L14M](#): > > What do you mean by: “Do I need vue”? I have it installed if that’s what you mean Do you need it in your project? Will you use it for any other reason than the component system? ---
**Author:** ![L14M](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/l14m/32/43769_2.png) [@L14M](https://forum.babylonjs.com/u/L14M)\ **Post date:** [October 21, 2024, 12:03am UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/15 "2024-10-21T00:03:17Z")
Oh, ok, I’m using a vue file for the html as well. ---
**Author:** ![L14M](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/l14m/32/43769_2.png) [@L14M](https://forum.babylonjs.com/u/L14M)\ **Post date:** [October 27, 2024, 6:01pm UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/16 "2024-10-27T18:01:31Z")
Continuing the discussion from [How to host a Babylonjs website coded in typescript](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/12): I’m still somewhat confused as to how you got it to work. ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [October 27, 2024, 9:11pm UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/17 "2024-10-27T21:11:44Z")
I’ve created a fresh repo with your code and with latest vue + vite for you: > **[GitHub - RolandCsibrei/L14-Prototype-new](https://github.com/RolandCsibrei/L14-Prototype-new)** > > Contribute to RolandCsibrei/L14-Prototype-new development by creating an account on GitHub. Fork, clone ```auto npm i npm run build git subtree push --prefix dist origin gh-pages ``` ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/b/cbbc2934c5dbd8a8adbb46a9d28f9b11a93182a9.jpeg) Your glb files are very big so you’ll need large file support on github or you have to compress them. @labris has a very cool tool for this! Could you please help @L14M on packing his glbs? Thanks! As a second option you can copy the content of the `dist` folder to a http server and access your web from there: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/c/acb7b84cb467431f7697d54f4506e3bd1b425fff.png) ---
**Author:** ![L14M](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/l14m/32/43769_2.png) [@L14M](https://forum.babylonjs.com/u/L14M)\ **Post date:** [October 27, 2024, 11:01pm UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/18 "2024-10-27T23:01:51Z")
Ok, thank you. ---
**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\ **Post date:** [October 27, 2024, 11:34pm UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/19 "2024-10-27T23:34:47Z")
> [@roland](#): > > a very cool tool Just drop your files, one by one, into [https://glb.babylonpress.org/](https://glb.babylonpress.org/) and download optimized ones. ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [October 28, 2024, 12:22am UTC](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838/20 "2024-10-28T00:22:03Z")
A working version of your app on Github pages: [https://rolandcsibrei.github.io/L14-Prototype-new/](https://rolandcsibrei.github.io/L14-Prototype-new/) > remote: warning: File Models/LightingScene.glb is 99.49 MB; this is larger than GitHub’s recommended maximum file size of 50.00 MB It’s enough to convert this one large file. If it will not work out of the box, add this to vite.config: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/c/2c66c6233af05753cd5adc188e739e24120ba3d9.png) [Next page](https://forum.babylonjs.com/t/how-to-host-a-babylonjs-website-coded-in-typescript/53838.md?page=2)