This project it deprecated, because replaced by angular-cli-skeleton

Thank you for the interest and for all the stars. I hope to see all of you in angular-cli-skeleton

angular-webpack-skeleton

A simple skeleton project with Angular 5, Webpack 3 and Bootstrap 4 beta ready to use.

Experimental Angular 5 support. If you need a more stable release of this project and Angular 4 with all features described in this README, please check beta.10 HERE

You can fork or clone this repository and build your project on it. I suggest to add this repo as git remote to your repository to be able to update your project with newer releases of this project.

Features

• Typescript 2
• Angular 5
  • Ahead of Time (AOT)
  • Lazy loading
  • The new HttpClient of Angular >= 4.3
• Bootstrap 4, ng-bootstrap, bootstrap-loader
• Font-awesome
• jQuery
• Reactive storage
  • @ngrx/store >= 4
  • @ngrx/store-devtools >= 4
• ServiceWorker and AppCache support to create an Offline application
• Webpack 3
  • 3 profiles: 'dev', 'prod' and 'prod:aot'
  • Hot Module Replacement (HMR)
  • Dynamically Linked Library (DLL)
  • Tree shaking
  • SASS support
  • Multiple entry point with 2 SPAs (Single Page Applications): app and admin
  • UglifyJs and Compression plugin for production builds
  • Bundle Analyzer
  • Visualizer Plugin
• Testing
  • Unit testing with Karma and Jasmine
  • End to end (E2E) testing with Protractor and WebDriver JS
  • Code coverage with IstanbulJs
• Code analysis and quality
  • TSLint
  • Codelyzer
• Documentation
  • TypeDoc
  • Compodoc
• Continous Integration
  • Travis CI
  • Circle CI
  • AppVeyor
  • SonarQube on SonarCloud
• manifest.json support to add it as a standalone app on mobile devices
• and many more...

News

