Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

💥 A boilerplate application for building RESTful APIs Microservice in Node.js using express and mongoose in ES6 with code coverage and JsonWebToken Authentication

Stars: ✭ 2,811 (+2655.88%)

Mutual labels: eslint, boilerplate

Thinkful Workshop React Redux Node Mongodb Webpack2

Stars: ✭ 12 (-88.24%)

Mutual labels: eslint, boilerplate

React Redux Saucepan

A minimal and universal react redux starter project. With hot reloading, linting and server-side rendering

Stars: ✭ 86 (-15.69%)

Mutual labels: eslint, boilerplate

View All Similar Projects ➔

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 102

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (3) 🔗