{"id":15184608,"url":"https://github.com/patrickmichalina/fusebox-angular-universal-starter","last_synced_at":"2025-10-01T23:30:44.839Z","repository":{"id":57243302,"uuid":"92573749","full_name":"patrickmichalina/fusebox-angular-universal-starter","owner":"patrickmichalina","description":"Angular Universal seed project featuring Server-Side Rendering, @fuse-box bundling, material, firebase, Jest, Nightmare, and more","archived":true,"fork":false,"pushed_at":"2019-09-06T12:56:05.000Z","size":3512,"stargazers_count":132,"open_issues_count":1,"forks_count":30,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-11-19T06:18:50.517Z","etag":null,"topics":["angular","angular-universal","angular2","angular4","angular5","angularjs","brotli","fuse-box","fusebox","gzip","meta-tags","scss","seed","seo","social"],"latest_commit_sha":null,"homepage":"https://angular.patrickmichalina.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patrickmichalina.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-27T05:38:17.000Z","updated_at":"2024-08-01T13:16:18.000Z","dependencies_parsed_at":"2022-09-13T03:10:14.457Z","dependency_job_id":null,"html_url":"https://github.com/patrickmichalina/fusebox-angular-universal-starter","commit_stats":null,"previous_names":[],"tags_count":85,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickmichalina%2Ffusebox-angular-universal-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickmichalina%2Ffusebox-angular-universal-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickmichalina%2Ffusebox-angular-universal-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickmichalina%2Ffusebox-angular-universal-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patrickmichalina","download_url":"https://codeload.github.com/patrickmichalina/fusebox-angular-universal-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234909086,"owners_count":18905504,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-universal","angular2","angular4","angular5","angularjs","brotli","fuse-box","fusebox","gzip","meta-tags","scss","seed","seo","social"],"created_at":"2024-09-27T17:21:00.021Z","updated_at":"2025-10-01T23:30:44.377Z","avatar_url":"https://github.com/patrickmichalina.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"## This project is archived and an improved version has been moved to [https://github.com/patrickmichalina/fusing-angular](https://github.com/patrickmichalina/fusing-angular)\n\n# Introduction\n\n[![CircleCI](https://circleci.com/gh/patrickmichalina/fusebox-angular-universal-starter.svg?style=shield)](https://circleci.com/gh/patrickmichalina/fusebox-angular-universal-starter)\n[![codecov](https://codecov.io/gh/patrickmichalina/fusebox-angular-universal-starter/branch/master/graph/badge.svg)](https://codecov.io/gh/patrickmichalina/fusebox-angular-universal-starter)\n[![dependencies Status](https://david-dm.org/patrickmichalina/fusebox-angular-universal-starter/status.svg)](https://david-dm.org/patrickmichalina/fusebox-angular-universal-starter)\n[![devDependencies Status](https://david-dm.org/patrickmichalina/fusebox-angular-universal-starter/dev-status.svg)](https://david-dm.org/patrickmichalina/fusebox-angular-universal-starter?type=dev)\n[![Greenkeeper badge](https://badges.greenkeeper.io/patrickmichalina/fusebox-angular-universal-starter.svg)](https://greenkeeper.io/)\n[![Angular Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://angular.io/styleguide)\n[![Fusebox-bundler](https://img.shields.io/badge/gitter-join%20chat%20%E2%86%92-brightgreen.svg)](https://gitter.im/fusebox-angular-universal-starter/Lobby)\n\nProvides an extremely fast seed project for the development of Angular Universal (isomorphic) projects. Check out the [live app](https://angular.patrickmichalina.com)\n\n# Project Goals\nThis starter project is designed to get a basic application up and running with basic implementations of core features most applications need. It uses [Firebase](https://firebase.google.com) for the authentication and the database layers.\n\nNote: 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.\n\n# Features\n- [x] [Angular](https://github.com/angular/angular/blob/master/CHANGELOG.md) as the application framework\n- [x] [Angular Material](https://material.angular.io) as the UI language and component library\n- [x] [Angular Flex Layout](https://github.com/angular/flex-layout) for dynamic responsive layouts\n- [x] [FuseBox](http://fuse-box.org) as the TypeScript/JavaScript bundler\n- [x] [Jest](https://facebook.github.io/jest) for unit and component testing\n- [x] [Nightmare](https://github.com/segmentio/nightmare) for UI testing\n- [x] [Sparky](http://fuse-box.org/page/sparky) as the task runner\n- [x] Fully typed build tools using [TypeScript](https://www.typescriptlang.org)\n- [x] Production and development builds\n- [x] Manage your type definitions using [@types](https://www.npmjs.com/~types)\n- [x] Simple [Heroku](https://www.heroku.com) Deployment\n- [x] HttpStateTransfer for caching server responses on client boostrap (no flickering)\n- [x] CDN asset configuration\n- [x] Automatic sitemap generation\n- [x] [SCSS](http://sass-lang.com) support for professional grade CSS management\n- [x] [Brotli compression](https://github.com/google/brotli) with [gzip](http://www.gzip.org) fallback\n- [x] [CircleCI](https://circleci.com) unit testing support \n- [x] Full favicon icon generation for multiple devices derived from a single seed image\n- [x] SEO support for Title and Meta tags\n- [x] OG (Open Graph) tags for social sharing\n- [x] Simple Ad-Blocker detection service\n- [x] Vendor-agnostic analytics using [angulartics2](https://github.com/angulartics/angulartics2)\n- [x] Generic token based Authentication service with [JWT](https://jwt.io) cookie support.\n- [x] Both Client and Server build tasks\n- [x] Hot Module Reloading for faster browser reloads during client development\n- [ ] [Ahead-of-Time](https://angular.io/guide/aot-compiler) (AOT) compilation support\n- [x] [angular-tslint-rules](https://github.com/fulls1z3/angular-tslint-rules) as configuration preset for [TSLint](https://github.com/palantir/tslint) and [codelyzer](https://github.com/mgechev/codelyzer).\n- [x] Automatic static file cache invalidation\n- [x] [Lazy Loaded](https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html) modules\n- [x] Analyze bundle sizes by using [source-map-explorer](https://github.com/danvk/source-map-explorer)\n- [x] Support for [Angular Mobile Toolkit](https://mobile.angular.io) (Service Worker)\n- [x] [Tree-Shaking](https://angular.io/guide/aot-compiler) for production builds\n\nBuilt by [AngularUniversal.com](https://www.angularuniversal.com). For additional help please checkout our [services](https://www.angularuniversal.com/services)\n\n# Quick Start\n\n**Note that we strongly recommend node \u003e= v7.0.0 and npm \u003e= 4.0.0.**\n\nTo start the seed use:\n\n\n```bash\n$ git clone --depth 1 https://github.com/patrickmichalina/fusebox-angular-universal-starter\n$ cd fusebox-angular-universal-starter\n\n# Add Firebase Admin values to your project\n# in a \".env\" file for local deveopment\n# in environment variables for other environments\nSee [Environment Variables](#environment-variables)\n\n# install the project's dependencies\n$ npm install\n\n# start the Angular Universal server\n$ npm start\n\n# start the server while watching tests and updating app documentation\n$ npm run start.deving\n\n# start the Angular Universal server w/ AOT build step\n$ npm run start.aot\n# can also be called passing the parameter --aot\n# npm start --aot\n\n# start the application in Client only mode (not server driven), with HMR enabled\n$ npm run start.spa\n\n# start the server in production mode\n$ npm run start.prod\n\n```\n\n# Table of Contents\n* [Testing](#testing)\n* [Configuration](#configuration)\n* [Environment Variables](#environment-variables)\n* [@Types](#types)\n* [File Structure](#file-structure)\n* [Change Log](#change-log)\n* [License](#license)\n\n# Bundling\nCheckout how blazing fast bundling can be using FuseBox!\n\n![fuse-box](https://thumbs.gfycat.com/WarmheartedUnfinishedHind-small.gif)\n\n# Testing\n```bash\n# single test run\n$ npm test \n\n# single test with coverage results\n$ npm run test.coverage\n\n# continuous testing\n$ npm run test.watch\n\n# e2e testing (primarilly for CI builds)\n$ npm run test.e2e.ci\n\n# continuous e2e testing\n$ npm run test.e2e.watch\n```\n\n![jest](https://thumbs.gfycat.com/CooperativeMammothEland-small.gif)\n\n# Configuration\n```shell\nComing Soon\n```\n\n# @Types\nWhen you include a module that doesn't include typings, you can include external type definitions using the npm @types repo.\n\ni.e, to have youtube api support, run this command in terminal: \n```shell\nnpm i -D @types/youtube @types/gapi @types/gapi.youtube\n``` \n\n# Environment Variables\n\n```bash\n# it is important to set the following environmental variables on your CI server (examples below)\nHOST : angular.patrickmichalina.com # the root origin of your application server\nCI : true \n\n# for Heroku Builds\nHEROKU : true # to build on heroku, ssl settings are setup using this flag\nNPM_CONFIG_PRODUCTION : false # to download all depenedencies on Heroku, including devDependencies\n\n# Firebase Admin SDK\nFB_SERVICE_ACCOUNT_PRIVATE_KEY_ID: Some_Secret\nFB_SERVICE_ACCOUNT_PRIVATE_KEY: Some_Secret\nFB_AUTH_KEY: Some_Secret\n\n```\n\n## File Structure\nWe use the component approach in our starter. This is the standard for developing Angular apps and a great way to ensure maintainable code\n```\nfusebox-angular-universal-starter/\n ├──.fusebox/                       * working folder for the js bundler\n ├──.vscode/                        * Visual Studio Code settings \n ├──coverage/                       * stores recent reporting of test coverage\n ├──dist/                           * output files that represent the bundled application and its dependencies\n ├──node_modules/                   * project depdendencies\n |\n ├──src/\n |   ├──client/                     * client Angular code. (most your work should be done here)\n |   └──server/                     * server code\n |\n ├──tools/\n |   ├──config/\n |   |   ├──app.config.ts          * configuration interface for the web applications\n |   |   ├──build.config.ts        * configuration values for the build system\n |   |   ├──build.interfaces.ts    * configuration interfaces for the build system\n |   |   └──build.transformer.ts   * build system config transform helper\n |   |\n |   ├──env/\n |   |   ├──base.ts                * base app configuration \n |   |   ├──dev.ts                 * dev app configuration\n |   |   ├──**.ts                  * arbitrary configuration called via the flag --env-config\n |   |   └──prod.ts                * production app configuration\n |   |\n |   ├──scripts/                   * misc. build helper scripts\n |   ├──tasks/                     * Sparky tasks\n |   ├──test/                      * testing system related configuration\n |   └──web/                       * static assets used for common web functions\n |\n ├──.gitignore                     * GIT settings\n ├──circl.yml                      * CirclCI configuration file\n ├──CODE_OF_CONDUCT.md             * standard code of conduct information\n ├──codecov.yml                    * codecov.io configuration file\n ├──CONTRIBUTING.md                * standard contributor information\n ├──fuse.ts                        * FuseBox entry point\n ├──LICENSE                        * software license\n ├──package-lock.json              * what npm uses to manage it's dependencies\n ├──package.json                   * what npm uses to manage it's dependencies\n ├──Procfile                       * Heroku deployment setting\n ├──README.md                      * project information\n ├──test-report.xml                * JUNIT test results\n ├──tsconfig-aot.json              * typescript config for AOT build using @angular-cli (ngc)\n └──tsconfig.json                  * typescript config\n```\n\n# Change Log\n\nYou can follow the [Angular change log here](https://github.com/angular/angular/blob/master/CHANGELOG.md).\n\n# License\n\n[MIT](https://github.com/patrickmichalina/fusebox-angular-universal-starter/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickmichalina%2Ffusebox-angular-universal-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrickmichalina%2Ffusebox-angular-universal-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickmichalina%2Ffusebox-angular-universal-starter/lists"}