ng2-jspm-template

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #typescript #llm #golang #go #machine-learning #docker #awesome #cli #openai #open-source

ng2-jspm-template

(★ 13)

A template for a quick development workflow with angular 2 and jspm

ng2-jspm-template Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ng2-jspm-template

[![Build Status](https://travis-ci.org/flaviait/ng2-jspm-template.svg?branch=master)](https://travis-ci.org/flaviait/ng2-jspm-template)

This project provides a template for an [angular 2](https://angular.io/) project setup with [JSPM](http://jspm.io/).
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](https://github.com/creationix/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](https://youtrack.jetbrains.com/issue/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](http://jspm.io/0.17-beta-guide/development-bundling.html) 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](http://jspm.io/0.17-beta-guide/hot-reloading.html) 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](http://livereload.com/) 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](https://youtrack.jetbrains.com/issue/WEB-18904)
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](https://github.com/flaviait/ng2-template-libs/blob/configurability/src/config/config.defaults.ts).
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](https://github.com/flaviait/ng2-template-libs/blob/master/src/config/config.interface.ts).

ng2-jspm-template

ng2-jspm-template Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

ng2-jspm-template

ng2-jspm-template Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README