Frontend Bootstrap

Kickoff for web applications.

Main Tools

First steps

Installing node

Get the latest version of node from the official website or using nvm Nvm approach is preferred. Also, you may find this tool useful to automate version changing between projects.

Getting the dev dependencies

Run npm install from rootpath of the project.

Gulp. The right way

During the project development you will probably use gulp every day, so let's use it in the right way. A very popular way of getting these kind of packages is simply tell npm to install them globally using the -g flag. That's needless as gulp is already included in this project dependencies. A big problem can have place if the version of the packages that were installed globally do not match the versions that each project require. The right way to execute these tools is using the binaries in the node_modules folder, that is node_modules/.bin/. To execute gulp just use the following in your terminal: ./node_modules/.bin/gulp. The same applies for other dependencies that have command line tools. Adding an alias in your .bashrc/.bash_profile for these tools is highly recommended:

alias gulp='node_modules/.bin/gulp'

Gulp

To start your app run gulp in the rootpath of the project. Then access your app at localhost:port. The port is logged in the console where you ran gulp.

Development

Environments

By default, the environment will be development, but you can easily change it using the env param in your gulp tasks: gulp --env production

SCSS

When creating SCSS files you don't need to import other files inside yours to use properties from them. There's a specific file called application.scss where every SCSS file should be imported in the desired priority order. This works just like the stylesheet elements in the head of an html, when repeated rules are present the rule that was imported last will override the other.

Vendors

To add a vendor simply install and save it using npm. Then add the path of the source files relative to the node_modules folder, to vendorJs.js or vendorCss.js depending on what you are adding. i.e: Adding jquery

npm install --save jquery

This will generate the jquery folder inside node_modules and add the register the dependency in the package.json file. Then, add the source file of jquery to vendorJs.js. It should look like this:

module.exports = [
  'jquery/dist/jquery.js',
];

Deploy

S3

In order to deploy you must first create config/aws.js file with the credentials of the Amazon S3 bucket for each environment. The file needs to have to follow the format specified in config/aws.js.example

Then just run gulp s3 --env <environment name> with your desired env as parameter.

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request

About

This project is maintained by Sebastian Balay and it was written by Wolox.

License

frontend-bootstrap is available under the MIT license.

Copyright (c) 2015 Sebastián Balay <sebastian.balay@wolox.com.ar>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

trueshizus/frontend-bootstrap