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-webpack-skeleton

Ks89 / angular-webpack-skeleton

Licence: MIT License
This project is deprecated. Please refer to https://github.com/Ks89/angular-cli-skeleton

Programming Languages

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

Labels

bootstraptemplateangularwebpackservice-workerappcacheoffline-firsttestprotractorbootstrap4starterangular4aotwebpack2tree-shakinge2eng-bootstrapngrx-storebootstrap-loaderdllplugin

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

angular-cli-skeleton
angular-cli skeleton to quickly start a new project with advanced features and best practices. All features are described in README.md.
Stars: ✭ 32 (+100%)
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 (+5593.75%)
Mutual labels:  protractor, starter, angular4, aot
example-app
Example app showcasing fulls1z3's Angular libraries
Stars: ✭ 27 (+68.75%)
Mutual labels:  starter, angular4, aot
Budgeting
Budgeting - React + Redux + Webpack (tree shaking) Sample App
Stars: ✭ 971 (+5968.75%)
Mutual labels:  service-worker, webpack2, tree-shaking
angular4-seed-starter
An angular4 starter with webpack2+aot+lazyload+hmr+scss(个人搭的angular4 starter，使用webpack2，包含aot、lazyload、scss、热替换功能等等)
Stars: ✭ 23 (+43.75%)
Mutual labels:  starter, angular4, aot
React Dynamic Route Loading Es6
Auto chunking and dynamic loading of routes with React Router and Webpack 2
Stars: ✭ 297 (+1756.25%)
Mutual labels:  service-worker, webpack2, tree-shaking
Offline Plugin
Offline plugin (ServiceWorker, AppCache) for webpack (https://webpack.js.org/)
Stars: ✭ 4,444 (+27675%)
Mutual labels:  service-worker, appcache, offline-first
Offline First
🔌 Everything you need to know to create offline-first web apps.
Stars: ✭ 2,792 (+17350%)
Mutual labels:  service-worker, appcache, offline-first
cypress-maildev
Cypress Maildev is a bunch of Cypress commands in order to test your messages (SMS and Emails) by using Maildev REST API.
Stars: ✭ 19 (+18.75%)
Mutual labels:  test, e2e
protractor-cli
🎯 An Interactive command line interface & config helper for Protractor.js !
Stars: ✭ 14 (-12.5%)
Mutual labels:  protractor, e2e
offline-first-sw
Service worker example with 404 handling, custom offline page and max TTL for specific file types.
Stars: ✭ 82 (+412.5%)
Mutual labels:  service-worker, offline-first
angular2-pokedex
A Pokedex built on Angular with AoT, Tree Shaking, Rollup and TypeScript
Stars: ✭ 34 (+112.5%)
Mutual labels:  aot, tree-shaking
ng-toggle
Bootstrap-styled Angular Toggle Component
Stars: ✭ 14 (-12.5%)
Mutual labels:  bootstrap4, angular4
ng-seed
Simple Angular seed project with commonly used features.
Stars: ✭ 12 (-25%)
Mutual labels:  starter, aot
angular-gulp-starter
Simple dev/prod build for Angular (2+) using gulp, systemjs, rollup, ngc (AOT), scss, Visual Studio
Stars: ✭ 18 (+12.5%)
Mutual labels:  starter, aot
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 (+387.5%)
Mutual labels:  test, e2e
jest-retry
Jest retry pattern for flaky E2E tests
Stars: ✭ 36 (+125%)
Mutual labels:  test, e2e
mean-stack
MEAN stack Mongoose, Express, Angular6, Node
Stars: ✭ 22 (+37.5%)
Mutual labels:  bootstrap4, angular4
react-flux-gulp-starter
A universal boilerplate for building React/Flux apps using Gulp and ES6.
Stars: ✭ 46 (+187.5%)
Mutual labels:  starter, webpack2
ngx-redux-ui-management-recipes
Recipes for managing the UI layout of an application using Redux in Angular
Stars: ✭ 39 (+143.75%)
Mutual labels:  angular4, ngrx-store
View All Similar Projects ➔

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

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

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].