my-frontend-boilerplate

My interpretation of how a boilerplate with a minimum set of tools should look like for my frontend application development. 🙏

Why?

Because I start to keep repeating over and over again scaffolding my project structure, especially when constructing my favorite webpack.config.js and package.json files.

Note that the webpack configuration should be easily extensible to pack popular modern JS frameworks. It might as well be flexible to switch from the webpack-dev-server to more customized Node.js Express server, which uses the webpack-dev-middleware.

Molly's automation principle:

Do it once, just do it. Do it twice, take notes. Do it three times, automate. 🙋

What's on the Stack

JavaScript ES6+ (Babel).
Bootstrap 4 (and Font Awesome).
lodash.
jQuery.
webpack 4 (and its development server).

Installation

Install Node.js LTS and npm from its website, or better even, use nvm.
Install yarn.
Checkout the repo, cd to project directory, and setup dependencies:

$ yarn install:clean

For development, start webpack development server with hot reloading capability:

$ yarn start

You'll find the app running on https://localhost:8080.

For production, build frontend static assets:

$ yarn build

Then, simply drop all files under assets directory to the production server.

Author

Glenn Dwiyatcita (@dwiyatci)

License

WTFPL – Do What the Fuck You Want to Public License.

See LICENSE.txt.