Web project starter kit including tooling, best practices and project seed.
It is based on our experience in large web projects, with architecture choices aiming for a clean, no-brainer development experience even for beginner teams.
- Install required tools
gulpandbower:
npm install -g gulp bower
- Install project tools, go to project folder:
npm install
- Launch development server:
gulp serve
gulp/ individual gulp tasks
sources/ project source code
|- data/ other project data, will be copied as-is
|- fonts/ project fonts
|- images/ project images
|- libraries/ bower dependencies
|- main/ main module, for entry points and global style
| |- main.config.js app configuration code
| |- main.constants.js app configuration constants
| |- main.module.js main module definition
| |- main.run.js app entry point
| |- main.wrappers.js AngularJS module wrappers for external libraries
| +- main.less style entry point
|- modules/ project components and modules
| |- helpers/ helper services
| |- screens/ application screens
| |- shell/ application shell
| |- ui-components/ shared UI components
| |- web-services/ web services
| +- ... additional project modules
|- translations/ translations files
+- index.html html entry point
e2e/ end-to-end tests
dist/ compiled version
reports/ test and coverage reports + generated documentation
gulpfile.config.js gulp tasks configuration
| Tasks | Description |
|---|---|
| default | run clean, then build |
| serve | Launch a web server with live reload and API proxy, then open app in browser. |
| serve:dist | Launch a web server using dist files. |
| build | Build and optimize the current project, ready for deployment. This includes linting as well as image, script, stylesheet and HTML optimization and minification. |
| clean | Delete temporary files and dist files. |
| test | Launch unit tests using karma and jasmine. |
| test:auto | Launch karma server and launch unit tests after each change in project files. |
| protractor | Launch e2e tests using protractor. |
| docs | Generate jsdoc documentation from sources. |
- TypeScript, JavaScript
- Less, CSS
- Jade, HTML
- Gettext (for translations)
- TSLint
- JSHint
- JSCS
- Unit tests (Jasmine)
- End-to-end tests (Protractor)
- Automation with gulp
- Development server with API proxy and live reload (BrowserSync)
- JSDoc generation with angular support
- JS+CSS+HTML bundling and minification (useref, uglify, minify-html, csso)
- CSS browser support (autoprefixer)
- Images optimization (imagemin)
- Automatic angular module annotation (ngAnnotate)
- Asset revisionning (rev)
See the wiki.
This starter kit was initially based on a seed generated by the gulp-angular Yeoman generator.