Introduction
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.
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 # Add Firebase Admin values to your project # in a ".env" file for local deveopment # in environment variables for other environments See [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.spa # start the server in production mode $ npm run start.prod Table of Contents
Bundling
Checkout how blazing fast bundling can be using FuseBox!
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
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.youtubeEnvironment Variables
# it is important to set the following environmental variables on your CI server (examples below) HOST : angular.patrickmichalina.com # 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_SERVICE_ACCOUNT_PRIVATE_KEY_ID: Some_SecretFB_SERVICE_ACCOUNT_PRIVATE_KEY: Some_SecretFB_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-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.