All Projects → STUkh → Generator Angular Webpack Es6

STUkh / Generator Angular Webpack Es6

Yeoman generator for Angular projects using Webpack, ES6, SASS with some cool optional features. Feel free to contribute!

Programming Languages

javascript
136202 projects - #8 most used programming language
esnext
17 projects

Projects that are alternatives of or similar to Generator Angular Webpack Es6

Generator Kittn
The Yeoman Kittn Generator
Stars: ✭ 63 (-63.37%)
Mutual labels:  webpack, gulp, yeoman-generator, sass
100 Days Of Code Frontend
Curriculum for learning front-end development during #100DaysOfCode.
Stars: ✭ 2,419 (+1306.4%)
Mutual labels:  webpack, gulp, sass
Gulp Pug Starter
Frontend development with pleasure. Pug + SCSS version
Stars: ✭ 228 (+32.56%)
Mutual labels:  webpack, gulp, sass
Generator Phaser Plus
[🛑 DISCONTINUED] It has been a long journey but development of `generator-phaser-plus` is now over. I recommend you have a look and fork `yandeu/phaser-project-template` instead.
Stars: ✭ 148 (-13.95%)
Mutual labels:  webpack, gulp, yeoman-generator
Gulp Scss Starter
Frontend development with pleasure. SCSS version
Stars: ✭ 339 (+97.09%)
Mutual labels:  webpack, gulp, sass
Manhuaren
vue2.0全家桶,仿漫画人官网(移动端)
Stars: ✭ 18 (-89.53%)
Mutual labels:  webpack, gulp, sass
Wordpress Starter
📦 A starter template for WordPress websites
Stars: ✭ 26 (-84.88%)
Mutual labels:  webpack, gulp, sass
Frontie Webpack
Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js
Stars: ✭ 102 (-40.7%)
Mutual labels:  webpack, gulp, sass
React Core Boilerplate
Powerful ASP.NET Core 3 templates with React, true server-side rendering and Docker support
Stars: ✭ 169 (-1.74%)
Mutual labels:  webpack, sass
Keepformac
keep for mac
Stars: ✭ 147 (-14.53%)
Mutual labels:  webpack, sass
Kirby Webpack
💪 A Kirby CMS starter-kit with modern frontend tools
Stars: ✭ 150 (-12.79%)
Mutual labels:  webpack, sass
Vue Webgulp
Vue.js + Webpack + Gulp + Vue Loader
Stars: ✭ 146 (-15.12%)
Mutual labels:  webpack, gulp
Iceberg
Front-End Boilerplate built with React + Babel + Webpack + SASS
Stars: ✭ 144 (-16.28%)
Mutual labels:  webpack, sass
Imall
基于Laravel5.2,Vue.js1.0的微信商城,用于熟悉 Laravel、Vuejs、Webpack、Gulp 的结合使用,已不维护及更新。(1MB单核基础服务器,浏览请耐心等待图片加载...)
Stars: ✭ 168 (-2.33%)
Mutual labels:  webpack, gulp
Genesis Starter Theme
A starter theme for the Genesis Framework with a modern development workflow
Stars: ✭ 141 (-18.02%)
Mutual labels:  gulp, sass
Pychat
webchat via WebSockets/WebRTC that allows messaging/video call/screen sharing
Stars: ✭ 152 (-11.63%)
Mutual labels:  webpack, sass
Glup
Some of the gulp tutorial -《gulp笔记》
Stars: ✭ 136 (-20.93%)
Mutual labels:  gulp, sass
Reactql
Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
Stars: ✭ 1,833 (+965.7%)
Mutual labels:  webpack, sass
Webpack Encore
A simple but powerful API for processing & compiling assets built around Webpack
Stars: ✭ 1,975 (+1048.26%)
Mutual labels:  webpack, sass
Deventy
A minimal 11ty starting point for building static websites with modern tools.
Stars: ✭ 157 (-8.72%)
Mutual labels:  webpack, sass

generator-angular-webpack-es6

NPM Version Download Month

generator-angular-webpack-es6

Yeoman generator for AngularJS + Webpack with ES6 and SASS.

  • Latest Webpack with Tree Shaking feature enabled
  • Babel 6 with ES2017 features included
  • Perfectly compatible with angularOcLazyLoad plugin
  • SASS as CSS preprocessor
  • Angular UI router as default router already included
  • Optional installation bootstrap-sass source
  • Optional angular modules installation
  • All necessary webpack loaders already included (Sass, Images, Fonts, ngAnnotate, ngTemplateCache, etc.)
  • Config has options for development and production mode

Use only webpack with npm. No external dependencies like bower, grunt, gulp...

[email protected] still in Beta and it may contain some bugs. Please, report them to Webpack developers directly.

Install

Install required tools yo, and webpack:
npm install -g yo webpack
Install generator-angular-webpack-es6:
npm install -g generator-angular-webpack-es6