• 10/09/2017 - Beta 10 - Check HERE
• 10/07/2017 - Beta 9 - Check HERE
• 10/07/2017 - Beta 8 - Check HERE
• 10/06/2017 - Beta 7 - Check HERE
• 10/05/2017 - Beta 6 - Check HERE
• 09/22/2017 - Beta 5 - Check HERE
• 09/18/2017 - Beta 4 - Check HERE
• 09/17/2017 - Beta 3 - Check HERE
• 08/11/2017 - Beta 2 - Check HERE
• 08/10/2017 - Beta 1 - Check HERE
• 07/27/2017 - Alpha 21 - Check HERE
• 05/20/2017 - Alpha 20 - Check HERE
• 04/25/2017 - Alpha 19 - Check HERE
• 04/23/2017 - Alpha 18 - Check HERE
• 03/26/2017 - Alpha 17 - Check HERE
• 03/23/2017 - Alpha 16 - Check HERE
• 03/05/2017 - Alpha 15 - Check HERE
• 02/26/2017 - Alpha 14 - Check HERE
• 02/26/2017 - Alpha 13 - Check HERE
• 02/26/2017 - Alpha 12 - Check HERE
• 02/26/2017 - Alpha 11 - Check HERE
• 02/26/2017 - Alpha 10 - Check HERE
• 01/30/2017 - Alpha 9 - Check HERE
• 01/28/2017 - Alpha 8 - Check HERE
• 01/22/2017 - Alpha 7 - Check HERE
• 01/21/2017 - Alpha 6 - Check HERE
• 01/15/2017 - Alpha 5 - 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-webpack-skeleton/
 ├─assets/                        * Images, icons, manifest.json and so on
 ├─bootstrap/                     * bootstrap-loader configuration files
 │ ├─after.scss                   * this gets loaded after bootstrap/variables is loaded
 │ └─before.scss                  * this gets loaded before bootstrap/variables is loaded
 │
 ├─config/                        * config files
 │ ├─html-elements-plugin/        * webpack plugin to add css, icons... during the creation of html files
 │ ├─head-config.common.js        * list of files to be loaded by 'html-elements-plugin'
 │ ├─helpers.js                   * helper functions for configuration files
 │ ├─karma.conf.js                * karma config file for unit testing
 │ ├─karma-test-runner.js         * karma test-runner file for unit testing
 │ ├─protractor.conf.js           * protractor config for e2e tests
 │ ├─webpack.common.js            * common webpack config (for both dev and prod)
 │ ├─webpack.dev.js               * local developmet webpack config
 │ ├─webpack.prod.js              * production webpack config
 │ └─webpack.test.js              * testing webpack config
 │
 ├─e2e/                           * end-to-end tests with Protractor
 │ ├─app.e2e.ts                   * e2e test for the main page
 │ ├─home.e2e.ts                  * e2e test for home page
 │ └─home.e2e.ts                  * e2e test for service-worker page
 │
 ├─src/                           * main source folder
 │ ├─admin/                       * source folder of 'admin' SPA. Similar to 'app'
 │ │
 │ ├─app/                         * source folder of 'app' SPA
 │ │ ├─core/                      * CoreModule provides services. You can import this module only on time in the root module
 │ │ │ ├─actions/                 * folder of ngrx actions
 │ │ │ │ └─hello.example.ts       * hello-example ngrx action
 │ │ │ ├─reducers/                * folder of ngrx reducers
 │ │ │ │ └─hello.example.ts       * hello-example ngrx reducer
 │ │ │ ├─services/                * services of the CoreModule
 │ │ │ │ ├─example.service.ts     * example of a synchronous service
 │ │ │ │ ├─github.service.ts      * example of an asynchronous service with HttpClient
 │ │ │ │ └─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
 │ │ │ │ ├─reducers/              * ngrx reducers only for this lazy loaded module
 │ │ │ │ ├─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
 │ │ │ ├─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.component.ts           * main component of the app SPA
 │ │ ├─app.e2e.ts                 * example of an e2e test for 'app' SPA
 │ │ ├─app.html                   * main template's component of the app SPA
 │ │ ├─app.module.ts              * root module of the app SPA
 │ │ └─app.routing.ts             * routes of the app SPA
 │ │
 │ ├─styles/                      * root styles (CSS/SCSS) for the entire application (all SPAs)
 │ │ ├─headings.css               * css file (to show that you can use both css and scss)
 │ │ ├─loading.scss               * SCSS loading spinner
 │ │ ├─styles.scss                * main SCSS that imports all other SCSS in this directory (loading ad variables)
 │ │ └─variables.scss             * SCSS variables
 │ │
 │ ├─admin.aot.ts                 * main file to boot 'admin' SPA with AOT compiler
 │ ├─admin.ejs                    * admin template that will be converted into an html (admin SPA)
 │ ├─admin.ts                     * main file to boot 'admin' SPA
 │ ├─environmet.ts                * file to configure Angular debug/prod (don't touch this)
 │ ├─index.ejs                    * index template that will be converted into an html (app SPA)
 │ ├─main.aot.ts                  * main file to boot 'app' SPA with AOT compiler
 │ ├─main.ts                      * main file to boot 'app' SPA
 │ ├─polyfills.ts                 * polyfills used by Angular to support older browsers
 │ └─typings.d.ts                 * custom types for Typescript
 │
 ├─.bootstraprc                   * main bootstrap-loader config file
 ├─karma.conf.js                  * main karma config file for unit testing
 ├─protractor.config.js           * main protractor config file for e2e testing
 ├─sonar-project.properties       * Config file for SonarQube
 ├─tsconfig.json                  * Config file for Typescript
 ├─tsconfig-aot.json              * Config file for Typescript used by AOT compiler
 ├─tslit.json                     * TSLint config file
 └─webpack.conf.js                * main webpack config file

Requirenments

• Nodejs >= 7.10.0 (>= 8.3.0 recommended)
• npm >= 4.2.0 (>= 5.0.0 recommended)

Install

Install global dependencies

I created some scripts inside 'setup' folder to initialize the environment. If you are already ready, you can execute this (sudo if you are using macOS):

• npm install -g lite-server

Install local dependencies

• npm install

Build

Run with webpack-dev-server (developing mode)

• npm start

Build the application in 'dist' folder (debug mode)

• npm run build:dev
• cd dist
• lite-server

Build the application in 'dist' folder (production mode)

• npm run build:prod
• cd dist
• lite-server

Build the application in 'dist' folder (production + AOT mode)

• npm run build:prod:aot
• cd dist
• lite-server

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)
• npm run e2e

If you have problems with e2e testing, you should downgrade @types/jasmine to version 2.5.38.

Other

To generate typescript's documentation with typedocs (check docs/index.html for the result)

• npm run docs

To generate the really cool compodoc's documentation (check documentation/index.html for the result)

• npm run compodoc

To generate webpack bundle's results

• npm run build:dev (or build:prod or build:prod:aot)
• npm run analyze:bundle

To use webpack-visualizer-plugin

• npm run build:dev (or build:prod or build:prod:aot)
• open in your browser dist/webpack-visualizer-report.html

SonarQube support -a little bit experimental :)-

• download, install and configure both SonarQube and sonar-scanner on your local machine
• start your SonarQube server with ./<sonar-installation-folder>/bin/<your-operative-system>/sonar.sh start
• navigate to http://localhost:9000 to check if SonarQube is running (you should wait a couple of minutes)
• install this plugin https://github.com/Pablissimo/SonarTsPlugin/releases downloading the latest version of the .jar inside your <sonar-installation-folder>/extensions/plugins
• restart SonarQube with ./<sonar-installation-folder>/bin/<your-operative-system>/sonar.sh restart (you should wait a couple of minutes)
• add sonar-scanner-installation-folder to your PATH variable. This is different based on your OS and you should check how to do that by yourself
• check if you are able to execute this command sonar-scanner in your terminal. If yes, proceed to the next step, otherwise you have to configure your PATH in the right way.
• from the root of this project run npm run sonar-scanner
• navigate to http://localhost:9000 to see the result

This project is available also on SonarCloud HERE

Be careful, this project supports SonarQube analysis, but it still experimental. For instance, I'm not happy about test coverage report, because I think that it's wrong.

Credits

A special thanks to both qdouble and AngularClass projects.

License

MIT License

Copyright (c) 2017 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.

Created by Stefano Cappa