create-hengine-app

Create a development environment for your hengine app.

Usage

Just execute one of the following command to get a development environment where my-app should be replaced with the name of your app:

npm init hengine-app my-app
# or
npx create-hengine-app my-app

After the dependencies are installed, you will be able to start your development. (See the Workflow section.)

In addition, you can also pass some arguments to it:

create-hengine-app <name> [options]

    <name>             Your app name

    -h, --help         Show help info

    -d, --dir  <dir>   The directory to create
                       Default: the app name

    -v, --ver  <ver>   The version of `hengine` to use
                       Default: the latest

    -p, --port <port>  The local port to use
                       Default: 8080

Please note that if you omit the version of hengine to use, the latest version will be fetched and adopted as input. If you want to change the version after initialization, just follow this:

1. Execute npm i -D hengine@<version> to update the development dependency where <version> should be replaced with the version you want.
2. Open /dist/index.html and modify the lib version to load. (/test/index.html loads the lib from the development dependency, so don't worry about it.)

Workflow

This package initializes a typical development workflow for hengine which is explained below.

Folder Structure

my-app/
+-- node_modules/       Dependency folder
+-- dist/               Files for distribution
| +-- index.css         Page styles
| +-- index.html        Index page for production
| `-- index.js          Bundled script file (generated by building script)
+-- src/                Source code (Some initial code will be provided)
| +-- index.js          The entry point of scripts
| +-- common.js         Common parts
| `-- menuScene.js      The declaration of the initial menu scene
+-- test/               Test folder
| +-- index.html        Index page for development
| +-- inspector.js      The declaration of the inspector
| `-- server.js         The declaration of development server
+-- package.json        The declaration file of the package
+-- package-lock.json   Dependency lock file
+-- rollup.config.js    Rollup config file
`-- tsconfig.json       TypeScript config file

Scripts

You can run any of the scripts by executing npm run <script> in the root of your app directory where <script> should be replaced with the script name.

| script name | description | |:-----------:|:------------------------------------------| | start | Launch the production server for testing. | | test | Launch the development server. | | build | Bundle the scripts for distribution. | | typecheck | Run type check. (Using TypeScript) |

Development

Generally speaking, you just need to write your code in src folder and use the development scripts listed above to test and build your app.

When you are developing your app, it is recommended to execute npm test to start the development server and test your app in your browser. In the page for development, scripts are directly loaded from source files so that you can access your result immediately after your code changes. In addition, the inspector script will be injected into the app to provide debug information and you can modify /test/inspector.js to adjust it.

If you want to get the production version of your app, execute npm run build to bundle the scripts into /dist/index.js, which is a bundled and optimized version, and your app for production will be ready in the dist folder. Then, you can execute npm start to start the production server which only serves the dist folder so that you can see the production result of your app in your browser.

The development environment also provides type checking functionality so that the intellisense functionalities of your editor can work properly. Besides, you can execute npm run typecheck to do type checking manually and modify /tsconfig.json to customize your TypeScript settings. For more information about TypeScript, please visit its official website: www.typescriptlang.org.

By the way, please note that only script files should be placed in the src folder and other resource files should be put in the dist folder and referenced relative to /dist. For instance, the initial style sheet file, /dist/index.css, is referenced in index pages as ./index.css. Moreover, the scripts are loaded as modules in the development server, so you have to use the global variable HE to access the APIs instead of importing them from the module hengine and you can refer to the given initial code to get an example.

Links

• Repository of hengine
• Contributing Guide
• Changelog
• License (MIT)