GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → Ks89 → angular-cli-skeleton

Ks89 / angular-cli-skeleton

Licence: MIT license
angular-cli skeleton to quickly start a new project with advanced features and best practices. All features are described in README.md.

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects
shell
77523 projects
Dockerfile
14818 projects

Labels

reduxnodejssasstemplatecoverageangularskeletonserviceworkerngrxtestkarmaprotractorbootstrap4starterivye2eng-bootstrapangular-universalappshellangular9

Projects that are alternatives of or similar to angular-cli-skeleton

angular-webpack-skeleton
This project is deprecated. Please refer to https://github.com/Ks89/angular-cli-skeleton
Stars: ✭ 16 (-50%)
Mutual labels:  test, protractor, bootstrap4, starter, e2e, ng-bootstrap
Angular Webpack Starter
A complete Angular 6 and Webpack 4 starter seed with minimal and full featured branches. Full featured branch includes: Material Design 2 (Bootstrap 4 branch available as well), @ngrx, HMR, DLLs and optional use of Universal for server-side rendering - Supports AOT (offline) compilation, sync and lazy loading. Karma/Protractor for e2e/unit tests.
Stars: ✭ 911 (+2746.88%)
Mutual labels:  ngrx, karma, protractor, starter
material2-admin
Angular - Material2 - Redux - Flex - Admin Example - Starter
Stars: ✭ 13 (-59.37%)
Mutual labels:  ngrx, starter
angular5-starter
⭐ An Angular5 Starter Kit :: Router, HttpClient, Forms, Services, Dev/Prod, HMR, Async/Lazy Routes and a very good structure for large applications by @naologic
Stars: ✭ 54 (+68.75%)
Mutual labels:  bootstrap4, starter
jest-retry
Jest retry pattern for flaky E2E tests
Stars: ✭ 36 (+12.5%)
Mutual labels:  test, e2e
Devel Cover
Code coverage metrics for Perl
Stars: ✭ 91 (+184.38%)
Mutual labels:  coverage, test
Moderncppstarter
🚀 Kick-start your C++! A template for modern C++ projects using CMake, CI, code coverage, clang-format, reproducible dependency management and much more.
Stars: ✭ 2,381 (+7340.63%)
Mutual labels:  coverage, starter
cookiecutter-go
boilerplate, golang project starter tool, support go-zero/go-micro/gin
Stars: ✭ 63 (+96.88%)
Mutual labels:  skeleton, starter
Istanbul Instrumenter Loader
Istanbul Instrumenter Loader
Stars: ✭ 272 (+750%)
Mutual labels:  coverage, karma
angular-admin-panel
An Angular Admin boilerplate to quickly scaffold any large scale enterprise application.
Stars: ✭ 18 (-43.75%)
Mutual labels:  ngrx, karma
protractor-cli
🎯 An Interactive command line interface & config helper for Protractor.js !
Stars: ✭ 14 (-56.25%)
Mutual labels:  protractor, e2e
very good performance
Utility on top of the Flutter Driver API that facilitates measuring the performance of your app in an automated way created by Very Good Ventures 🦄
Stars: ✭ 78 (+143.75%)
Mutual labels:  test, e2e
Kahlan
✔️ PHP Test Framework for Freedom, Truth, and Justice
Stars: ✭ 1,065 (+3228.13%)
Mutual labels:  coverage, test
Gogradle
A Gradle Plugin Providing Full Support for Go
Stars: ✭ 712 (+2125%)
Mutual labels:  coverage, test
Alsatian
TypeScript testing framework with test cases
Stars: ✭ 244 (+662.5%)
Mutual labels:  coverage, test
Shellspec
A full-featured BDD unit testing framework for bash, ksh, zsh, dash and all POSIX shells
Stars: ✭ 375 (+1071.88%)
Mutual labels:  coverage, test
cover.run
Code coverage
Stars: ✭ 34 (+6.25%)
Mutual labels:  coverage, test
testing-angular-applications
Project for the Testing Angular Applications book
Stars: ✭ 99 (+209.38%)
Mutual labels:  karma, protractor
pytest-coverage-comment
Comments a pull request with the pytest code coverage badge and full report
Stars: ✭ 32 (+0%)
Mutual labels:  coverage, test
rollup-plugin-istanbul
Seamless integration between Rollup and Istanbul
Stars: ✭ 39 (+21.88%)
Mutual labels:  coverage, karma
View All Similar Projects ➔

