Fusing Angular

The goal of this project is to provide a developer friendly Angular Universal starting point. It differs from the Angular-CLI by focusing soley on Universal applications and uses a faster testing framework and bundler. You can deploy a boilerplate application with a single click via Heroku.

Features

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

• Angular as the application framework
• FuseBox as the TypeScript/JavaScript bundler
• Jest for unit and component testing
• Nightmare for E2E UI testing
• Sparky as the task runner
• Heroku Single Click Deployment
• SCSS support for professional grade CSS management
• Brotli compression with gzip fallback
• CircleCI integration
• Tree-Shaking for production builds
• Ahead-of-Time (AOT) compilation support
• angular-tslint-rules as configuration preset for TSLint and codelyzer.
• Lazy Loaded modules
• Fully typed build tools using TypeScript
• Manage your type definitions using @types
• Favicon icon generation for multiple devices derived from a single seed image
• Search Engine (SEO) support for Title and Meta tags
• OG (Open Graph) tags for social sharing
• Vendor-agnostic analytics using angulartics2
• Generic token based Authentication service with JWT cookie support.
• Analyze bundle sizes by using source-map-explorer
• PWA Support via Angular Service Worker

Heroku Deployment Features

Click button deployment to Heroku gets you setup in just under 5 minutes! It includes the following add-ons which are all free until you need to scale:

• Auth0 A developer first universal identity management and single sign on platform.
• Rollbar Real-time error monitoring, alerting, and analytics for developers.
• New Relic APM Monitor, troubleshoot, and tune production web applications.
• Heroku Postgres Reliable and powerful database as a service based on PostgreSQL.
• SendGrid Email Delivery. Simplified.
• Algolia Realtime Search A powerful API delivering relevant results from the first keystroke.

All these services start off free and you can scale them up as your app grows.

Recipes

Below are some guides to help you bring in common features into your starter.

• Bootstrap Theme coming soon
• Material Theme coming soon
• Bulma Theme coming soon

Table of Contents

• Showcase
• Quick Start
• Testing
• Favicons
• @Types
• Environment Variables
• File Structure
• Change Log
• License

Showcase

Apps using this starter of set of tools

• FloSports: an Innovator in Live Digital Sports and Original Content
• Hip Fit: Micro-workouts, stretches and physical therapy inspired exercises.
• Notion Ninja: Share and explore startup and business ideas

Quick Start

Note that we strongly recommend node >= v9.0.0 and npm >= 5.0.0.

If you are on a Mac, you can simply run the command tools/setup/mac.sh. This will install the dependencies that exist outside of npm

Configure Auth0
Install Postgres

To start the seed use:

$ git clone --depth 1 https://github.com/patrickmichalina/fusing-angular
$ cd fusing-angular

# in a ".env" file for local deveopment
# in environment variables for other environments

# 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.spa

# start the server in production mode
$ npm run start.prod

# start the server in production mode w/aot enabled (most optimized bundle!)
$ npm run start.prod.aot

Testing

# 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

Favicons

# replace the image at /tools/sources/favicon.png

# generate new images and html
npm run gen.favicon

# commit your changes

@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

# REQUIRED (assing in your .env file to run locally)
SITE_URL=http://localhost:5000
AUTH0_CALLBACK_URL=http://localhost:5000/callback
AUTH0_CLIENT_ID
AUTH0_CLIENT_SECRET
AUTH0_DOMAIN

# OPTIONAL
GOOGLE_ANALYTICS_TRACKING_ID # if you want to test GA locally, include this
AUTH0_CERT # this is a huge performance gain but not required
ROLLBAR_CLIENT_ACCESS_TOKEN # to track errors from the browser, be sure to grab this from rollbar
SENDGRID_API_KEY # for the SendGrid email service

# for Heroku Builds, to download all depenedencies on Heroku, including devDependencies
# this is required
NPM_CONFIG_PRODUCTION : false

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

fusing-angular/
 ├──.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 will likely be done here)
 |   ├──server/                     * server code
 |   └──testing/                    * testing mocks and helpers to make it easier to get tests up and running
 |
 ├──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
 |   ├──sources/                   *
 |   ├──tasks/                     * Sparky tasks
 |   ├──test/                      * testing system related configuration
 |   ├──tslint-rules/              * custom ts-lint rules
 |   └──web/                       * static assets used for common web functions
 |
 ├──.gitignore                     * GIT settings
 ├──.prettierignore                *
 ├──.prettierrc                    *
 ├──app.json                       * Heroku button deployment 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 worker settings
 ├──README.md                      * project information
 ├──test-report.xml                * JUNIT test results, not stored in git
 ├──test.api.json                  * Jest test settings for API code
 ├──test.client.json               * Jest test settings for client (angular) code
 ├──tsconfig-aot.json              * typescript config for AOT build using @angular-cli (ngc)
 ├──tsconfig-e2e.json              * typescript config for e2e tests
 └──tsconfig.json                  * typescript config

License

MIT