Typescene generator

Yeoman generator for Typescene web apps. Quickly set up scalable projects and modules using the CLI.

Installation

First, install Yeoman and generator-typescene using npm:

npm install -g yo generator-typescene

Generators

The generators in this package allow you to set up an entirely new project, or add a module to an existing project.

The Typescene toolkit itself does not require any particular method for organizing your projects and modules. You are free to rearrange the files created by this generator, or start from scratch entirely after you understand how you can compile, bundle and deploy your code yourself.

App

Web applications made with this generator are self-contained NPM modules.

Run the following commands to generate a new web application project:

mkdir my-project
cd my-project
yo typescene

The generator will prompt to select one of the following options:

• Generate a commonjs based app that is compiled and bundled using Webpack.
• Generate a systemjs based app that is compiled with TypeScript, and loads Typescene using a .min.js file and the SystemJS loader.

These methods differ only in the way they compile your source code and include JavaScript files in the final HTML output file. Your source code will look the same, and should be interchangeable between these project types.

Your new application source folder (i.e. src/app) should contain the following TypeScript files:

• _loader.ts -- this is a loader-specific entry point, and can be safely ignored.
• app.ts -- this is the actual entry point for your application. You can add any bootstrapping code here that needs to run immediately after the app is loaded.
• modules.ts -- this file contains import statements for all your other source files, so that they are actually bundled into the final JavaScript output. A line is automatically added for each module you add using this generator package.
• main/module.ts -- this is the "main" module entry point. It refers to the main activity, view, and service source files (if any).
• main/Activity.ts -- this file contains the main Activity class. See the instructions in this file on how to write a useful Activity class.
• main/View.ts -- this file contains the main View class, with a mapping to the main activity so that it is automatically displayed when the activity is started.
• main/Service.ts -- this file contains an example Service class, which is injected into the main Activity instance by default. If you don't need a service, or if you're planning to move services to other modules, you can remove this file.

Module

Use modules to group your source code files by feature, instead of by type. This makes your code a lot easier to work with as the application grows.

Modules should contain all code that belongs to a certain feature, such as views, activities, services, and models (plain classes). Some modules may only contain one file, whereas other modules may contain lots of files -- whatever suits the type of feature you're working on. You are free to import classes and types from other modules as well, such as shared services or views.

To generate a new module (in the current project folder generated by the App generator):

yo typescene:module

You can also provide the module name on the command line, like so:

yo typescene:module my-new-module

Module names are automatically rewritten as module-name for the module's path and ModuleName for class names.

After writing all source files, the generator appends an import line to src/app/modules.ts to make sure that the new files are included in the build / bundling process.

If you add more files to a module, make sure that these files are also imported from one of the existing files -- otherwise they will not be included in the bundling process.

Building Your App

The generated app supports NPM scripts for compiling your code and watching for changes.

• Run npm run build to compile your app for production.
• Developing with the commonjs project type:
  • Run npm run start:dev to compile your app and watch for changes, and launch a browser that automatically reloads the page when you change your code (powered by webpack-dev-server).
• Developing with the systemjs project type:
  • Run npm run watch to compile your app and watch for changes.
  • In another terminal window, run http-server -o to launch a browser (install from NPM using npm install -g http-server first, or use a similar tool).

Serving with Express

Instead of serving the dist/ or public/ folders with a generic HTTP server, you can use your own Express application. Add your server code in another sub folder of the src/ folder to avoid mixing it up with the client (Typescene) code.

Make sure your Express app serves the content of the dist/ folder for commonjs projects, or the public/ folder for systemjs projects.