Travis Build AppVeyor Build CircleCI Build

vulnerabilities Greenkeeper badge FOSSA Status Code Climate CodeClimate Coverage Coveralls Coverage

GitHub release GitHub (pre-)release

Donate

Do you like angular-cli-skeleton? Please, add a 'star' to support this library


angular-cli-skeleton

A simple ready to use skeleton project with angular-cli (optionally also angular-universal), Angular 9, Bootstrap 4, ng-bootstrap, ngrx-store and so on.

This project my previous older skeleton project called angular-webpack-skeleton.

If you like it, please add a star. It will be really appreciated.

Features

News

  • ??/11/2019 - COMING SOON!!! - 1.0.0 - Check HERE
  • 04/03/2018 - 1.0.0-beta.2 - Check HERE
  • 01/06/2018 - 1.0.0-beta.1 - Check HERE

Changelog

Full changelog HERE

File structure

This reduced structure is based on Angular style-guide and on my personal experience. For the full file structure check HERE.

angular-cli-skeleton/
 ├─.circleci/                     * circle ci 2 config folder (is a CI service  free for open source projects)
 ├─e2e/                           * end-to-end tests with Protractor
 │ ├─src                          * end-to-end test files
 │ │ ├─app.e2e-spec.ts              * e2e test for the main page
 │ │ └─app.po.ts                    * e2e page oject for home page
 │ ├─protractor.config.js         * protractor config file for e2e testing
 │ ├─protractor-ci.config.js      * protractor config file for e2e testing in  Continous Integration
 │ └─tsconfig.ts                  * config file for typescript when running  e2e tests
 │
 ├─servers/                       * server-side implementations to manage  authentication
 │ ├─node-express-js              * NodeJS with ExpressJS Javascript  implementation
 │ ├─node-express-js              * NodeJS with ExpressJS Typescript  implementation
 │ └─node-koa-js                  * NodeJS with KoaJS Javascript implementation
 │
 ├─src/                           * main source folder
 │ ├─app/                         * source folder of 'app' SPA
 │ │ ├─app-shell/                 * app-shell folder (STILL UNUSED)
 │ │ │
 │ │ ├─core/                      * CoreModule provides services. You can  import this module only on time in the root module
 │ │ │ ├─actions/                 * folder of ngrx actions
 │ │ │ │ └─hello-example.actions  * hello-example ngrx action
 │ │ │ ├─reducers/                * folder of ngrx reducers
 │ │ │ │ └─hello-example.reducers * hello-example ngrx reducer
 │ │ │ ├─services/                * services of the CoreModule
 │ │ │ │ ├─auth-guard.service.ts  * AuthGuard to check authentication on  Angular routes
 │ │ │ │ ├─auth.service.ts        * authentication service with login, logout  and so on
 │ │ │ │ ├─example.service.ts     * example of a service that call an  authenticated api called /secret
 │ │ │ │ ├─github.service.ts      * example of a service with HttpClient that  call github.com
 │ │ │ │ └─services.ts            * export an array of services to easely  import into the module's definition
 │ │ │ ├─core.module.ts           * definition of the CoreModule
 │ │ │ └─module-import-guard.ts   * guard to prevent multiple import of the  CoreModule
 │ │ │
 │ │ ├─pages/                     * pages/features of the 'app' SPA
 │ │ │ ├─404/
 │ │ │ │ └─not-found.component.ts * 404 component shown for route '**'
 │ │ │ ├─home/
 │ │ │ │ ├─home.component.ts      * homepage component shown for route '/'
 │ │ │ │ ├─home.html              * homepage template
 │ │ │ │ └─home.scss              * homepage scss file with local styles
 │ │ │ ├─lazy/                    * lazy loaded module shown for route 'lazy'
 │ │ │ │ ├─actions/               * ngrx actions only for this lazy loaded  module
 │ │ │ │ │ └─page-num.actions     * page-num ngrx action
 │ │ │ │ ├─reducers/              * ngrx reducers only for this lazy loaded  module
 │ │ │ │ │ ├─index.ts             * main file of all reducers of this lazy  loaded module
 │ │ │ │ │ └─page-num.reducers    * page-num ngrx reducer
 │ │ │ │ ├─lazy.component.spec.ts * unit test of lazy loaded component
 │ │ │ │ ├─lazy.component.ts      * lazy loaded component
 │ │ │ │ ├─lazy.html              * template of the lazy loaded component
 │ │ │ │ ├─lazy.module.ts         * definition of the lazy loaded module
 │ │ │ │ ├─lazy.routes.ts         * local routes for the lazy loaded module
 │ │ │ │ └─lazy.scss              * lazy loaded module's scss file with local  styles
 │ │ │ profile/
 │ │ │ │ ├─profile.component.ts   * profile page with a call to a protected  api (authenticated api with JWT). Is also contains font-awesome and ng- bootstrap examples.
 │ │ │ │ ├─profile.html           * profile template
 │ │ │ │ └─profile.scss           * profile scss file with local styles
 │ │ │ ├─sw/
 │ │ │ │ ├─sw.component.ts        * service-worker component shown for route '/ sw'
 │ │ │ │ ├─sw.html                * service-worker template
 │ │ │ │ └─sw.scss                * service-worker scss file with local styles
 │ │ │ └─components.ts            * export an array of components to easely  import into the module's definition
 │ │ │
 │ │ ├─reducers/                  * define main ngrx reducer for the app SPA
 │ │ │
 │ │ ├─shared/                    * SharedModule provides common components,  directives... It can be imported more times also by sub-modules
 │ │ │ ├─components/              * components of the SharedModule
 │ │ │ │ ├─footer/                * footer component
 │ │ │ │ ├─navbar/                * navbar componet
 │ │ │ │ ├─page-header/           * page header component
 │ │ │ │ └─components.ts          * export an array of components to easely  import into the module's definition
 │ │ │ └─shared.module.ts         * definition of the SharedModule
 │ │ │
 │ │ ├─app-routing.module.ts      * routes module of the app SPA
 │ │ ├─app.component.html         * main template's component of the  application
 │ │ ├─app.component.scss         * scss file for the main component of the  application
 │ │ ├─app.component.ts           * main component of the application
 │ │ ├─app.module.ts              * root module of the application (browser- side)
 │ │ └─app.server.module.ts       * root module of the application (server- side)
 │ │
 │ ├─assets/                      * images, icons and other stuff
 │ │
 │ ├─environments/                * folder loaded by angular cli depending on  dev, prod...
 │ │ ├─environment.hmr.ts         * environment file for development with hmr
 │ │ ├─environment.prod.ts        * environment file for production
 │ │ └─environment.ts             * environment file for development without  hmr
 │ │
 │ ├─locale/                      * localization file with all translations (english and italian only to do an example of i18n)
 │ │
 │ ├─theme/                       * folder with a custom theme in scss
 │ │
 │ ├─_variables.scss              * file with scss variables to customize  bootstrap and to import fonts from third-party deps
 │ ├─browserconfig.xml            * config file for microsoft applications
 │ ├─favicon.png                  * application's icon
 │ ├─hmr.ts                       * file to init HMR ir running with hrm  enabled
 │ ├─index.html                   * index file of this application
 │ ├─main.server.ts               * main file to boot this applcation on  server-side with angular-universal
 │ ├─main.ts                      * main file to boot this applcation on  browser-side (client)
 │ ├─manifest.webmanifest         * web manifest
 │ ├─polyfills.ts                 * polyfills used by Angular to support older  browsers
 │ ├─styles.scss                  * main scss file to define global styles
 │ ├─test.ts                      * test config file to load .spec.ts files
 │ └─tslint.json                  * tslint config file
 │
 ├─angular-cli.json               * angular-cli config file
 ├─browserslist                   * file to configure which browsers are supported by this application
 ├─karma.conf.js                  * karma config file for unit testing
 ├─ngsw-config.json               * Service Workers config file
 ├─proxy.conf.json                * proxy configuration for angular-cli when using 'npm start'
 ├─server.ts                      * NodeJs server to enable Server Side Rendering
 ├─static.paths.ts                * array with paths used by server.ts for Server Side Rendering
 ├─tsconfig.app.json              * typescript's config file for the application (browser-side)
 ├─tsconfig.json                  * generasl typescript's config file
 ├─tsconfig.server.json           * typescript's config file for the application (server-side)
 ├─tsconfig.spec.json             * typescript's config file for unit testing
 ├─tslit.json                     * TSLint config file
 └─webpack.server.conf.js         * webpack config file to build server-side (angular-universal)

