I’m following the tutorial for the getting set up, I have the build running locally: Getting Set Up - Babylon.js Documentation
Can someone give me a high concept on how I can build out the game so I can drop it into my server and have it run on the web?
Hello,
In the same way as locally. Simply upload all of your files to your server via FTP and everything should work as it does locally.
So with the doc I was following that installs Node and Webpack, are you saying I can just release my app.ts and index.html? Do I have to install Node on the server?
Because I’m worried I need to upload all my node modules as well, (Don’t need all of them) and install other packages that I don’t want on the server.
Is there any way to build out just what I need as a static app?
If you’re using webpack, the server just needs to host your generated project bundle.js and required resources that you want to host, no ts files should be needed on the webserver.
Are you saying I need webpack on the server? Because I don’t see where any files are being built and generated in my solution.
So I’m assuming that you want a game that is hosted on a webserver that a user can access and play on their machine locally, right? Feel free to correct me if this isnt the case.
so, we have our build machine -> this machine uses webpack to compile the current game .ts code into a distributable .js bundle. This can be either your local dev machine, or an instance that does this via git hook. Webpack (or whatever bundling technology) is responsible for the final game package being generated here.
The webserver is what should be consuming this game package, and is responsible for serving it to users who want to access this. This can be done over FTP, or git hooks as well, depending on how you choose to host your output bundle. But at the end of the day, you need to be able to take your generated .js bundle and the rest of your project files/pages and get them onto your webserver to be hosted.
If you check out my demo project RooftopRampage:
in RooftopRampage_Source/webpack.config.js at master · Drigax/RooftopRampage_Source · GitHub
we configure webpack to inject our bundle into the index.html webpage, and to copy over all our consumed assets from our project public folder, and here in our tsconfig.json we tell webpack where to consume our source files from, where is our entry point, and where we should put our generated files post-build. (i use /dist as the build directory)
Currently I was able to build this locally on my computer, via npm run build and manually copied the contents from my generated /dist folder into the actual hosted project repo hosted courtesy of github.io:
These files can be placed can be wherever your webserver expects to find the files to host.
Yes basically this is what I’m looking for, I just don’t see any generated files when I run npm run build all I see is my solution files and no ‘output’ of distribution files:
So that’s what I’m a little confused about, is there supposed to be an output where my distribute package is? Because the only thing I can understand is I’m running it locally by a webpack build.
What does your webpack.config.js and tsconfig.json look like?
And webpackconfig:
const path = require("path");
const fs = require('fs');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const appDirectory = fs.realpathSync(process.cwd());
module.exports = {
entry: path.resolve(appDirectory, "src/app.ts"), //path to the main .ts file
output: {
filename: 'js/bundleName.js' //name for the js file that is created/compiled in memory
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
devServer: {
host: 'localhost',
port: 8080, //port that we're using for local host (localhost:8080)
disableHostCheck: true,
contentBase: path.resolve(appDirectory, "public"), //tells webpack to serve from the public folder
publicPath: '/',
hot: true
},
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
},
]
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: path.resolve(appDirectory, "public/index.html")
}),
new CleanWebpackPlugin()
],
mode: "development"
};Thanks,
if you change your tsconfig.json to have:
"compilerOptions": {
...,
"outDir": "./dist/",
"rootDir": "./src/",
...
}
Does that get webpack to properly move the built bundle to /dist?
EDIT:
Also its important to note that in package.json we specify our entry point (i think? this is where my expertise gets a bit fuzzy, I’m not too sure what the difference between the declarations of main in package.json and entry in webpack.config.json specify specifically) @RaananW, can you clarify?:
package.json
"main": "YourEntryPointFile.ts",
"scripts": {
"build": "webpack --mode=production",
...
}
That was it, thank you so much!
Last question, I have my /dist Versioned as a git submodule, when I build the contents of the folder are being removed. Is there a way to skip the .git folder?
Also my setting is "outDir": "./dist/web_developersdeck_build/build/",
But when I run a npm build it’s pushing to the web_developersdeck@1.0.0 build D:\Development\Web\web_developersdeck
Let’s organize it a little:
require the package. of course it gets a bit more complicated when you are using es6 imports, but that’s the basic gist.dist directory of your project. You are bundling all ts files to a single file in ./dist/js.If you don’t want webpack to be in charge of the compilation, use tsc directly. it will be quicker! But you won’t have a bundle, and won’t have other features like optimization/minification, html injection and so on.
I am not quite sure about your last question - it feels like an over-complicated way of achieving deployment using git commits. If you use webpack, all you need is to deploy your dist folder. What you can do is use some form of a CI tool (there are many, and many are free for small projects), and use it to have your project built online somewhere and deployed to a webserver that supports static deployment. netlify.com is one of those places that does everything for you, there is also vercel.com and many others.
@RaananW I see that the docs are now served using Vercel. BabylonJS used to use Netlify, right? What was the reason for moving?
Edit: I see there is a Netlify link on the home page. Maybe BJS is using both.
Great question!
First, our chinese community members were complaining about the doc page speed in china. This is due to the fact that netlify doesn’t have an endpoint there. Second, I develped the doc page using next.js, and the native support for next.js on vercel is amazing (kind’a makes sense, since they created next.js).
I also like the way they deal with PR security.
We still use netlify, and we still love netlify, but we diverse constantly. The playground is using azure, website is using netlify, docs use vercel.