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.
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!
Choose one of the two options:
- Download the repository as
.zip git clonethe repository
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.
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 devwill automaticallywatchall 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.
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
|
| 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. |
- Gives you the freedom to use any architectural pattern you like
- ES201* using Browserify (mainly to use modules in ES5) and Babel.
- ESLint
- 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)
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.
The code is available under MIT License.