{"id":20170251,"url":"https://github.com/fabrix-app/fabrix-ng","last_synced_at":"2025-07-12T01:35:13.266Z","repository":{"id":38695990,"uuid":"208883829","full_name":"fabrix-app/fabrix-ng","owner":"fabrix-app","description":"Bobbin: Fabrix for Angular","archived":false,"fork":false,"pushed_at":"2022-06-02T23:47:08.000Z","size":1028,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-13T15:27:26.906Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/fabrix-app.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":"2019-09-16T19:44:00.000Z","updated_at":"2019-09-16T19:44:08.000Z","dependencies_parsed_at":"2022-08-27T20:21:11.604Z","dependency_job_id":null,"html_url":"https://github.com/fabrix-app/fabrix-ng","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabrix-app%2Ffabrix-ng","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabrix-app%2Ffabrix-ng/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabrix-app%2Ffabrix-ng/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabrix-app%2Ffabrix-ng/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fabrix-app","download_url":"https://codeload.github.com/fabrix-app/fabrix-ng/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241605820,"owners_count":19989612,"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":[],"created_at":"2024-11-14T01:18:02.081Z","updated_at":"2025-03-03T04:15:57.212Z","avatar_url":"https://github.com/fabrix-app.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgFabrix\n\n[![Build status][ci-image]][ci-url]\n\n## Fabrix and NgFabrix\nNgFabrix helps you boot Fabrix in an Angular Application so that you can build isomorphic applications!\n\n## Configuration\n### .angular-cli.json\nYou will need to update the cli to use the NgFabrix config by modifying your `.angular-cli.json` file.\n```\n...\n\"environmentSource\": \"appConfig/environment.ts\",\n\"environments\": {\n  \"dev\": \"appConfig/environment.ts\",\n  \"staging\": \"appConfig/env/staging/index.ts\",\n  \"testing\": \"appConfig/env/testing/index.ts\",\n  \"prod\": \"appConfig/env/production/index.ts\"\n}\n...\n```\n\nNext you will need import the module and add a new provider.\nNgFabrix exposes an injection token that can be used to provide configuration.\n\n```ts\n//app.module.ts\n...\nproviders: [\n  {\n    provide: ENGINE_CONFIG,\n    useValue: {\n      appConfig: appConfig\n    }\n  }\n],\n...\n```\n\n## Anatomy of an NgFabrix\n- index.ts\n- package.json\n- *.router.ts\n- *.module.ts\n- *.module.spec.ts\n- config\n  - index.ts\n  - *.ts\n\n## appConfig\nYou can do this almost exactly as you would with Fabrix, but here's an example:\n\nAngular configuration can be very strange at times and this leads to many developers just hard coding variables when they should be configurable. NgFabrix solves this by providing an environment driven approach to configuration and uses the Map functionality of ES6 and the Tuple Space by using Fabrix in the browser!\n\n### index.ts\nThe index barrel exports the configuration\n\n### main.ts\nMain exports the spools.\n\n### environment.ts \n```js\nexport const environment = {\n  development: true,\n  staging: false,\n  testing: false,\n  production: false,\n  APP_BASE_HREF: 'http://localhost:3000'\n}\n```\n\n### env\nExports the environment specific configuration.\n\nStructure:\n - testing\n   - index.ts\n - staging\n   - index.ts\n - production\n   - index.ts\n   \nThe index barrel of the any env must specify the environments and whether they are true or false just like the environment.ts file. In addition, you can specify spool overrides!\n\n```js\n// staging/index.ts\nimport { app } from './app'\nexport const environment = {\n  development: false,\n  staging: true,\n  testing: false,\n  production: false,\n  app: app\n}\n``` \n  \n# Example\nLet's say you have an app component, and you want to set some environment specific values, and that you also want to be able to share those values between different components, even if they are lazy loaded. Normally you would need to create some sort of service, do a bunch of injection and pray that you did it right.\n\nWith NgFabrix, you set up your configuration for your component and then you can access it any other component through NgFabrixService.\n\n```ts\nngService.config.get('app.title')\n```\n\nThrough NgService you have access to the config method.  Using dot syntax, you can ask the service for a value that may or may not exists with ease and confidence. So instead of something like:\n```ts\n// NOT SO GOOD\nif (app \u0026\u0026 app.metadata \u0026\u0026 app.metadata.page1 \u0026\u0026 app.metadata.page1.title)\n```\n\nYou can just query the config map:\n```ts\n// GOOD\nif (ngService.config.get('app.metadata.page1.title'))\n``` \n\nIn addition, you can set default configs in your spools and then override them through `appConfig/\u003cspool-name\u003e.ts` and additionally set overrides those based on your environment through `appConifg/env/\u003cenvironment\u003e/\u003cspool-name\u003e.ts`, just like you would on a Fabrix app!\n\n# Configuring your Application\n\n## Fabrix\nFor Fabrix documentation see the [Fabrix Website](https://fabrixjs.io).  The only difference is that we are extending fabrix with Typescript and bundling it with webspool. You can configure Fabrix through `src/apiConfig`.\n\n## Angular\nFor Angular documentation see the [Angular Website](https://angular.io).  You can configure your NgFabrix Angular app through `src/appConfig`.\n\n# Development\n\n## Fabrix server\nrun `npm run build \u0026\u0026 node dist/server.js` for the fabrix server to start. Navigate to `http://localhost:3000/`\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\nRun `npm start` for a dev server that expects the API server at `http://localhost:3000`.  \n\n## Code scaffolding\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Quick Build\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.\n\nAlternatively run `npm run build`. The build artifacts will be stored in the `dist/` directory.\n\n## Production Build\nRun `npm run serve:prod:ngsw` for a production build with Service Workers and PWA. To just build the service worker build, run `npm run build:prod:ngsw` and then start it with `node dist/server`\n\nRun `npm run build:prod` for a production build. The build artifacts will be stored in the `dist/` directory. To start the server run `node dist/server`.\n\n## Running CI tests\nRun `npm test` to execute the unit test, end to end tests, and mocha spec test for node.js.\n\n## Running unit tests\nRun `ng test` or `npm run test:ng` to execute the unit tests via [Karma](https://karma-runner.github.io). To continuously run unit tests, run `npm run test:ng:watch`\n\n## Running end-to-end tests\nRun `ng e2e` or `npm run test:e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).\n\n## Deploying to Heroku\nFirst you will need to create a Heroku app. The package.json includes a \"heroku-postbuild\" script that will build the app. The Procfile includes the location to start the node server which will serve the app on Heroku.\n\n## Known Issues\nThe Fabrix REPL (spool-repl) includes some characters that production webspool builds (`webspool -p`) can not parse and fails during the uglify process.  Currently, we use the normal webpack build which is faster but has a larger slug. If you can fix this, we would love a PR!\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).\n\n[ci-image]: https://img.shields.io/circleci/project/github/fabrix-app/spool-ng/master.svg\n[ci-url]: https://circleci.com/gh/fabrix-app/spool-ng/tree/master\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabrix-app%2Ffabrix-ng","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffabrix-app%2Ffabrix-ng","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabrix-app%2Ffabrix-ng/lists"}