Directory Layout

├── /e2e/                                 # End to End  test folder
│   └── main.component.spec.js            # End to end test example
├── /config/                              # Build config
│   └── /webpack/                         # Webpack config files
│       ├── /environments/                # Webpack env dependent configs
│       └── global.js                     # Global webpack settings for all envs
├── /dist/                                # The folder for compiled output
├── /node_modules/                        # 3rd-party libraries and utilities
├── /src/                                 # Source folder
│   ├── /app/                             # Application code
│   │   ├── /components/                  # Shared UI components
│   │   │   └── /footer/                  # Footer shared component. Place footer's styles, directives, templates here
│   │   ├── /core/                        # Shared angular services/directives
│   │   │   ├── /directives/              # Shared directives
│   │   │   ├── /services/                # Shared services
│   │   │   └── /core.module.js           # Import of all core components should be here
│   │   ├── /pages/                       # All pages-dependent content should place here
│   │   │   ├── /main/                    # Main page
│   │   │   │   ├── /main.controller.js   # Main page Controller
│   │   │   │   ├── /main.controller.spec.js  # Test file for main page controller
│   │   │   │   ├── /main.html            # Main page template
│   │   │   │   ├── /main.module.js       # Main page module
│   │   │   │   └── /main.route.js        # Main page routes
│   │   │   └── /.../                     # Other pages...
│   │   ├── /index.bootstrap.js           # Entry point. Import internal and external modules and bootstrap (RUN) angular application
│   │   ├── /index.components.js          # Define all your custom components here
│   │   ├── /index.config.js              # Function that will be triggered in Angular's "config" phase
│   │   ├── /index.module.js              # Main application's module
│   │   ├── /index.routes.js              # Describe only "otherwise" and async routes here
│   │   ├── /index.run.js                 # Function that will be triggered in Angular's "run" phase
│   │   ├── /index.vendor.js              # Import all vendors and 3rd party plugins here
│   ├── /assets/                          # Static content
│   │   ├── /images/                      # Images
│   │   ├── /js/                          # Extra libs folder
│   │   └── /styles/                      # Styles folder
│   │       ├── /css/                     # CSS
│   │       └── /sass/                    # SASS
│   ├── favicon.ico                       # Application icon to be displayed in bookmarks
│   └── tpl-index.html                    # Template for html-webpack-plugin that will be transpiled into index.html in /dist
│── .babelrc                              # Babel config with presets and plugins
│── .gitignore                            # List of files to ignore by git
│── karma.conf.js                         # Karma config
│── protractor.conf.js                    # protractor config
│── spec.bundle.js                        # The bundle file for including in karma config
│── package.json                          # The list of project dependencies and NPM scripts
└── webpack.config.js                     # Bundling and optimization settings for Webpack

Run

Create a new directory, and go into:
mkdir my-new-project && cd $_
Run yo angular-webpack-es6, and select desired technologies.
npm start or npm run dev - to start development server on http://localhost:8080.
npm run build - To make production-ready build run after few moments you will see build id dist folder.

Test

Unit testing

The app uses Karma to run the unit tests, which you can find near the test target (*.spec.js files). see example test in the above directory structure. For running these tests run this command in project directory:

npm test

This command will automatically watch for changes that happening in test files and rerun the test suite To disable the above behaviour , please check package.json file

End-to-end testing

The app uses Protractor, an end-to-end test framework designed for AngularJS apps, to the end-to-end tests, which you can find in the e2e folder.

Setup development environment for running end-to-end tests
  • First make sure that you did npm install.
  • Download the necessary binaries for Selenium Server npm run webdriver-update.
  • Open onother command line and run the development server npm start and make sure the running port match the baseUrl port in protractor.conf.js file.
  • Finally run npm run test:e2e.
Example tests
  • Check the example test for unit tests using jasmin api in

    /src/app/pages/main/main.controller.spec.js
    

    All your unit test files must end with .spec.js

  • Check the example test for e2e test in e2e directory.

    /e2e/main.component.spec.js
    

Known bugs:

  • Problem: Webpack2 unable to import function with only export default value.

Workaround: Use import * as variable from "package" instead of import variable from "package"

  • Problem: Webpack3: ExtractTextPlugin and file-loader do not work with the use syntax. Link to the issue.

Contribute

If you want to contribute:
  • Fork repository and clone project to your machine
  • Install npm packages and create new feature/fix branch
  • Link local project to be able install generator with yo from folder like from global installed package: npm link
  • Make PR
  • ...
  • PROFIT

TODO:

  • Add .dockerfile
  • Add example testing environment with karma and protractor
  • Add more dotfiles
  • Add better examples with lazy-loaded modules Added in 0.1.2
  • Update to Babel6 Added in 0.2.0

Inspired by generator-gulp-angular project.

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]