A boilerplate front-end app using Sprockets, Sinatra, CoffeeScript, Eco, Slim, and Bower. Develop front-end apps in coffeescript, less, sass, scss, and eco without having to compile your assets. Manage your web dependencies with Bower.
- Sprockets - Asset Pipeline
- Sinatra - Serves HTML
- CoffeeScript - Nicer than JavaScript
- Eco - Embedded CoffeeScript templates
- Slim - Nicer than HTML
- Bower - Package manager for web assets
- json3 - JSON polyfill
- jQuery - JavaScript utilities
- underscore - More JavaScript utilities
- backbone - Model/View/Collection framework
- bootstrap - Common UI elements
- font-awesome - More icon fonts
- select2 - Enhanced select boxes
- qunit - JavaScript unit testing
-
Install Ruby components. The project uses Bundler to manage gem dependencies. You may need to install Ruby and the bundler gem. Ruby dependencies are tracked in the
Gemfile
.bundle install
-
Install web components. The project uses bower to manage web dependencies. You may need to install Node and bower. Web dependencies are tracked in the
bower.json
file.bower install
-
Start the server.
rackup
-
Open the app in a browser at
http://localhost:9292
.
-
Precompile your assets (concatenate and minify/uglify). Note that the
RACK_ENV
environment variable must be set to production when precompiling assets.RACK_ENV=production rake assets:clean assets:precompile
-
Start server in production mode.
rackup -E production
The javascript_tag
helper in your HTML templates will compute the file's fingerprint and serve the compressed/uglified file.
Sprockets will not concatenate require
d files in development environments and instead serve individual javascript files. This will aid debugging, setting breakpoints, and following stacktraces.
The javascript_tag
helper in your HTML templates will create individual <script>
tags for each require
d file.
-
Clone it.
git clone https://github.com/lepfhty/sprockets-sinatra-boilerplate.git
-
Delete the .git folder.
cd sprockets-sinatra-boilerplate rm -rf .git
-
Follow these instructions: Create a repo
bower install <package> -S
- Add the necessary Sprockets directives at the top of assets/javascripts/app.js.coffee. See section below on bower components.
A rackup configuration file starts Sprockets and Sinatra on the same host and port. This project is useful when most of your development is done on a javascript front-end. You can develop in coffeescript, less, sass, scss, and eco without having to compile your assets. Once in awhile, you may add a new route or a new page to the Sinatra back-end application, but this project was not meant to simplify or streamline back-end development.
The rackup file config.ru
runs the Sinatra application module defined in app.rb
. Sprockets integration is provided by the awesome sinatra-asset-pipeline gem.
Web components installed by bower are kept here.
Some components installed by bower declare their distribution files in the bower.json
or component.json
file under the main
attribute. Twitter Bootstrap and jQuery follow this convention. In these cases, Sprockets is "bower-aware" and it is sufficient to use require <component-name>
to include the relevant javascript/css files.
Other components do not follow this convention. FontAwesome, Backbone and Underscore are examples of this. In these cases, you must use the full logical path to each asset needed (like any other asset, no special handling).
Javascript files are kept here.
Maintain your own directory structure (models, collections, controllers, etc...) to organize javascript files. CoffeeScript files with extension .js.coffee
can also be kept here and are dynamically compiled by Sprockets so you don't have to. An example coffeescript file is provided.
Javascript templates are kept here.
Maintain your own directory structure to organize template files. Embedded CoffeeScript files with extension .jst.eco
can also be kept here. An example eco file is provided.
Stylesheets are kept here.
Sprockets supports:
- SASS - add
sass
gem toGemfile
, files with extensions.css.sass
- SCSS - add
sass
gem toGemfile
, files with extensions.css.scss
- LESS - add
less
gem toGemfile
, files with extensions.css.less
This file defines the Sinatra application. It currently renders a single index.slim
file at the /
root URL, using the Slim templating engine. You can define other routes here as necessary.
This project uses the sinatra-asset-pipeline gem to achieve integration between Sinatra and Sprockets in both development and production environments.
Sinatra templates are kept here. Now it contains just the index.slim
Slim template, but you can put others here.
Static files are served by Sinatra from this directory. You may put images or other static assets here as well.