πŸ“– FrontBook is a small and modern frontend boilerplate, enabling you to write ES201* today in production-ready projects.
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
dist
media
src
.editorconfig
.eslintignore
.eslintrc.json
.gitignore
LICENSE
README.md
config.json
package.json
server.js

README.md

FrontBook is a small and modern frontend boilerplate, made for developers who miss a good starting point to write ES201* today in production-ready projects.

βš™ Setups

FrontBook comes with different setups, npm scripts being the default:

Setup Version Branch
npm scripts 1.0.0 master
Grunt 1.3.2 grunt
gulp 1.3.2 gulp

Choose one and get started!

πŸ’Ύ Quick Start FrontBook

1. Download the boilerplate

Choose one of the two options:

  • Download the repository as .zip
  • git clone the repository

2. Install Dependencies

Run npm install in your terminal from the FrontBook directory. This makes sure all dependencies are installed and you won't run into any errors.

3. Build Your Project

After installing all dependencies, you want to build your project. npm run dev will generate all files from the src/ directory and move them to dist/. You can now access the build on http://localhost:9000.

npm run dev will automatically watch all your source files for any changes!

If you don't to watch all your files but only build the project once, npm run build is your friend.

πŸ›  Directory Structure

All your source files are located in src/ and structured as follows:

data/
β”œβ”€β”€ meta.json
β”œβ”€β”€ content.json
└── ...
images/
β”œβ”€β”€ frontbook.svg
└── ...
markup/
β”œβ”€β”€ partials/
β”‚   └── head.html
└── index.html
meta/
β”œβ”€β”€ humans.txt
└── ...
scripts/
β”œβ”€β”€ components/
β”‚   └── welcome.js
└── index.js
styles/
β”œβ”€β”€ base/
β”‚   └── ...
β”œβ”€β”€ layout/
β”‚   β”œβ”€β”€ header.scss
β”‚   └── ...
β”œβ”€β”€ vendors/
β”‚   └── ...
└── index.scss

An overview of each folder:

Folder Description Executable
data/ Contains all required data (e.g. copy, image meta data, ...) for your views. It is passed to nunjucks when it renders a view. bin/html
images/ Contains all images for your project. You could also argue to move them into meta/, or rename the folder to something like assets/. I prefer them separated to have a seperate, unique build task. Currently, images are just copied to dist/ but there could also be added an additional image optimization step. bin/assets
markup/ All the views. If your project is a single page application you might just keep the index.html and work with additional includes and partials. If there are more views, such as about.html, they need to be added to the build task. bin/html
meta/ FrontBook keeps meta files like humans.txt or a manifest.json here. Some of them might have their own build step, but all are eventually copied to dist/. If you want to have specific modifications for any meta file, add them to bin/assets. bin/assets
scripts/ Because the main reason for FrontBook is to be able to write ES201* in production, this must be the more exciting part.
FrontBook doesn't force you to stick to a specific MV* architecture. It simply takes all .js files and compiles them. Hence you can choose whatever design pattern you prefer. If you want to exclude specific files, you need to specify them in the build step.
bin/js
styles/ FrontBook uses Sass for styling, but it can also easily replaced with any other postprocessor language. The architecture is up to you; if you don't know which architecture to use, take a look at sass-guidelin.es bin/css

πŸ”§ Available Tasks

Β Command Description
npm run build Generates, compiles, and transpiles all files from src/ to dist/.
npm run dev Same as npm run build but watches also all your files for changes.
npm run lint Uses eslint to lint all JavaScript files.
npm run clean Removes all content from dist/
npm start This is the production build. It minifies the CSS and JavaScript output.

πŸ“ƒ Further Documentation

🎊 Features

  • Gives you the freedom to use any architectural pattern you like
  • ES201* using Browserify (mainly to use modules in ES5) and Babel.
  • ESLint

πŸ“Š Browser Support

  • Chrome (latest 2)
  • Firefox (latest 2)
  • Internet Explorer 9+ (You can support IE8 by limiting yourself to a subset of ES201* features)
  • Microsoft Edge (latest)
  • Opera (latest 2)
  • Safari (latest 2)

❀️ Contributing

Feel free to add, edit or remove anything you want. If you want to improve something or have found issues, please let me now by opening an issue here on GitHub or contact me via mail. Any help is much appreciated.

License

The code is available under MIT License.