-- still under development.

A starting skeleton that combines all these frameworks for easy development. Either fork the repository or follow the manual steps below to create it.

Cordova - Mobile apps with HTML, CSS & JS. Target multiple platforms with one code base

Phaser - Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

webpack - webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging

TypeScript - TypeScript is Typed JavaScript at Any Scale. TypeScript extends JavaScript by adding types to the language.

npm install -g [email protected] [email protected] [email protected]
npm install
npm run dev-browser

npm install -g [email protected] [email protected] [email protected]

In your working folder, if we want to make generate a new game folder by cordova

cordova create game
cd game
cordova platform add browser

All below commands can all be executed from our current working folder path game

Lets add our package.json dependencies and devDependencies

npm install [email protected]
npm install --save-dev [email protected] [email protected] [email protected] [email protected] [email protected] typescript@^3.8.3

Let's check if everything is working so far

cordova run browser 

Install cordova-plugin-webpack

cordova plugin add [email protected]

Make modifications to your previous default cordova installation.

mkdir src
mv www/js/index.js src/index.js

Use the contents of this default webpack.config.js and put it in your game folder as file webpack.config.js.

Replace scripts in the index.html file in the www folder. vendors.app.bundle.js will not be created yet but we will later.

<script src="vendors.app.bundle.js"></script>
<script src="app.bundle.js"></script>

In package.json add the following line to the scripts object:

"dev-browser": "cordova prepare browser -- --livereload && cordova build browser -- --webpack.config.js && cordova run browser -- --livereload --webpack.config.js",

Let's test if cordova is working with webpack

npm run dev-browser

In your src folder, delete index.js. Create the following structure: `

• src\
  • main.ts (source)
  • bootstrap.ts (source)
  • scenes\
    • intro.scene.ts (source)

add a typscript configuration file tsconfig.json in the game root folder with the following contents

edit your existing webpack.config.js and use the following contents

Let's run everything together

npm run dev-browser