- For prototyping it's very quick to clone this skeletal and start working out of the box
This skeletal contains the following libraries bundled together
- Bootstrap (Sass) based
- Typescript
- RxJS
- Jquery
- Webpack
.
├── assets
│ ├── sass
│ └── typescripts
├── public
│ ├── build
│ └── index.html
├── cleanup.sh
├── package.json
├── README.md
├── tsconfig.json
├── webpack.config.js
└── webpack.config.prod.js
| Directory | Remarks |
|---|---|
| assets/sass | All the sass files will be here |
| assets/typescript | All the typescript source files will be here |
| public/build | Webpack generates bundled css, js, resources and place them in build folder. |
| File | Remarks |
|---|---|
| cleanup.sh | Used to cleanup the public directory, very useful during development |
| package.json | Node module package configuration |
| tsconfig.json | Typescript configuration file |
| webpack.config.js | Webpack Configuration File |
| webpack.config.prod.js | Webpack configuration, supposedly to be used for production. The only difference is it minifies the js, css files. It also limits the output from webpack. |
$ git clone https://github.com/samundra/webpack-skeletal.git
$ cd webpack-skeletal
$ npm install
// Webpack will execute and generate css, js in `public/build` folder in respective folders
$ npm run webpackHost the application in webserver, point document root to public then browse it.
You should be able to see your changes.
We can use google chrome extension called "Webserver for Chrome" from https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb It will create a javascript based web-server. Once installed, match the settings similar to below:
- Choose public folder (document root)
- Set it to automatically open index.html
- Visit link to browse it.
$ cd webpack-skeletal
$ npm run cleanup- add live-reload
- better code-splitting (https://webpack.js.org/guides/code-splitting/)
- add JSX
- PRs are always welcome, please fork it and send PRs.