node package manager

fusebox-angular-universal-starter

Introduction

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.

This is early work and under heavy development. A live example can be found here

Project Goals

This seed project is designed to get some of the best techniques running on your new fullstack Node/Angular project right away. It is not shy about being overly opinionted or more "complicated" than similiar projects. Some of the more imporant goals are:

  • Provide a project with very fast feedback loops so developers can code, test, and integrate quickly.
  • Fully tested and ready to customize
  • As reactive and immutable as possible
  • Provide common performance optimizations to deploy a fast, lean applications from day one.
  • Provide all boilerplate services, routes, and components that are almost always used in medium to large web applications.
  • Provide an ejectable OpenID Identity Server for managing user authentication
  • Provide an ejectable API with some common endpoints

Features

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

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 https://github.com/patrickmichalina/fusebox-angular-universal-starter
cd fusebox-angular-universal-starter
 
# install the project's dependencies 
$ npm install
 
# single test run 
$ npm test 
 
# single test with coverage results 
$ npm run test.coverage
 
# continuous testing 
$ npm run test.watch
 
# e2e testing (primarilly for CI builds) 
$ npm run test.e2e.ci
 
# continuous e2e testing 
$ npm run test.e2e.watch
 
# 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.spa
 
# start the server in production mode 
$ npm run start.prod
 

Table of Contents

Bundling

Checkout how blazing fast bundling can be using FuseBox!

fuse-box

Testing

Checkout how blazing fast testing can be using Jest!

jest

Configuration

Coming Soon

@Types

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/gapi.youtube

Environment Variables

# it is important to set the following environmental variables on your CI server (examples below) 
HOST : angular.patrickmichalina.com # the root origin of the application server 
CI : true 
 
# for Heroku 
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 
 
# cdn origin for assets will only be injected if the following environment variable is set 
CDN_ORIGIN : https://my-distro.some-awesome-cdn.net
 
# google analytics settings will only be injected if the following environment variables are set 
GA_TRACKING_ID : UA-18280491-Z
GA_VERIFICATION_CODE : RW-some-crazy-number

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-angular-universal-starter/
 ├──.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
 |
 ├──src/
 |   ├──client/                     * client Angular code. (most your work should be done here)
 |   └──server/                     * server code
 |
 ├──tools/
 |   ├──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
 ├──CODE_OF_CONDUCT.md             * standard code of conduct information
 ├──codecov.yml                    * codecov.io configuration file
 ├──CONTRIBUTING.md                * 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
 ├──README.md                      * 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.

License

MIT