Requirenments

  • Nodejs >= 12.0.0 (please use always the latest version)
  • npm >= 6.9.0 (please use always the latest version)

What you can do right now?

  • build and run the front-end of this project with angular-cli, but authentication won't work (obviously, because It needs a server)
  • build this project and run it with one of the two servers in ./servers (authentication is working!!!)
  • build and run this project with angular-universal (authentication not supported yet - COMING SOON)

This is a 'work in progress' project, so if you need other info, please open an issue. At the moment, documentation and README are minimalistic.

Install

Install global dependencies

  • npm install -g http-server

Install local dependencies

  1. npm install (from the folder of this project)
  2. cd servers/node-express-js && npm install
  3. cd servers/node-express-ts && npm install
  4. cd servers/node-koa-js && npm install

Build

Useful commands to build the front-end without to run the server-side

npm run deploy is the recommended command

Build client app in 'dist' folder (dev + AOT) without i18n

  • npm run build:dev

Build client app in 'dist' folder (prod + AOT + build-optimizer) without i18n

  • npm run build:prod

Build both client and server apps in 'dist' folder (prod + AOT + build-optimizer + angular-universal) without i18n

  • npm run build:ssr

At the moment I didn't add authentication to the SSR server

Deploy client app with i18n support in all servers public folders (prod + AOT + build-optimizer + i18n) [recommended]

  • npm run deploy

