Project setup using Vite with CI/CD on GitHub Actions

Hello everyone.

I have started playing with Babylon.js, and I find it an enjoyable framework to work with. I was not able to find a basic tutorial on setting up a local project without webpack. The first tutorial I’ve written in my life :slight_smile: So, please, don’t judge.

5 Likes

Great article - I saw the legacy import, but saw you showed how to fix it, which was cool :smiley:

I didn’t write a tutorial, but also was looking at ways not using webpack as well and made a community template for snowpack for babylonjs. Most of my projects use rollup and github actions lately.

Deploy to GH pages also very useful. One thing that I didn’t see was typically you need a secret to deploy with a token, but I didn’t see how you connected those. Maybe your deploy action gets it from context somehow? I’ll check that repo out.

Also, I looked for the static deploy docs and see that base is often configured instead of passed in. I like how CRA can set it from package.json, but vite seems less opinionated that way.

Glad you liked it. English is not my primary language, so I was (and still is :slight_smile:) afraid that my writing is terrible.

Snowpack is very like Vite. They have a comparison on their website - Comparisons with Other No-Bundler Solutions.

Regarding access token, this what the readme for action says:

By default, the action does not need any token configuration and uses the provided repository scoped GitHub token to make the deployment.

There should be a way to correct the base path automatically; I haven’t figured it out yet. :slight_smile:

1 Like

Great article, very simple and logical!
I tested the code from GitHub - sotovviktor/babylonjs-project
npm run dev works with no problems (without import.meta.env.BASE_URL)
npm run serve shows the ground but no model
npm run build doesn’t show anything

Seems there should be defined base URL somehow. Could you kindly put a light on this problem?

The problem was in extra / in parameter. It should be "scenes/Dude/", not "/scenes/Dude/".
With this change, everything works locally and on GH Pages.

I pushed the update to repo and article. Please, let me know if you have any other problems.

Now npm run serve works at port 5000 with no problems.
Still for npm run build seems it adds not needed slash before URL in index.html and in .js files.
(I mean here not deploying to GH pages but just usual dist).
If I correct those slashes in index.html, ground is shown but no Dude, no shadows :slight_smile:

Build problem solved with adding to the root folder vite.config.js

// vite.config.js
export default {
  // config options
  base: ''
}
2 Likes