Awesome Open Source
Awesome Open Source

This project is archived and an improved version has been moved to


CircleCI codecov dependencies Status devDependencies Status Greenkeeper badge Angular Style Guide Fusebox-bundler

Provides an extremely fast seed project for the development of Angular Universal (isomorphic) projects. Check out the live app

Project Goals

This starter project is designed to get a basic application up and running with basic implementations of core features most applications need. It uses Firebase for the authentication and the database layers.

Note: Firebase doesn't have official support for Angular Universal at this time. However, we have implemented some of the basic features to render and transfer server state to the browser. Once an official support is released, we will use that.


  • [x] Angular as the application framework
  • [x] Angular Material as the UI language and component library
  • [x] Angular Flex Layout for dynamic responsive layouts
  • [x] FuseBox as the TypeScript/JavaScript bundler
  • [x] Jest for unit and component testing
  • [x] Nightmare for UI testing
  • [x] Sparky as the task runner
  • [x] Fully typed build tools using TypeScript
  • [x] Production and development builds
  • [x] Manage your type definitions using @types
  • [x] Simple Heroku Deployment
  • [x] HttpStateTransfer for caching server responses on client boostrap (no flickering)
  • [x] CDN asset configuration
  • [x] Automatic sitemap generation
  • [x] SCSS support for professional grade CSS management
  • [x] Brotli compression with gzip fallback
  • [x] CircleCI unit testing support
  • [x] Full favicon icon generation for multiple devices derived from a single seed image
  • [x] SEO support for Title and Meta tags
  • [x] OG (Open Graph) tags for social sharing
  • [x] Simple Ad-Blocker detection service
  • [x] Vendor-agnostic analytics using angulartics2
  • [x] Generic token based Authentication service with JWT cookie support.
  • [x] Both Client and Server build tasks
  • [x] Hot Module Reloading for faster browser reloads during client development
  • [ ] Ahead-of-Time (AOT) compilation support
  • [x] angular-tslint-rules as configuration preset for TSLint and codelyzer.
  • [x] Automatic static file cache invalidation
  • [x] Lazy Loaded modules
  • [x] Analyze bundle sizes by using source-map-explorer
  • [x] Support for Angular Mobile Toolkit (Service Worker)
  • [x] Tree-Shaking for production builds

Built by For additional help please checkout our services

Quick Start

Note that we strongly recommend node >= v7.0.0 and npm >= 4.0.0.

To start the seed use:

$ git clone --depth 1
$ cd fusebox-angular-universal-starter

# Add Firebase Admin values to your project
# in a ".env" file for local deveopment
# in environment variables for other environments
See [Environment Variables](#environment-variables)

# install the project's dependencies
$ npm install

# start the Angular Universal server
$ npm start

# start the server while watching tests and updating app documentation
$ npm run start.deving

# start the Angular Universal server w/ AOT build step
$ npm run start.aot
# can also be called passing the parameter --aot
# npm start --aot

# start the application in Client only mode (not server driven), with HMR enabled
$ npm run

# start the server in production mode
$ npm run

Table of Contents


Checkout how blazing fast bundling can be using FuseBox!



# single test run
$ npm test 

# single test with coverage results
$ npm run test.coverage

# continuous testing
$ npm run

# e2e testing (primarilly for CI builds)
$ npm run

# continuous e2e testing
$ npm run



Coming Soon


When you include a module that doesn't include typings, you can include external type definitions using the npm @types repo.

i.e, to have youtube api support, run this command in terminal:

npm i -D @types/youtube @types/gapi @types/

Environment Variables

# it is important to set the following environmental variables on your CI server (examples below)
HOST : # the root origin of your application server
CI : true 

# for Heroku Builds
HEROKU : true # to build on heroku, ssl settings are setup using this flag
NPM_CONFIG_PRODUCTION : false # to download all depenedencies on Heroku, including devDependencies

# Firebase Admin SDK
FB_AUTH_KEY: Some_Secret

File Structure

We use the component approach in our starter. This is the standard for developing Angular apps and a great way to ensure maintainable code

 ├──.fusebox/                       * working folder for the js bundler
 ├──.vscode/                        * Visual Studio Code settings 
 ├──coverage/                       * stores recent reporting of test coverage
 ├──dist/                           * output files that represent the bundled application and its dependencies
 ├──node_modules/                   * project depdendencies
 |   ├──client/                     * client Angular code. (most your work should be done here)
 |   └──server/                     * server code
 |   ├──config/
 |   |   ├──app.config.ts          * configuration interface for the web applications
 |   |   ├──build.config.ts        * configuration values for the build system
 |   |   ├──build.interfaces.ts    * configuration interfaces for the build system
 |   |   └──build.transformer.ts   * build system config transform helper
 |   |
 |   ├──env/
 |   |   ├──base.ts                * base app configuration 
 |   |   ├──dev.ts                 * dev app configuration
 |   |   ├──**.ts                  * arbitrary configuration called via the flag --env-config
 |   |   └──prod.ts                * production app configuration
 |   |
 |   ├──scripts/                   * misc. build helper scripts
 |   ├──tasks/                     * Sparky tasks
 |   ├──test/                      * testing system related configuration
 |   └──web/                       * static assets used for common web functions
 ├──.gitignore                     * GIT settings
 ├──circl.yml                      * CirclCI configuration file
 ├──             * standard code of conduct information
 ├──codecov.yml                    * configuration file
 ├──                * standard contributor information
 ├──fuse.ts                        * FuseBox entry point
 ├──LICENSE                        * software license
 ├──package-lock.json              * what npm uses to manage it's dependencies
 ├──package.json                   * what npm uses to manage it's dependencies
 ├──Procfile                       * Heroku deployment setting
 ├──                      * project information
 ├──test-report.xml                * JUNIT test results
 ├──tsconfig-aot.json              * typescript config for AOT build using @angular-cli (ngc)
 └──tsconfig.json                  * typescript config

Change Log

You can follow the Angular change log here.



Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (251,857
Scss (17,264
Angular (12,585
Angularjs (3,198
Angular2 (2,020
Angular4 (1,433
Seo (936
Social (851
Angular5 (780
Seed (515
Gzip (274
Brotli (151
Related Projects