How to export projects for web on Babylon.js Editor v4.0

@julien-moreau

I’ll inform you of my simple game app developed on Babylon.js Editor v4.0.

I’d like to publish my project and run on web server (ex: Azure App Service, GitHub Pages…).

Could you tell me how to publish my project from Babylon.js Editor. I checked readme but could not find it.

See the related info:

(a blog post for Japanese developers)
https://www.crossroad-tech.com/entry/babylonjs-editor-4beta2-make-game5

Hey @Limes2018! Sorry for the delay, that’s awesome that you got it working that fast!!

I’m working hard on finalizing the Editor’s workflow and especially a kind of “packer” to pack the final production delivery file(s).

Today, no deployment tool exist in the Editor. But, if you have a server that can server files, you can manually drag’n’drop these files from the root folder of the workspace:

  • index.html
  • scenes (folder)
  • dist (folder)

Maybe you’ll have to drag’n’drop the cannon.js script as well (you can change the link to the cannon.js file in the index.html) because it is loaded from “node_modules” by default.

Today, the Editor as a plugins system (added thanks to @jkeys) and we can easily imagine a plugin that helps to publish on Azure, or a FTP, or whatever, automatically just by clicking on a button.

4 Likes

@julien-moreau
A lot thanks for your reply even though you’re busy.
I’ll try to put index.html, scene. and dist on server like GitHub pages.

I’ll write summarize post in English and workspace on GitHub. I’ll inform you of these.

Today, the Editor as a plugins system (added thanks to @jkeys) and we can easily imagine a plugin that helps to publish on Azure, or a FTP, or whatever, automatically just by clicking on a button.

Great feature!!!

@Limes2018 here is the link to the WIP plugin: GitHub - electronic-caregiver/babylonjs-editor-publish-plugin: a plugin to serialize the active scene and publish to a cloud provider (AWS currently supported)

Please note I only wrote the logic for glb format, although PRs are welcome. I can add support for the other formats sometime in the next week or so.

Edit: Also AWS is the only supported provider, I’m not experienced with the other cloud providers and I also have never programmatically uploaded to an FTP server so I’d have to do some research on that side (authentication, setting content type). I was kinda hoping someone on the Microsoft side would either offer the wisdom necessary to integrate the Azure provider, or submit a pull request.

Also to clarify @julien-moreau was the mastermind behind the plugins system (and literally every other aspect of the editor afaik), I just expressed a need xD

@julien-moreau what class contains the utils for serializing multi-file formats that you added a while ago?

Edit: not serialize, just reference. You made mention of some utils for referencing the generated filepaths of the textures/other files for gLTF/babylon formats but I wasn’t sure where to look for that.

@jkeys

Coool!! and Many thanks for sharing plugin.
Unfortunately I’m a new member of AWS (Azure is a bit familiar with me).

Anyway, I introduced the fantastic plugin my blog posts for Japanese developers.

@julien-moreau

I’m glad if you check the repo below. It is my ping pong game developed by Babylon.js Editor v4.0.
I’m very interested in the v4.0 editor. I’ll try to introduce other feature of the editor and provide PR.

Hey @Limes2018 that rox a lot!!
I’m forking and looking at the code, will PR you if I find some optimizations to share :slight_smile:

@julien-moreau

I feel honored that you check my code.
I implemented the code with trying things around. There may be bugs or not optimized in my code.
I’ll wait for your PR. Thanks for taking your time!

No problems @Limes2018
I’m already seeing it I understand everything you tried to do. Also, I have no encountered bug for the moment !

What I’m doing is more re-arrange scripts. This is just il order to show you what I had in mind when adding the scripts feature in the Editor

@julien-moreau

Great thanks!

What I’m doing is more re-arrange scripts. This is just il order to show you what I had in mind when adding the scripts feature in the Editor

I’ll wait it.

Next my action wil be followings:

  • Simple usages of Babylon.js Editor and scripts in English posts

  • Try to implement other game or some demo for introducing the editor

That’s excellent!
Just created the pull request: Reworked the blocks game as an example by julien-moreau · Pull Request #1 · flushpot1125/pingponggame_from_bjseditorv4beta2 · GitHub

I used the latest beta version of the Editor that you can find here (beta.7): BabylonJS Editor v4.0.0 beta · BabylonJS/Editor Wiki · GitHub

It is a pure copy of the game you created, I just simplified the attached scripts and used a feature added in the beta.7: adding a script on the scene itself :slight_smile: I think that’s what you missed using the beta.2, I’m sorry for that, I forgot the scene until the beta.7

1 Like

@julien-moreau

Many thanks for you PR. I’m so glad!

Before running your PR version, I try to develop beta7 environment. But npm install failed because of the log.

> node scripts/install.js

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!

When I developed Editor beta2, the log was not appeared.
I think it may depend on my environment, I’m trying to fix it.

@julien-moreau
I solved the problem of No Xcode or CLT version detected issue and run your PR on BJS Editor beta7.

Thanks for your reworking, I could understand how to access other classes method without “export function” .

I merged your PR. I’ll keep to develop apps or demo for the editor!

1 Like

Hello, I tried to drag both three files to the server (I was using Amplify) but it threw the 403 error. Does anyone successfully host the scene on a server?

Hello, have you tried to host the scene on a server like GitHub successfully?

Hello @ZzMarmot

Let me just clarify. You used Babylon.js Editor, make some project, and tried to host the scene on server like Github pages but failed?

If so, I’ll try with my another simple project.

1 Like

Thanks @Limes2018 for your help :slight_smile:

2 Likes

I tried the following things.

  • Open Babylon.js Editor 4.0.5
  • Create a new workspace as Third Person Shooter template
  • File > Build Project
  • Extract “dist”, “scene”, “index.html” and “node_modules/cannon/cannon.js”
  • Set the “cannon.js” at the same folder as “index.html”.
  • Modified the “index.html” like this
<!--    <script src="./node_modules/cannon/build/cannon.js" type="text/javascript"></script> -->
    <script src="./cannon.js" type="text/javascript"></script>

  • Open these files by Visual Studio Code and use Live Server add-in

  • Access the URL as “http://localhost:5500” via Firefox.

Here is a working result.

Hope it would be helpful.

1 Like

Is the “scene” you mentioned the “scene” folder under “scenes” or “scene” folder under “projects” or the “scene” under “src” folder? Also, the Cannon.js (Capitalized first letter) is the one under cannon folder or the one in cannon/build/cannon.js? Thank you.

I dropped “scenes” folder which contains a scene.babylon file and the server was unable to load it.

Unable to load from ./scenes/scene/scene.babylon: importScene of scene.babylon from Babylon.JS Editor version: v4.0.5, exporter version: v4.2.0
(anonymous) @ index.ts:48