Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/peterblazejewicz/tour-of-heroes-webpack
Tour of Heroes by John Papa as Webpack 4 based boilerplate for your project.
https://github.com/peterblazejewicz/tour-of-heroes-webpack
angular angular-cli boilerplate template tour-of-heroes typescript webpack
Last synced: 17 days ago
JSON representation
Tour of Heroes by John Papa as Webpack 4 based boilerplate for your project.
- Host: GitHub
- URL: https://github.com/peterblazejewicz/tour-of-heroes-webpack
- Owner: peterblazejewicz
- Created: 2019-05-14T21:57:58.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-02T00:39:58.000Z (over 4 years ago)
- Last Synced: 2024-10-14T14:07:13.717Z (4 months ago)
- Topics: angular, angular-cli, boilerplate, template, tour-of-heroes, typescript, webpack
- Language: TypeScript
- Homepage: https://tour-of-heroes-webpack.netlify.com
- Size: 5.45 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tour Of Heroes
[](https://greenkeeper.io/)
[](https://travis-ci.org/peterblazejewicz/tour-of-heroes-webpack)
[](https://app.netlify.com/sites/tour-of-heroes-webpack/deploys)
`TOH` by John Papa built only with Webpack 4. This project uses `@ngtools/webpack` to work with Angular specific bundling (`.ts`, `.html`, `.css`, `.scss` files).
The Webpack configuration files are written in TypeScript. For `whys`:
- [Configuration Languages: TypeScript](https://webpack.js.org/configuration/configuration-languages/#typescript)
- [Unambiguous Webpack config with Typescript](https://medium.com/webpack/unambiguous-webpack-config-with-typescript-8519def2cac7)
## Usage
### Development
The TOH starts on the same port as CLI:
```bash
npm i
npm start
```
Linting:
```bash
npm run lint
npm run lint:fix
```
The Webpack configuration is being build depending on the mode:
```ts
import { Configuration } from 'webpack';
import WebpackMerge from 'webpack-merge';
import { commonConfiguration } from './config/webpack.common';
import { developmentConfiguration } from './config/webpack.dev';
import { productionConfiguration } from './config/webpack.prod';
const configuration: (env: any, argv: any) => Configuration = (env, argv) => {
if (env.production || env.prod || argv.mode === 'production') {
return WebpackMerge(
commonConfiguration(env, argv),
productionConfiguration(env, argv)
);
}
return WebpackMerge(
commonConfiguration(env, argv),
developmentConfiguration(env, argv)
);
};
export default configuration;
```
The generated output is split into directories in the following way:
```text
- dist/
- toh/
- assets/
- css/
- js/
index.html
favicon.ico
```
### CI Build
This repo suports `Travis CI` and runs Karma using headless version of the Chrome browser. See `.travis.yml` for details:
```txt
$ npm run test -- --single-run --no-watch --no-progress --browsers=ChromeHeadlessCI
> [email protected] test /home/travis/build/peterblazejewicz/tour-of-heroes-webpack
> karma start src/karma.conf.js "--single-run" "--no-watch" "--no-progress" "--browsers=ChromeHeadlessCI"
04 06 2019 21:59:59.452:INFO [compiler.karma-typescript]: Compiling project using Typescript 3.5.1
04 06 2019 22:00:06.066:INFO [compiler.karma-typescript]: Compiled 19 files in 6589 ms.
04 06 2019 22:00:09.344:INFO [bundler.karma-typescript]: Bundled imports for 19 file(s) in 2775 ms.
04 06 2019 22:00:09.940:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
04 06 2019 22:00:09.941:INFO [launcher]: Launching browsers ChromeHeadlessCI with concurrency unlimited
04 06 2019 22:00:09.946:INFO [launcher]: Starting browser ChromeHeadless
04 06 2019 22:00:10.857:INFO [HeadlessChrome 75.0.3770 (Linux 0.0.0)]: Connected on socket qrBVviQNfeu5peptAAAA with id 23475617
HeadlessChrome 75.0.3770 (Linux 0.0.0): Executed 0 of 2 SUCCESS (0 secs / 0 secs)
e 75.0.3770 (Linux 0.0.0): Executed 1 of 2 SUCCESS (0 secs / 0.109 secs)
e 75.0.3770 (Linux 0.0.0): Executed 2 of 2 SUCCESS (0 secs / 0.172 secs)
e 75.0.3770 (Linux 0.0.0): Executed 2 of 2 SUCCESS (0.198 secs / 0.172 secs)
TOTAL: 2 SUCCESS
TOTAL: 2 SUCCESS
The command "npm run test -- --single-run --no-watch --no-progress --browsers=ChromeHeadlessCI" exited with 0.
```
## TODO
- [x] split Webpack configuration as per best pracises section
- [x] Webpack dev server support
- [x] prod/dev/test builds
- [ ] drop-in replacement with `@angular-devkit/build-webpack`
- [x] CSS/SCSS support
- [x] ESLint test and fix support
- [x] Prettier formatting check and fix support
## Author
@peterblazejewicz