Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/erickzhao/static-html-webpack-boilerplate
🔮 modern tooling for old-school static webpage development
https://github.com/erickzhao/static-html-webpack-boilerplate
babel boilerplate html javascript minification scss webpack
Last synced: 3 months ago
JSON representation
🔮 modern tooling for old-school static webpage development
- Host: GitHub
- URL: https://github.com/erickzhao/static-html-webpack-boilerplate
- Owner: erickzhao
- License: mit
- Archived: true
- Created: 2017-11-21T21:24:53.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-13T23:43:38.000Z (almost 2 years ago)
- Last Synced: 2024-05-27T21:00:25.822Z (6 months ago)
- Topics: babel, boilerplate, html, javascript, minification, scss, webpack
- Language: JavaScript
- Homepage:
- Size: 2.47 MB
- Stars: 284
- Watchers: 10
- Forks: 108
- Open Issues: 49
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 Static HTML Webpack Boilerplate
[](https://badge.fury.io/gh/erickzhao%2Fstatic-html-webpack-boilerplate)
[](https://travis-ci.org/erickzhao/static-html-webpack-boilerplate)
[](https://david-dm.org/erickzhao/static-html-webpack-boilerplate?type=dev)
[](https://app.codacy.com/app/erickzhao/static-html-webpack-boilerplate?utm_source=github.com&utm_medium=referral&utm_content=erickzhao/static-html-webpack-boilerplate&utm_campaign=Badge_Grade_Dashboard)
Enjoy hand-writing your HTML? Keep it old-school with modern build tools. This boilerplate setup makes it easier to write your own styling, scripts, and mark-up.
## ✨ Features
- Write SCSS and modern JavaScript code in `src` and build minified, transpiled code for production in `dist`
- Continuous integration with linting tests and deploying to `gh-pages`
- Live reloading with webpack-dev-server
- ES6+ to ES5 transpilation, bundling, and minification
- SCSS to CSS transpilation, bundling, autoprefixing, and minification
- Automatic copying of HTML and static assets from `src` to `dist` folders
- Linting for styles and scripts
## 🛠Usage
- Use this template on GitHub or download the latest release from the [Releases page](https://github.com/erickzhao/static-html-webpack-boilerplate/releases).
- Write all your ES2015+ Javascript code in `src/js` and SCSS styling in `src/style`. Store static assets in `src/static`. Organize HTML files the way you like.
- Available commands:
- `npm run build`: Build files to the `dist` folder. Transpiles down to ES5 and bundles all JS into `app.bundle.js`. Transpiles SCSS to CSS and adds prefixing into `style.bundle.css`. Copies static assets and HTML over, and bundled CSS and JS gets added to HTML file.
- `npm run start:dev`: Run `webpack-dev-server` at `localhost:9000`. Includes live reloading on any Javascript/SCSS/HTML changes.
- `npm run start`: Builds files and runs a local production server on `localhost:8080` with `http-server`.
- `npm run run lint:js`: Lints JS with ESLint.
- `npm run lint:styles`: Lints SCSS stylesheets with stylelint.
- `npm run lint:html`: Lints HTML for a11y issues using pa11y.
## 🔄 Continuous Integration
This boilerplate contains integration with [Travis CI](https://travis-ci.org/). The build system runs all linting scripts and deploys to GitHub pages upon push to the `master` branch. However, note that this deployment flow only works for Project Pages, as User and Organization pages [only support the master branch flow](https://help.github.com/articles/user-organization-and-project-pages/).
For more information on how to set up alternative deployment processes, check out the [Travis CI documentation on deployment](https://docs.travis-ci.com/user/deployment). The service can deploy to dozens of cloud providers, including Heroku, AWS, and Firebase.