Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chrisalexander55/ecmascript-sass-webpack-starter
Starter/Boilerplate project for a web application requiring EcmaScript (6/7), Webpack (3.X) and Sass (4.X) - optionally served from a lightly configured Docker container.
https://github.com/chrisalexander55/ecmascript-sass-webpack-starter
boilerplate docker-container ecmascript ecmascript2015 ecmascript2016 es2015 es2016 es6 es7 sass scss starter starter-project starter-template webpack webpack3
Last synced: 3 months ago
JSON representation
Starter/Boilerplate project for a web application requiring EcmaScript (6/7), Webpack (3.X) and Sass (4.X) - optionally served from a lightly configured Docker container.
- Host: GitHub
- URL: https://github.com/chrisalexander55/ecmascript-sass-webpack-starter
- Owner: chrisalexander55
- License: mit
- Created: 2017-08-20T20:14:51.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-09-16T17:05:42.000Z (over 7 years ago)
- Last Synced: 2024-09-28T22:21:14.079Z (4 months ago)
- Topics: boilerplate, docker-container, ecmascript, ecmascript2015, ecmascript2016, es2015, es2016, es6, es7, sass, scss, starter, starter-project, starter-template, webpack, webpack3
- Language: JavaScript
- Homepage:
- Size: 526 KB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ecmascript-sass-webpack-starter
[](https://github.com/chrisalexander55/ecmascript-sass-webpack-starter/blob/master/LICENSE)
[](https://www.npmjs.com/package/ecmascript-sass-webpack-starter)
[](https://github.com/chrisalexander55/ecmascript-sass-webpack-starter)
[](https://github.com/chrisalexander55/ecmascript-sass-webpack-starter/blob/master/package.json)
[](https://github.com/chrisalexander55/ecmascript-sass-webpack-starter/blob/master/package.json)
[](https://github.com/chrisalexander55/ecmascript-sass-webpack-starter/issues)
[](https://github.com/chrisalexander55/ecmascript-sass-webpack-starter/pulls)
## Overview
Starter/boilerplate project for a web application requiring ECMAScript (6/7), Webpack (3.X) and Sass (4.X) - optionally served from a lightly configured Docker container. The project is particularly helpful for craftsmen/craftswomen demanding more control of their frontend stack and tired of the growing bloat and complexity of today's Franken-frameworks.
> This repository is inspired from [micooz/es6-webpack2-starter](https://github.com/micooz/es6-webpack2-starter).
## Features
The project supports the following "out-of-box" features:
* Multiple Entry Points, Multiple Pages
* EcmaScript (Babel (6.X) and ESLint)
* SASS (4.X, Stylelint)
* Webpack (3.X, dashboard, dev-server)
* Google Lighthouse (performance/best-practice profiling)
* Progressive Web Application (PWA) compliance
* Testing (Mocha, Chai, Istanbul)
* Documentation (JsDoc)
* Docker Container (optional)
## Installation
Windows platform users should install [GitBash](https://git-scm.com/downloads) before continuing so you can use Unix terminal commands.
### Docker Container (Optional)
If you haven't already done so, install [Docker](https://www.docker.com/) on you host OS. Windows <=7 users need to install [Docker Toolbox](https://www.docker.com/products/docker-toolbox). If you have any issues, hit-up the Docker forums or SO.
The latest [official Node image](https://hub.docker.com/_/node/) from the [Node.js Foundation](https://nodejs.org) is used by the container. Edit the Dockerfile as you see fit.
```bash
# build and start container
$ . ./run.sh
# this will dump you on the commandline inside the container
```
### Project Hydration
```bash
$ git clone https://github.com/chrisalexander55/ecmascript-sass-webpack-starter.git
$ cd ecmascript-sass-webpack-starter
$ npm i
```
After installation, you will see this directory structure:
```bash
|- webpack/ # webpack config dir
|- src
|- robots.txt
|- test/ # test dir
|- app
|- assets
| |- platform/ # icons + platform config dir
|- modules
| |- index/ # index modules dir
| |- shared/ # shared modules dir
| |- some-page-1/ # some-page-1 modules dir
| |- some-page-2/ # some-page-2 modules dir
| |- not-found/ # not-found modules dir
| |- not-supported/ # not-supported modules dir
|- pages
| |- some-page-1.html
| |- some-page-2.html
|- sass
| |- main.scss # for global styles
|- index.html # default page
|- not-found.html # 404
|- not-supported.html # browser doesn't meet required features
```
## Configuration
```bash
# run just to ensure env.js was created (it may silently fail)
$ npm run postinstall
# edit env.js per your environment needs
# 1. development
# - edit src/app/modules/shared/proxy/config.js to hit API resources you need
# 1a. starts up the webpack-dev-server from host OS + launches browser pointing to http://localhost:3000/index.html
$ npm run start:host
# 1b. starts up the weback-dev-server from container
# on your host OS, open your favorite web browser and point to url http://localhost:3000
$ npm run start:container
# 2. production
# outputs into dist/ directory
$ npm run build
```
Distribution directory structure will look like this after transpilation:
```bash
dist
|- css/
|- modules/
|- pages/
|- platform/
|- index.html
|- not-found.html
|- not-supported.html
|- robots.txt
```
## Testing (WIP)
> Not working coverage yet but present if you need it now.
Tests have a single entry point via `src/test/index.js` and leverage Mocha and Chai (Should) with Istanbul coverage reporting.
```bash
$ npm test
```
## Documentation
Generate documentation based on [JsDoc](https://github.com/jsdoc3/jsdoc) formated code comments:
```bash
# outputs into docs/ directory; open index.html
$ npm run docs
```
## Header Element
I know, "Dude, you talking to me about the HTML Header element?" Yes, I am because I've seen too often how under utilized it is in helping developers/organizations delivery the best possible user experience, device support and SEO. Configured right, the HTML Header is powerful!
### Base Feature Support
Standard tags/attributes cover:
* Security
* Caching
* Geolocation
* Site ownership verification
* Telephone number formating
### Social Media Coverage
If you need to share content tailored for social media platforms, either statically or via a SPA page, the platforms covered include:
* Facebook
* Google
* Pinterest
### Progressive Web Application (PWA) Support
Generally, developers are aware of the native JavaScript APIs and polyfills related to PWAs but most are not aware that markup must also be configured for an valid and performant implementation.
#### Platform Coverage
Platform-specific meta tags/attributes covered include:
* iOS
* Android/Chrome
* Windows
#### Template
Here is the recommended header element that can be cut-n-pasted and edited to fit your needs, full/partial SPA or non-SPA.
```html
```
> Big props go out to the maintainers at [GetHead.Info](http://gethead.info/). If your technical understanding of the Head element, and its siblings, is thin, I strongly encourage you visit their site to bulk-up your knowledge!
## Helpers
Other stuff I've found helpful...
### Port Management
```bash
# strictly unix-based, of course...
# list all open ports
$ netstat -nat | grep LISTEN
# list pids associated with a specfic port
$ lsof -ti tcp:[PORT_NUMBER]
# kill a pid
$ kill -9 [PID]
```