{"id":13497049,"url":"https://github.com/voxmachina/angular2-boilerplate","last_synced_at":"2025-09-03T10:33:25.882Z","repository":{"id":148747889,"uuid":"42480199","full_name":"voxmachina/angular2-boilerplate","owner":"voxmachina","description":"An Angular 2+ boilerplate on steroids that achieves 100 top score on Google Page Speed","archived":false,"fork":false,"pushed_at":"2016-10-12T11:41:16.000Z","size":219,"stargazers_count":12,"open_issues_count":0,"forks_count":4,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-08T04:05:11.688Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://igeni.us","language":"PHP","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/voxmachina.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-09-14T22:17:56.000Z","updated_at":"2022-09-14T09:39:32.000Z","dependencies_parsed_at":"2023-05-28T20:15:09.184Z","dependency_job_id":null,"html_url":"https://github.com/voxmachina/angular2-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/voxmachina/angular2-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voxmachina%2Fangular2-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voxmachina%2Fangular2-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voxmachina%2Fangular2-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voxmachina%2Fangular2-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/voxmachina","download_url":"https://codeload.github.com/voxmachina/angular2-boilerplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voxmachina%2Fangular2-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273430547,"owners_count":25104481,"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","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-07-31T20:00:21.949Z","updated_at":"2025-09-03T10:33:25.857Z","avatar_url":"https://github.com/voxmachina.png","language":"PHP","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Angular2 boilerplate on steroids\n\nThis is an [Angular2](https://angular.io/) full project boilerplate on steroids!\n\nIt provides both frontend and a simple PHP backend REST API service to deliver the data which is being cached for two hours in the filesystem, the Docker image provides everything you'll need to develop locally, so no crazy LAMP installations will occur.\n\nThe steroids component is the speed and optimizations already done for you, by using several mechanisms which includes the [Angular AoT compilation mechanism](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) also but not only and all managed through [Gulp](http://gulpjs.com/) tasks.\n\nLatest performance results from [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)\n\n![My image](https://voxmachina.github.io/img/boilerplate_gstatus.png)\n\nLatest performance results from [WebPageTest](https://www.webpagetest.org/)\n\n![My image](https://voxmachina.github.io/img/boilerplate_pstatus.png)\n\nThe live version of this boilerplate it's actually my own personal website at: http://igeni.us, so feel free to test it for yourself ;)\n\n## About\n\nThis implements a simple personal website with three pages, reading content from json endpoints from Medium, Instagram and Github; then there's an about page and a contacts page.\n\nThe front-end section is build with Angular2, the back-end uses PHP to deliver the results and also cache them locally, also provides all the necessary .htaccess files and rules to make the app work properly.\n\nThe project uses a series of methods and mechanisms to achieve top performance and speed, and all is manageable through simple Gulp tasks; the only more complex task is the task that performs the Angular AoT compilation mechanism which replaces the app entry code by updating some imports, it was a hacky solution to achieve conditional imports because that is something that Typescript does not support.\n\nAnother complex mechanism is added as a task also to deliver a first version of the content for the above-the-fold target, which basically transforms index.html into an index.php with the top menu bar and only loads through PHP the Medium feed, a barely perceived difference on good connections, but on slow connections it makes all the difference between someone leaving your site or start reading something right away and staying for more. \n\nYou can read all about this project story on [Medium](https://medium.com/dinomad/angular2-boilerplate-on-steroids-86dcf7390542#.8ekof7gjh)\n\n## Dependencies\n\n- [Node v6+](https://nodejs.org/en/)\n- [Docker](https://www.docker.com/)\n- [Composer](https://getcomposer.org/)\n- [Gulp](http://gulpjs.com/)\n\n\n\n## Installation\n\n- `npm install`\n- navigate to: api/www/services/content and do `composer install`\n\n\n\n## Configuration\n\n- gulp.json\n  - `cp config/gulp.example.json config/gulp.json`\n  - Fill in your details:\n    - ssh for later deploy usage to your server\n    - googleKey for analytics site ID ([the first part of the html file](https://support.google.com/webmasters/answer/35179?hl=en))\n    - cloudfare credentials ([signup now for the free plan](https://www.cloudflare.com/plans/))\n- .env\n  - `cp api/www/services/content/.env.example api/www/services/content/.env`\n  - Your [Instagram API credentials](https://bobmckay.com/web/simple-tutorial-for-getting-an-instagram-clientid-and-access-token/) if you plan to use it\n\n## Servers\n\n- `npm start` , starts the front-end server, be sure to have a build first with `gulp build`\n- Configure your back-end server:\n  - Navigate to api folder and do: `docker build -t ngboilerplate .` to build the image, you only need to do this once, be sure to configure the start script also included in the api folder and [start your docker service](https://docs.docker.com/engine/admin/).\n  - Configure your shared folder path both in api/start script\n  - `sh api/start` , starts the back-end server\n\n\n\n## Tasks\n\n- `gulp build`\n  - Task to perform to do a simple build and test the site with `npm start` afterwards\n- `gulp dev`\n  - Task to be used while developing\n- `gulp stage`\n  - Task to test your build before deploying\n- `gulp deploy`\n  - Task to deploy a new release to your server, creating a new symlink and keeping older versions for a rollback if needed\n\n\n\n## License\n\nMIT\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoxmachina%2Fangular2-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvoxmachina%2Fangular2-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoxmachina%2Fangular2-boilerplate/lists"}