Frontend Tiny Boilerplate

A basic and powerful multipurpose boilerplate, to let you focus on what matters, your code.

Features

• Handlebars view engine, with pre-loaded helpers, partials and data
• Basic NodeJS web server, handling routes, pages, and assets
• Sass stylesheets
• Postcss optimizing the CSS with autoprefixer, css-mqpacker, and cssnano
• JS transpilation with Webpack and Babel
• Jest up and running for tests
• Static build output (HTML missing, will be fixed soon)

Up and running

• Have NodeJS installed (optionally, Yarn as well)
• Install dependencies by npm i or yarn
• Build static files by npm run build or yarn build
• Serve the app by npm run server or yarn server
• Run tests by npm run test or yarn test

Folder structure

.
├── _dist/  ................ Built output folder (git ingnored)
├── data  .................. Data files preloaded on Handlebars render engine
│   └── [your-data].json
├── pages  ................. Main pages
│   ├── [your-page].hbs
│   └── routes.json  ....... Associate a route with a page file
├── partials  .............. Handlebars partials preloaded
│   └── [your-partial].hbs
├── scripts
│   ├── dummy.test.js  ..... Dummy test example
│   └── main.js  ........... Optional main JS entry point
├── static/  ............... Static files to include on built output
├── styles
│   └── main.scss  ......... Main SASS entry point
├── tasks/  ................ Build related tasks
├── ...
├── postcss.config.js  ..... PostCSS config
└── webpack.config.js  ..... Webpack config