A music quiz in Angular 2 using the Spotify API.
TypeScript JavaScript HTML CSS
Latest commit 0bc4311 Dec 14, 2016 @fabiandev 1.6.6


Angular 2 Music Quiz


$ git clone https://github.com/fabiandev/angular2-quiz-app.git
$ cd angular2-quiz-app
$ npm install -g gulp typings jspm@beta
$ npm install
$ npm start

Tip: You can use yarn instead of npm.

Live Example


Since the app is hosted on a free Heroku instance, it may need some time to boot up.

Fun fact: The app is named "hue", because the course at University, where this project was born, was called "Hypermedia User Experience Engineering".


This app uses:




We use npm or yarn and jspm (currently jspm@beta) to install dependencies.
We just need gulp, typings and jspm to be installed globally, by using the -g flag.

Make sure that you have Node.js installed, npm comes with it. You can check with node --version. For faster npm dependency installs, use yarn.

To install development dependencies, used e.g. in gulp tasks use:

$ npm install --save-dev module-name

or yarn add module-name --dev

To install application dependencies, used on the server side use:

$ npm install --save module-name

or yarn add module-name

To install client side dependencies, use jspm:

$ jspm install modulename

jspm also supports install npm:modulename and install github:user/repo


Typings are used to tell the TypeScript compiler about definitions. You can search for definitions like this:

$ typings search es6-shim

Installing is as easy as:

$ typings install dt~es6-shim --global --save

Definitions will be referenced automatically in the entry TypeScript file.


Production Build

The production build should be used, to compile the app for deployment. It will do it's best to keep the target files as small as possible.

$ gulp build

Development Build

A development build performs almost the same tasks as a production build, but may be faster.

$ gulp dev-build

Watch Changes

To make it easier and, most important, faster to compile changes use the watch task. It will perform only tasks to provide files, the dev-server needs processed (like compiling to JavaScript and CSS).

$ gulp watch

You may also execute gulp watch-build to perform those actions only once.

Local Server

Before starting the server copy .env.example in /server and name it .env, get Spotify API keys and fill them in.


To start the sever type:

$ npm start

or yarn start

The server will be started with the dist directory as root, and a built version of the app will be used. Make sure to run gulp build or gul dev-build first.

To start a development server type:

$ npm start dev

or yarn start dev

The server will be started on the very top level of the application code. All files (including dependencies) are transpiled on-demand in the browser. While developing, make sure gulp watch is running, to pick up index.html and less-files changes.


This app supports deployment on Heroku:

$ git push heroku master

Just make sure to set the correct Node and npm environment variables:


The npm production flag must be set to false that we can build the app on Heroku after pushing the repository.

And of course you have to add SPOTIFY_CLIENT_ID and SPOTIFY_CLIENT_SECRET as environment variables.

Optionally you may also add NEW_RELIC_LICENSE_KEY to enable monitoring by New Relic. If you do not provide a license key, New Relic simply won't be enabled.

Tip: If you deploy to Heroku, you can add the New Relic Add-on for free.


This section covers how to configure the build tasks, the server and the application itself.

Build Configuration - config.js

You can set some configuration for TypeScript in tsconfig.json and in tslint.json. All other configuration can be found in config.js.

Please take a closer look at the config.js file comment's on the configuration properties for more detailed explanations.


Type: String

The folder, where the source files can be found, e.g. ./src (no trailing slash!).


Type: String

The folder, where the built app will go to. Again, do not use a trailing slash.

dist is short for distribution.


Type: String|Array<String>

Define which files should or shouldn't be watched, when using gulp watch. You can use the globbing pattern here.


Type: Object

This configuration holds the command, that will be executed later via gulp when building the application. You can type jspm in the command line to see all available options.

jspm internally uses the SystemJS builder.


Type: Object

Configure the less gulp task, to create CSS files from LESS files.


Type: Object

Define a globbing pattern, which TypeScript files to lint for errors.


Type: String

Define the index file for the application.


Type: Object

Files to copy without further processing.


Type: Array<Object>

Files to copy into a desired location, but only preserve the path from the set base.

Server Configuration - server/index.js

You can set environment variables in server/.env (not included in this repo). Copy server/.env.example and rename it to .env.

Other options are set in server/config/app.js for a production server, or /server.config/app.dev.js for a development server.

Application Configuration

Note, that the index.html is not inside the src, but on the very top level of the application code.

The index.html is processed by gulp-preprocess.

For the dev server or a dev build, src/js/main.dev.ts will be used. For a production build, src/js/main.prod.ts is the entry point of the app.