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

Getting the dev dependencies

Run npm install from rootpath of the project.

The dependencies' dependencies

The sass linter we use relays on a ruby gem called scss_lint, so...

gem install scss_lint

Bower and gulp. The right way

In the following step you will need to use bower, and during the project development you will probably use gulp every day, so let's use them in the right way. A very popular way of installing these packages is simply tell npm to install them globally. (Do not execute the following line, just keep reading)

npm install -g gulp bower

That's needless as gulp and bower are already 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 this 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 bower just use the following ./node_modules/.bin/bower. Same for gulp. Adding an alias for these tools is highly recommended. Like the following:

alias gulp='node_modules/.bin/gulp'
alias bower='node_modules/.bin/bower'

Getting the project dependencies

The actual dependencies that will be used to develop the app are managed using bower. You can easily get them with the following command

bower install

You may be asking: why don't we simply get these packages using npm? Here are some articles I suggest reading about bower:

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. Take a look at GULP_TASKS.md for a detailed explanation of the gulp tasks.

Development

Vendors

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

bower install --save jquery

This will generate the jquery folder inside bower_components. 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 gulp/aws.js file with the credentials for the Amazon S3 bucket, this file is already added to .gitignore so you don't compromise the keys by pushing them to the repository. The file needs to have to follow the format specified in gulp/aws.js.example

Then you just run gulp build followed by the deploy task gulp s3:staging or gulp :s3:production

Heroku

Pushing the desired branch to heroku should be enough.

Troubleshooting

npm permissions

If you are struggling with permission problems when using npm, you can try the following commands to avoid using sudo every time you have this troubles.

sudo chown -R $USER ~/.npm

sudo chown -R $USER .

S3 deploy

NOTE: You must have the corrects AIM permissions, if not, amazon will report an Access Denied error

gulp watch

If having problems with gulp watch, run echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p. This solution was found here.

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 <[email protected]>

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.

ramadis / training_bootstrap Goto Github PK

training_bootstrap's Introduction