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
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:
- Angular2 as a front-end framework.
- Express with spotify-web-api-node for the server.
- Spotify API for the quiz data.
- css-animator and animate.css for animations.
- Materialize for styling.
- Material icons and Icons8 Flat Color Icons for icons.
- iScroll for a better mobile scrolling experience.
To install development dependencies, used e.g. in gulp tasks use:
$ npm install --save-dev module-name
yarn add module-name --dev
To install application dependencies, used on the server side use:
$ npm install --save module-name
yarn add module-name
To install client side dependencies, use jspm:
$ jspm install modulename
jspm also supports
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.
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
A development build performs almost the same tasks as a production build, but may be faster.
$ gulp dev-build
$ gulp watch
You may also execute
gulp watch-buildto perform those actions only once.
Before starting the server copy
/server and name it
Spotify API keys and fill them in.
NEVER PASTE YOUR KEYS IN THE EXAMPLE FILE OR ANYWHERE ELSE!
To start the sever type:
$ npm start
The server will be started with the
distdirectory as root, and a built version of the app will be used. Make sure to run
To start a development server type:
$ npm start dev
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 watchis 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_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 -
You can set some configuration for TypeScript in
tsconfig.json and in
tslint.json. All other configuration can be found in
Please take a closer look at the
config.js file comment's on the configuration
properties for more detailed explanations.
The folder, where the source files can be found, e.g.
./src (no trailing slash!).
The folder, where the built app will go to. Again, do not use a trailing slash.
dist is short for distribution.
Define which files should or shouldn't be watched, when using
You can use the globbing pattern here.
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.
Configure the less gulp task, to create CSS files from LESS files.
Define a globbing pattern, which TypeScript files to lint for errors.
Define the index file for the application.
Files to copy without further processing.
Files to copy into a desired location, but only preserve the path from the set
Server Configuration -
You can set environment variables in
server/.env (not included in this repo).
server/.env.example and rename it to
Other options are set in
server/config/app.js for a production server, or
/server.config/app.dev.js for a development server.
Note, that the index.html is not inside the
src, but on the very top level
of the application code.
index.htmlis processed by gulp-preprocess.
For the dev server or a dev build,
will be used. For a production build,
src/js/main.prod.ts is the entry point of the app.