Run (WITHOUT server-side) [not recommended]

Build and run development server with HMR (dev + AOT)

  • npm start

Run client app previously built in 'dist' folder WITHOUT i18n

  • cd dist/client
  • http-server
  • access to localhost:8080

Run client app previously built in 'dist' folder WITH i18n

  • cd dist
  • http-server
  • access to localhost:8080/en or localhost:8080/it

Run client app previously built in 'dist' folder (angular-universal) WITHOUT i18n

  • npm run serve:ssr

Run (WITH server-side and all authentication features) [recommended]

Build and run vanilla javascript express server with authentication feature

  1. npm run deploy
  2. cd servers/node-express-js && npm start

Build and run typescript express server with authentication feature

  1. npm run deploy
  2. cd servers/node-express-ts && npm start

Build and run javascript koa server with authentication feature

  1. npm run deploy
  2. cd servers/node-koa-js && npm start

Test

Test (check coverage/html/index.html with the results)

  • npm test

Test e2e with protractor

  • npm run webdriver:update (if you have problems, try again removing ./node_modules and executing npm install again)
  • npm run e2e

Docs

To generate documentation with typedocs and compodoc (check docs folder index.html files for the result)

  • npm run docs

Others

Clean all

  • npm run clean

Bundle analyzer

  • Run either npm run build:dev:stats or npm run build:prod:stats
  • Open analyzer with npm run analyze to see the result

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

To deploy with a custom path, please check here: https://angular.io/guide/deployment

For other questions, please feel free to open an issue.

I'm open to contributions and pull requests.

License

MIT License

Copyright (c) 2017-2019 Stefano Cappa

This license is valid to all my files in this repo

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


If you like my projects you can do a free donation here Donate

FOSSA report

FOSSA Status


Created by Stefano Cappa

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].