Local Server nodejs to run a PGfile, whats the correct way?

Questions
1

Goal:
To run a webserver locally and display html files - created on the PG without any webdependency.

Get the understanding, how things are connected to safely recreate these environments and advance with babylon.

Situation:

I am struggling with the .js script linkage.

Level of my Knowledge

Basically I am using BabylonJs, all the tools and I can do some scripting as well, I have some Ideas how it can work, but no deep insight of webtech, so I am following infos and instructions.
I am lacking a lot of that background web knowledge.

What I have done so far:

I have followed the getting started and installation of the nodeJS server as well the npm(s) for all the babylonjs modules.

This worked out well, server is running locally. I can display the sample as well I can display the files I download from PG.

Now I want to get independent from the web and replace the:

        <!-- Babylon.js -->
        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
        <script src="https://preview.babylonjs.com/ammo.js"></script>
        <script src="https://preview.babylonjs.com/cannon.js"></script>
        <script src="https://preview.babylonjs.com/Oimo.js"></script>
        <script src="https://preview.babylonjs.com/gltf_validator.js"></script>
        <script src="https://preview.babylonjs.com/earcut.min.js"></script>
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
        <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
        <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>

with the local files.

The files live inside the /node_modules folder, which is not accessible from the index.html.

Do I need to copy the needed modules into the /public/node_modules folder structure and access the scripts like that ? (that does work):

	<script src="/node_modules/babylonjs/babylon.js"></script>
        <script src="/node_modules/babylonjs-materials/babylonjs.materials.min.js"></script>
        <script src="/node_modules/babylonjs-loaders/babylonjs.loaders.js"></script>
        <script src="/node_modules/babylonjs-gui/babylon.gui.min.js"></script>

Which doesnā€™t seem right to me as the files would be exposed to the public.(?)

I have included:
I followed the info to include the import of the elements in the scripts.
I think I did it wrong as it doesnt work.

	import * as BABYLON from 'babylonjs';
	import * as GUI from 'babylonjs-gui';
	import 'babylonjs-loaders';
	import 'babylonjs-materials';

What I am asking for

If I am on the right path, and the things I have done so far are correct and how to proceed.
I am very happy to learn things, so thank you for your help and time.

Best. Werner

2

Hi Werner,

You are on the right track! :slight_smile:

There is no simple answer to what you are asking. It involves bundling your project, either to a single file or to a few chuncks and server it correctly from a (local or remote) web server. The simplest solution is always to use the CDN and the files hosted there, as this provides you with the BABYLON namespace and letā€™s you work worry-free with all of the dependencies. But as you probably found out, there are down sides for this as well.

I would recommend you to get started here - NPM Support | Babylon.js Documentation and understand out packages and how to use them.

We also have this tutorial which might be also interesting to your use case:

There are many templates created by different members of the community to get people started. I have made this one - GitHub - RaananW/babylonjs-webpack-es6: Babylon.js basic scene with typescript, webpack, es6 modules, editorconfig, eslint, hot loading and more. Will even make coffee if you ask nicely. , but it might be a little too much to what you want to do.

1 Like
3

Hello RaananW,

thanks for the swift answer.

For me this is just the beginning and I want to gather knowledge around a lot of things in Babylon.
I have to go further quite quickly and get understandings on all ends.

Thanks for the links. Will work them through as good as I can.

1 Like
4

I have successfully done this:

I found one issues:

Under point: 4. Typescript Support

tsc --init

This will create a default tsconfig.json. You can replace the contents with:

This gave me an error (which I cannot decipher). But I created the tsconfig.json manually and copied the suggested text, which then worked fine

Error in the console:

