https://github.com/bboydflo/webdev-setup
:package:boilerplate starter including the necessary config to try out different libs :ok_hand:
https://github.com/bboydflo/webdev-setup
Last synced: 4 months ago
JSON representation
:package:boilerplate starter including the necessary config to try out different libs :ok_hand:
- Host: GitHub
- URL: https://github.com/bboydflo/webdev-setup
- Owner: bboydflo
- Created: 2019-03-12T06:04:53.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T15:30:44.000Z (over 3 years ago)
- Last Synced: 2025-02-18T02:14:46.484Z (over 1 year ago)
- Language: HTML
- Homepage:
- Size: 5.57 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 25
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# web-dev setup
Boilerplate starter including the necessary config to try out different libs
Tasks
## install dependencies
```sh
npm install
```
## run in development mode
```sh
npm start
```
> Babel will compile to javascript supported by a specific list of browsers. To check this list run
```sh
npx browserslist
```
## build for production
```sh
npm run build
```
## preview in production
```sh
npm run build && npm run serve
```
## build stats
```sh
npm run build:stats
```
Then upload `stats.json` to [official webpack analyse tool](https://webpack.github.io/analyse/)
## test
```sh
npm test
```
### Features
- hot module reloading for CSS and Javascript
- ES2015 and environment aware Babel configuration
- React support
- Sass compilation
- ~~will eliminate unused css using `purifycss-webpack` plugin~~
- Allows live tweaking of main webpack config and restarts dev environment when it gets changed
- assets loaders (png, jpg, svg, woff, ttf, eof etc.)
### Inspired by these projects
1. [https://createapp.dev/](https://createapp.dev/)
2. [http://learn.humanjavascript.com/react-ampersand](http://learn.humanjavascript.com/react-ampersand)
3. [survivejs webpack book](https://survivejs.com/webpack/foreword)
### Todo
- [ ] add [mini-html-webpack-plugin](https://www.npmjs.com/package/mini-html-webpack-plugin) to easier maintain the html template
- [ ] move config to a single folder
- [ ] eventually update webpack config to use [webpack-config-plugins](https://github.com/namics/webpack-config-plugins)
- [ ] experiment with different webpack-html-plugin plugins, check [this website](https://survivejs.com/webpack/developing/getting-started/)
- [ ] testing with jest and cypress and documentation
- [ ] storybook support and documentation
- [ ] deploy to now, github pages, surge, etc. and documentation
- [ ] CI setup and documentation
- [ ] fix `open-browser-webpack-plugin` security issue ([check this pr](https://github.com/baldore/open-browser-webpack-plugin/pull/30))
- [ ] add yeoman generator and documentation
- [ ] package management tasks/flow and documentation
- [ ] add example app using rest api (e.g. [rest countries api](https://restcountries.eu/))