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.
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).
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.To install the development dependencies, simply run
npm i
To start the dev server, run
npm start
The development mode of this template is optimized to support frontend developers with a fast workflow.
It makes use of the following technologies:
@ngrx/store
the global application state can be kept across module reloads (see the todo component for example).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.
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
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
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.
Since this is a jspm configuration template, you can naturally tweak the configuration of the JSPM dependencies and bundling.
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.