Public | Automated Build

Last pushed: a year ago
Short Description
Short description is empty for this repo.
Full Description

Front-end Boilerplate.

Because repeating yourself is suck.

Modular, easy to use boilerplate for building web applications

Introduction

Frontend Boilerplate is a simple Gruntfile and directory structure for an easy starting point with web applications using: Grunt and Bower.
It is designed to give you a quick and organized way to start developing web apps with best practices in mind.

Preface

As a developer, everytime you need to start a new web project you must follow the same steps.
Write a lot of JavaScript code, using a CSS pre-processor, start a server, open your browser to see the page, go
back to the editor made some changes, go back to the browser e repeat this flow many, many times a day.
For this we created this repository to collect the best practice around the web community and put all together
in one place. Be cool, share your experience too.

Disclaimer

All code here are based on lessons learned and good practices, however many of them are fruits of research in several blog, tutorials, lectures and other sources.

License

MIT


Getting Started

To get you started you can simply clone or download the repository and install the dependencies, very simple!
Quick start.

Also you can using the Yeoman Generator to start even fast.

Prerequisites

You need Git to clone the repository.

Also you must have Node.js and its package manager (npm) installed.

And Bower the package manager

Installing frontendboilerplate

Clone the repository using git:

git clone https://github.com/newaeonweb/frontendboilerplate.git
cd frontendboilerplate

If you just want to start from zero commit history, you need to do:

git clone --depth=1 https://github.com/newaeonweb/frontendboilerplate.git <your-project-name>

The depth=1 tells git to only pull down one commit worth of historical data.

Install Dependencies

Open your Terminal window inside the project folder and type the following command:

npm install

The npm command will install all the dependencies listed on package.json file.

Your application is ready to go

Troubleshooting

The step-by-step is very simple but if you find some issue please let us know at: issues.


Application Directory Layout

We propose a folder structure for web projects from the scratch, because all web projects have CSS, JS and Images folders.

    assets/                    --> all of the files to be used in production
        css                    --> css files
        fonts                --> Font-face folder
        images                --> image files
        js/                    --> javascript files
            vendor             --> third party libraries copied from src/vendor
    lib/                    --> 3rd party bower libraries
    src/                    --> scripts for development
        scripts/            --> hand made JavaScript files, plugins and others
        preprocessor/        --> your choice for Sass or Less
        vendor/                --> third party libraries like: respond, mçodernizer
    test                    --> test source files and libraries
        mocha                --> mocha folder structure for visual test results
            css/            
                mocha.css
            js/                --> testing frameworks file
                chai.js
                mocha.js
        spec                --> specs for testing
            app-test.js        --> example on how to write tests
        test.html            --> visual page for tests
    index.html                --> base layout file
    Gruntfile.js            --> where the magic happens

Grunt commands available

Development:

grunt dev

This command will run two tasks:

  • connect
  • watch

Using the concurrent and livereload plugins.

Linters:

grunt lint

This command will run two tasks:

  • jshint
  • csshint

CSS:

grunt less
grunt sass

Using less task will compile less files, using sass task will compile sass files.

Test:

grunt test

This command will run one task:

  • mocha

Build:

grunt build

This command will run four tasks:

  • lint
  • concat
  • uglify
  • test

Helpers Tasks

Bower:

grunt bower

Grunt will install all bower dependencies from the bower.json file.

Injector:

grunt injector

Grunt will inject all bower dependencies from the bower.json file into index.html.

After include some bower denpendecy on bower.json file, optionally run grunt bower and grunt injector.

Docker Pull Command
Owner
newaeonweb
Source Repository

Comments (0)