Provides an extremely fast seed project for the development of Angular Universal (isomorphic) projects.
This is early work and under heavy development. A demo project can be found here
Includes the following features:
- Angular 5
- FuseBox bundling
- Fully typed build tools using TypeScript and Sparky
- Production and development builds
- Fast Angular testing with Jest
- 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
- End-to-end (e2e) testing with Protractor
- 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
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
# start in different tabs
$ npm start
$ npm run webdriver.start
$ npm run test.e2e.start
# 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
Checkout how blazing fast bundling can be using FuseBox!
Checkout how blazing fast testing can be using Jest!
Coming SoonWhen 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# 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-numberWe 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
You can follow the Angular change log here.