{"id":22254571,"url":"https://github.com/mizux/babylonjs-101","last_synced_at":"2026-05-05T12:33:50.517Z","repository":{"id":74261372,"uuid":"269084312","full_name":"Mizux/babylonjs-101","owner":"Mizux","description":"My own tutorial on BabylonJS","archived":false,"fork":false,"pushed_at":"2026-03-30T16:31:13.000Z","size":10475,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-30T17:31:16.520Z","etag":null,"topics":["babylonjs","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://mizux.github.io/babylonjs-101/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mizux.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-06-03T12:38:05.000Z","updated_at":"2026-03-30T16:31:10.000Z","dependencies_parsed_at":"2024-01-29T15:30:56.926Z","dependency_job_id":null,"html_url":"https://github.com/Mizux/babylonjs-101","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Mizux/babylonjs-101","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mizux%2Fbabylonjs-101","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mizux%2Fbabylonjs-101/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mizux%2Fbabylonjs-101/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mizux%2Fbabylonjs-101/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mizux","download_url":"https://codeload.github.com/Mizux/babylonjs-101/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mizux%2Fbabylonjs-101/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32649594,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-05T11:29:49.557Z","status":"ssl_error","status_checked_at":"2026-05-05T11:29:48.587Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babylonjs","typescript","webpack"],"created_at":"2024-12-03T07:31:39.702Z","updated_at":"2026-05-05T12:33:50.496Z","avatar_url":"https://github.com/Mizux.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Github-CI: [![Build Status][build_status]][build_link]\n\n[build_status]: ./../../actions/workflows/build.yml/badge.svg\n[build_link]: ./../../actions/workflows/build.yml\n\n# Introduction\nMy journey to create a javascript static site app using typescript, babylonjs and webpack.\n\n# Host Setup\nIn your `.rc` you can add these line to have *user* global install:\n```sh\n# NodeJS\n# see: http://npm.github.io/installation-setup-docs/installing/a-note-on-permissions.html\nexport NPM_CONFIG_PREFIX=${HOME}/.npm-global\nexport PATH=${NPM_CONFIG_PREFIX}/bin:${PATH}\n```\n\nFirst you must have installed on your system:\n* `nodejs`,\n* `npm`\n* [`yarn`]\n\nnote: For `yarn` you can also install it using `npm install -g yarn`\n\n# Creating a New project\nInstall few dependencies:\n```sh\nmkdir -p \u003c.../project\u003e\ncd \u003c.../project\u003e\nnpm init\n```\n\nref: https://docs.npmjs.com/creating-a-package-json-file\n\n# Install Typescript\n```sh\nnpm install --save-dev typescript\n```\nor\n```sh\nyarn add --dev typescript\n```\n\nthen we can create a default config using:\n```sh\nnpx tsc --init\n```\n\nUpdate Typescript config `tsconfig.json`:\n```json\n{\n  \"compilerOptions\": {\n    \"target\": \"es2020\",\n    \"module\": \"commonjs\",\n    \"strict\": true,\n    \"outDir\": \"dist\",\n    \"sourceMap\": true,\n    \"esModuleInterop\": true,\n    \"skipLibCheck\": true,\n    \"forceConsistentCasingInFileNames\": true\n  }\n}\n```\n\nnote: `ES6 == ES2015`.  \nref: https://www.typescriptlang.org/docs/home.html\n\n# Add Webpack\nWe need to add webpack and few loaders.  \nFirst we install webpack:\n```sh\nnpm install --save-dev webpack webpack-cli webpack-dev-server\n```\n\nWe'll need to add a `webpack.config.js` to bundle our app.\n```js\n'use strict';\nconst path = require('path');\n\nmodule.exports = {\n  mode: 'none',\n\tdevtool: 'inline-source-map',\n  devServer: {\n    port: 8080,\n    contentBase: ['.'],\n    inline: true,\n    hot: true,\n    historyApiFallback: true,\n    noInfo: true\n  },\n  entry: './src/index.ts',\n  output: {\n    path: path.resolve(__dirname, './dist'),\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: []\n  },\n  resolve: {\n    extensions: ['.ts', '.tsx', '.js']\n  },\n  performance: {\n    hints: false\n  }\n};\n```\n\nAdd few script to `package.json`:\n```json\n  \"scripts\": {\n    \"build\": \"webpack --mode production\",\n    \"start\": \"webpack-dev-server --mode development --progress --color\"\n  },\n```\n\nref: https://webpack.js.org/concepts/\n\n## Generate index.html\nTo generate the `index.html` we can use the HtmlWebpackPlugin:\n```sh\nnpm install --save-dev html-webpack-plugin\n```\n\nThen in `webpack.config.js`:\n```js\n// Creates index.html file.\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n  ...\n  plugins: [\n    new HtmlWebpackPlugin({\n      title: 'Output Management',\n    }),\n  ],\n```\n\nref: https://webpack.js.org/guides/output-management/#setting-up-htmlwebpackplugin\n\n## Typescript Loader\nThen you need to install typescript loader:\n```sh\nnpm install --save-dev ts-loader\n```\n\nThen you need to add a new **rule** to `webpack.config.js`:\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.tsx?$/,\n      loader: 'ts-loader',\n      exclude: /node_modules/\n    },\n```\n\nref: https://www.npmjs.com/package/ts-loader#examples\n\n## CSS Loader\n```sh\nnpm install --save-dev css-loader style-loader\n```\nFirst you'll need to install `css-loader` to transform CSS to a JS module.  \nThen you'll need to install `style-loader` to inject the JS module\ninto a `\u003cstyle\u003e` tag at runtime.\n\nYou also need to add a new rule to `webpack.config.js`:\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.css$/,\n      use: ['style-loader', 'css-loader'],\n    },\n```\n\nThen now in any typescript file, you can simply use:\n```ts\nimport 'relative/path/to/file.css';\n```\n\nref: https://webpack.js.org/loaders/css-loader/\nref: https://webpack.js.org/loaders/style-loader/\n\nTo investiate...\nref: https://github.com/seek-oss/css-modules-typescript-loader\nref: https://github.com/Jimdo/typings-for-css-modules-loader\n\n## File Loader\nNOT TESTED YET !\n```sh\nnpm install --save-dev file-loader\n```\n\nThen you need to add a new rule to `webpack.config.js`:\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.(png|jpg|gif|svg)$/,\n      loader: 'file-loader',\n      options: {\n        name: '[name].[ext]?[hash]'\n      }\n    },\n```\n\n## Cleanup dist\nTo keep dist directory clean you should use the CleanWebpackPlugin:\n```sh\nnpm install --save-dev clean-webpack-plugin\n```\n\nThen in `webpack.config.js`:\n```js\n// Cleans dist folder.\nconst CleanWebpackPlugin = require('clean-webpack-plugin');\n\nmodule.exports = {\n  ...\n  plugins: [\n    new CleanWebpackPlugin(),\n  ],\n```\n\nref: https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder\n\n# Add BabylonJS\nNow, it's time to install BabylonJS engine.\n```sh\nnpm install --save-dev @babylonjs/core @babylonjs/materials\n```\n\nref: https://doc.babylonjs.com/\n\n# Directory layout\nNext, we'll scaffold our project in the following way:\n```\nproject/\n├─ dist/\n└─ src/\n   └─ index.ts\n```\n\n[src/index.ts](src/index.ts)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmizux%2Fbabylonjs-101","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmizux%2Fbabylonjs-101","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmizux%2Fbabylonjs-101/lists"}