ng2-jspm-template

This project provides a template for an angular 2 project setup with JSPM. You can use it as an inspiration for your own project setups.

Setup

Download a stable version of this repository and unzip it:

wget https://github.com/flaviait/ng2-jspm-template/archive/v0.0.1.zip -O ng2-jspm-template.zip
unzip ng2-jspm-template.zip
rm ng2-jspm-template.zip

If you want the most recent stuff (you feel a little bit adventurous, hm?), you might as well just clone the repository via:

git clone --depth=1 https://github.com/flaviait/ng2-jspm-template.git <your-project-name>

You need to install a node.js version >= 6.9, since this project uses ES2015 language features, and we only support node versions from the most recent LTS upwards. Things might work from 4.x upwards, but we do not provide any official support for this.

For users of nvm, we're providing a .nvmrc file, so that you only need to execute:

nvm install
nvm use

We strongly recommend to use nvm (or any other node version manager of your choice).

At the moment of writing this, WEB-18904 for the JetBrains IDE has not yet been implemented. If you use it, please vote for it :)

Because of this we have our jspm dependencies duplicated in the npm configuration (this should not be too much overhead, since npm caches the deps).

Project structure

All the source files are placed inside the src directory. There are three important entry points:

• src/styles/main.scss contains the global styles. This is the place to put css frameworks and global font settings for example.
• src/main.ts is the entry point for the application in production mode.
• src/main.dev.ts is the entry point for development mode.

Development

To install the development dependencies, simply run

npm i

To start the dev server, run

npm start

Workflow

The development mode of this template is optimized to support frontend developers with a fast workflow.

It makes use of the following technologies:

• The JSPM development bundling watches the bundled source files and incrementally rebundles the application on file change. This speeds up the page load, since the client does not have to trigger a bunch of HTTP requests during dependency resolution and transpilation.
• The hot-module-replacement watches the source files for changes and reloads only the modules affected by a change. This is much faster than reloading the whole page. With @ngrx/store the global application state can be kept across module reloads (see the todo component for example).
• A livereload server is used to reload the compiled global styles.

Managing JSPM dependencies

Some IDEs don't have (full) JSPM support yet. Because of this we have duplicated the JSPM dependencies as dev dependencies in the npm configuration. If you don't have JSPM support in your IDE, you should consider to install new JSPM packages also via NPM.

At the moment of writing this the jspm support for the JetBrains IDE has not yet been rolled out to all distributions.

Distribution

Build for distribution

To create a distribution build (should be run on the ci system), run

npm run dist

To create a build and then launch the dist server, simply run

npm run dist-server

Production runtime

There is also a dist mode for this project.

In this mode only the required dependencies for a production runtime are installed. The intention is to run this server standalone and optionally have the data requests reverse-proxied to an application server.

Of course you can alternatively place the files in the dist directory in any server that provides your static content.

To install only the production dependencies, run

npm i --production

To launch a dist server which provides the processed files, run

npm run dist-start

Updating

To keep your project in sync with this template, please have a look at the releases. The tooling is now placed in a separate project (ng2-jspm-template-lib), but the usage of this tooling might change. So please have a close look on the npm scripts section if anything changed there before you update the tooling dependency.

Configuration

JSPM

Since this is a jspm configuration template, you can naturally tweak the configuration of the JSPM dependencies and bundling.

Development tooling

The tooling is configured to work with the default structure of this template. But if you need a different project layout or karma configuration for example, you should have a look at the config.ts file. This file can be used to override the defaults. It is written in TS, so you can benefit of the type checking which decreases chance to end up with an invalid configuration. The typings can be found here.