tsc : The term 'tsc' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the
spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ tsc --init
+ ~~~
    + CategoryInfo          : ObjectNotFound: (tsc:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException
5

you were just doing something like:
npx http-server [path] [options]

Seems like that would work if you copy the preview files to your ā€˜/libsā€™ directory or something. Can you share more about your setup? It looks like you donā€™t want to use a bundler to me, but just serve straight up HTML and JS files.

6

Thatā€™s the TypeScript compiler. Install typescript and it will be in ./node_modules/.bin/ and available.

2 Likes
7

seems like you are missing typescript (the typescript compiler). We donā€™t usually recommend installing tsc globally, but i assume this is what the tutorial is assuming. Instead of installing globally, install typescript (npm install typescript) and use npx tsc instead of tsc whenever you need typescript

2 Likes
8

Actually, atm I am not able to answer this question in a proper way.

As I am coming from the content side, I started off with the PG and JS. I was thinking, that I can go from there, take my content and publish it. (We do have experience with other engines, but not web based).

Its all a bit overwhelming for me and I am not sure how to navigate in a clever way so I guess I need some advice.
Probably I would need to find some help for our ideas.
I see, that there are many ways how to develop on that web tech side (which is not my expertise).

We want to go in a specific direction and I guess, that there are some pits to fall into if I donā€™t get some fundamentals.

We have some experienced web developers on our side, but they dont have experience with babylonjs.
I am wondering if that is the way to go and starting to work with them on these topics.
They should have a way better understanding of these topics than me.

I am more on the content side.
We are doing a jump into the cold waterā€¦
But it feels good :slight_smile:

9

Thanks for that!

1 Like
10

It looks like you downloaded from the playground as a starting point. When you are ready feel free to share your development stack - you are right that there an overwhelming number of options, but then we can offer more specific starting points. For a production site - bundling will reduce your file sizes and hence a faster load. If you are just deploying something like a PG to a static site you can deploy the ./dist folder generated from npm run build of the ES6 webpack from Raanan. :smile:

2 Likes
11

I might not be able to satisfy the dev. stack q, but I can sketch out what we want to achieve.

So far we are producing digital artworks with offline RT3d-Engines.

Now we decided to switch our core production tools and engine and move to WebGL and Web for a couple of strategic reasons.

We want visual development for the content of the works, but we also have a deep experience and expertise in the development of custom solutions which together with the engines possibilities defines the final outcome.

The works we are producing are more or less static in the way, that it does not take any inputs or communication from outside the application, neither user inputs, so there is no interactivity, so far.
The content is visually dynamic, but always running on offline, standalone PCs.

Coming from this tradition, we will either stick to it, but more likely move on and develop new ideas, some surely to come from new possibilities.
Nevertheless it will always be a ā€œworkā€, which will live on its own, each with its own properties and characteristics.

Ownership should and will be handled slightly differently, making use of new technologies, which emerged recently.

As well the presentation, accessibility, distribution model should make use of the webs possibilities.

Our main interest is to keep on making artworks, but basically ā€˜justā€™ with a different Engine, but make use off all the advantages attached to a web based technology.

I see examples using threejs,e.g. art blocks , publishing works and I am wondering how they did integrate them.
I guess that there is a kind of a best practice and wondering if there is some experience in webGL art and babylon as well.

So thats basically where we are starting from.

2 Likes
12

We have successfully done this procedure now.
We start to understand a bit more. I c what the build is creating.
Exciting.

2 Likes
13

Hi again.

Is it possible, to use Javascript instead of TS for this kind of workflow?
I mean, the scene script itself.

Just thinking of developing prototypes in PG and then move to the package based project, to translate everything into TS is laborious.

Or is this basically TS native, and a javascript based approach looks differently?

Best. Werner

14

TypeScript is completely optional. Additionally, there is a TypeScript playground, so you can use that - the thing about TypeScript is that although it has a learning curve - once your project reaches a certain point in size/complexity that the compiler can be quite helpful. Hopefully somebody can post with a javascript starting point for you that has a dev server and bundles for production, etc.

1 Like
15

This could well be useful

2 Likes
16

Hi. Thanks for the reply.

I read the falling fruits, which is interesting and describes well the workflow.

Interesting what you say about java/ts and that it is similar/optional and the advantages of ts.

We have to get into both languages with a similar starting point of knowledge for both.

Would be very interesting to learn from a JavaScript based template, like the one which is available for the TS workflow, and what the differences are.

Thank you for all well documented parts on babylon site. There is a lot to learn from.
It is just interesting to experience all the things attached to a webbased development.

I saw the different compiling options for the NPM like production, dev. etc. They produce different outputs.
Where would I start to get into these build options and configurations?
E.g. if I want just a single file instead of the maps.

17

@RaananW would be the best person to answer that :smiley:

18

I will be happy to answer any question!

But I am so sorry, I didnā€™t quite understand itā€¦ Development is for when you develop, production is for when you deploy. Donā€™t develop with production, thatā€™s always a bad thing :slight_smile: (well, not always butā€¦ you get what iā€™m saying).
Eliminating sourcemaps is a very simple process. You donā€™t have to use them if you donā€™t want to. You can simply ignore them
Otherwise - choose any path that you understand and works well for you!

1 Like
19

Hello @yamaciller just checking in, was your question answered? :smiley: