Rails 3.2 example application shows how to use Devise with CanCan and Twitter Bootstrap.
- Devise gives you ready-made authentication and user management.
- CanCan provides authorization for administrator access.
- Twitter Bootstrap is a front-end framework for CSS styling.
Best of all, there’s a detailed tutorial to show how it’s built.
You can build this application in only a few minutes using the Rails Composer tool.
Follow the project on Twitter: @rails_apps. Please tweet some praise if you like what you’ve found.
An in-depth tutorial is available (subscription required). Subscriptions provide financial support for the RailsApps project.
You can use the starter app without getting the tutorial. The tutorial provides a detailed explanation of the code:
If you’d like a Rails 4.0 tutorial (without Devise or CanCan):
For Rails 3.2:
The tutorial documents each step to follow to create the application. Every step is documented concisely, so a complete beginner can create this application without any additional knowledge. However, if you are new to Rails, it is best to start with Learn Rails, the beginners’ tutorial.
This is a demonstration application that allows you to visit a home page and see a list of users. Devise provides user management so a visitor can register with an email address and password and create an account. Devise provides authentication so access to the site can be limited to users who are registered and logged in. CanCan is used for authorization, limiting access to only an administrator for designated pages. An administrative dashboard allows the administrator to delete any user or change a user’s role.
The rake db:seed command sets up a database with an administrator who can view a administrative page when logged in. Additional users can be added; each is restricted from accessing the administrative page.
This is one in a series of Rails example apps and tutorials from the RailsApps Project. See a list of additional Rails examples, tutorials, and starter apps.
This example application is based on the rails3-devise-rspec-cucumber example and tutorial and adds CanCan and Twitter Bootstrap. View the rails3-devise-rspec-cucumber example and tutorial for the basics of setting up an application with RSpec and Cucumber.
This example application uses ActiveRecord and a SQLite database. You can use the Mongoid ORM with the MongoDB datastore instead, for faster development without schemas or migrations. The rails3-mongoid-devise example app and tutorial shows how to set up Devise and Mongoid with RSpec and Cucumber.
For more complex applications that use Devise, CanCan, and Twitter Bootstrap, see:
- rails-stripe-membership-saas example and tutorial
- rails-prelaunch-signup example and tutorial
Before generating your application, you will need:
- The Ruby language (version 1.9.3 or 2.0.0)
- The Rails gem (version 3.2.13)
See the article Installing Rails for advice about updating Rails and your development environment.
You have several options for getting the code. You can fork, clone, or generate.
If you’d like to add features (or bug fixes) to improve the example application, you can fork the GitHub repo and make pull requests. Your code contributions are welcome!
If you want to copy and customize the app with changes that are only useful for your own project, you can clone the GitHub repo. You’ll need to search-and-replace the project name throughout the application. You probably should generate the app instead (see below). To clone:
$ git clone git://github.com/RailsApps/rails3-bootstrap-devise-cancan.git
You’ll need git on your machine. See Rails and Git.
If you want to use the project as a starter app, use the Rails Composer tool to generate a new version of the example app. You’ll be able to give it your own project name when you generate the app. Generating the application gives you many additional options.
To build the example application, run the command:
$ rails new rails3-bootstrap-devise-cancan -m https://raw.github.com/RailsApps/rails-composer/master/composer.rb -T
Use the -T flag to skip Test::Unit files.
The $ character indicates a shell prompt; don’t include it when you run the command.
This creates a new Rails app named rails3-bootstrap-devise-cancan on your computer. You can use a different name if you wish.
You’ll see a prompt:
question Install an example application?
1) I want to build my own application
2) membership/subscription/saas
3) rails-prelaunch-signup
4) rails3-bootstrap-devise-cancan
5) rails3-devise-rspec-cucumber
6) rails3-mongoid-devise
7) rails3-mongoid-omniauth
8) rails3-subdomains
Choose rails3-bootstrap-devise-cancan. The Rails Composer tool may give you other options (other choices may have been added since these notes were written).
The application generator template will ask you for additional preferences:
question Web server for development?
1) WEBrick (default)
2) Thin
3) Unicorn
4) Puma
question Web server for production?
1) Same as development
2) Thin
3) Unicorn
4) Puma
question Template engine?
1) ERB
2) Haml
3) Slim
extras Set a robots.txt file to ban spiders? (y/n)
extras Use or create a project-specific rvm gemset? (y/n)
extras Create a GitHub repository? (y/n)
We recommend Thin in development for speed and less noise in the log files.
If you plan to deploy to Heroku, select Thin as your production webserver.
The example application uses the default “ERB” Rails template engine. Optionally, you can use another template engine, such as Haml or Slim. See instructions for Haml and Rails.
Set a robots.txt file to ban spiders if you want to keep your new site out of Google search results.
It is a good idea to use rvm, the Ruby Version Manager, and create a project-specific rvm gemset (not available on Windows). See Installing Rails.
If you choose to create a GitHub repository, the generator will prompt you for a GitHub username and password.
If you get an error “OpenSSL certificate verify failed” or “Gem::RemoteFetcher::FetchError: SSL_connect” see the article OpenSSL errors and Rails.
If you get an error like this:
Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.
composer Running 'after bundler' callbacks.
The template [...] could not be loaded.
Error: You have already activated ..., but your Gemfile requires ....
Using bundle exec may solve this.
It’s due to conflicting gem versions. See the article Rails Error: “You have already activated (…)”.
If you’re storing the app in a GitHub repository, please edit the README files to add a description of the app and your contact info. If you don’t change the README, people will think I am the author of your version of the application.
See the article Installing Rails to make sure your development environment is prepared properly.
I recommend using rvm, the Ruby Version Manager, to create a project-specific gemset for the application. If you generate the application with the Rails Composer tool, you can create a project-specific gemset.
Check the Gemfile to see which gems are used by this application.
If you used the Rails Composer tool to generate the example app, the application template script has already run the bundle install command.
If not, you should run the bundle install command to install the required gems on your computer:
$ bundle install
You can check which gems are installed on your computer with:
$ gem list
Keep in mind that you have installed these gems locally. When you deploy the app to another server, the same gems (and versions) must be available.
I recommend using rvm, the Ruby Version Manager, to create a project-specific gemset for the application. See the article Installing Rails.
This example application doesn’t send email messages. However, if you want your application to send email messages (for example, if you plan to install the Devise :confirmable module) you must configure the application for your email account. See the article Send Email with Rails.
You can modify the configuration file for Devise if you want to use something other than the defaults:
- config/initializers/devise.rb
The application uses the figaro gem to set environment variables. Credentials for your administrator account and email account are set in the config/application.yml file. The .gitignore file prevents the config/application.yml file from being saved in the git repository so your credentials are kept private. See the article Rails Environment Variables for more information.
Modify the file config/application.yml:
# Add account credentials and API keys here. # See http://railsapps.github.io/rails-environment-variables.html # This file should be listed in .gitignore to keep your settings secret! # Each entry sets a local environment variable and overrides ENV variables in the Unix shell. # For example, setting: # GMAIL_USERNAME: Your_Gmail_Username # makes 'Your_Gmail_Username' available as ENV["GMAIL_USERNAME"] # Add application configuration variables here, as shown below. # GMAIL_USERNAME: Your_Username GMAIL_PASSWORD: Your_Password ADMIN_NAME: First User ADMIN_EMAIL: [email protected] ADMIN_PASSWORD: changeme ROLES: [admin, user, VIP]
Set the user name and password needed for the application to send email.
If you wish, set your name, email address, and password for an administrator’s account. If you prefer, you can use the default to sign in to the application and edit the account after deployment. It is always a good idea to change the administrator’s password after the application is deployed.
Specify roles in the configuration file. You will need an “admin” role. Change the “user” and “VIP” roles as you wish.
All configuration values in the config/application.yml file are available anywhere in the application as environment variables. For example, ENV["GMAIL_USERNAME"] will return the string “Your_Username”.
If you prefer, you can delete the config/application.yml file and set each value as an environment variable in the Unix shell.
The db/seeds.rb file initializes the database with default values. To keep some data private, and consolidate configuration settings in a single location, we use the config/application.yml file to set environment variables and then use the environment variables in the db/seeds.rb file.
puts 'ROLES'
YAML.load(ENV['ROLES']).each do |role|
Role.find_or_create_by_name({ :name => role }, :without_protection => true)
puts 'role: ' << role
end
puts 'DEFAULT USERS'
user = User.find_or_create_by_email :name => ENV['ADMIN_NAME'].dup, :email => ENV['ADMIN_EMAIL'].dup, :password => ENV['ADMIN_PASSWORD'].dup, :password_confirmation => ENV['ADMIN_PASSWORD'].dup
puts 'user: ' << user.name
user.add_role :admin
You can change the administrator name, email, and password in this file but it is better to make the changes in the config/application.yml file to keep the credentials private. If you decide to include your private password in the db/seeds.rb file, be sure to add the filename to your .gitignore file so that your password doesn’t become available in your public GitHub repository.
Note that it’s not necessary to personalize the db/seeds.rb file before you deploy your app. You can deploy the app with an example user and then use the application’s “Edit Account” feature to change name, email address, and password after you log in. Use this feature to log in as an administrator and change the user name and password to your own.
The db/seeds.rb file reads a list of roles from the config/application.yml file and adds the roles to the database. In fact, any new role can be added to the roles datatable with a statement such user.add_role :superhero. Setting the roles in the db/seeds.rb file simply makes sure each role is listed and available should a user wish to change roles.
You may wish to include additional sample users:
user2 = User.find_or_create_by_email :name => 'Second User', :email => '[email protected]', :password => 'changeme', :password_confirmation => 'changeme' puts 'user: ' << user2.name user2.add_role :VIP
This will add a second user to the database with a “VIP” role.
Prepare the database and add the default user to the database by running the commands:
$ rake db:migrate $ rake db:seed
Use rake db:reset if you want to empty and reseed the database.
Set the database for running tests:
$ rake db:test:prepare
If you’re not using rvm, the Ruby Version Manager, you should preface each rake command with bundle exec. You don’t need to use bundle exec if you are using rvm version 1.11.0 or newer.
If you’ve used the Rails Composer tool to generate the application, the application’s secret token will be unique, just as with any Rails application generated with the rails new command.
However, if you’ve cloned the application directly from GitHub, it is crucial that you change the application’s secret token before deploying your application in production mode. Otherwise, people could change their session information, and potentially access your site without permission. Your secret token should be at least 30 characters long and completely random.
Get a unique secret token:
rake secret
Edit your config/initializers/secret_token.rb file to add the secret token:
Rails3BootstrapDeviseCancan::Application.config.secret_token = '...some really long, random string...'
You can check that your application runs properly by entering the command:
$ rails server
To see your application in action, open a browser window and navigate to http://localhost:3000/. You should see the default user listed on the home page. When you click on the user’s name, you should be required to log in before seeing the user’s detail page.
If you are using the default values from the config/application.yml file, you can sign in as the administrator using:
- email: [email protected]
- password: changeme
You’ll see a navigation link for Admin. Clicking the link will display a page with a list of users at
http://localhost:3000/users.
If you’ve added a second user, (unless you’ve changed it) use
- email: [email protected]
- password: changeme
The second user will not see the Admin navigation link and will not be able to access the page at
http://localhost:3000/users.
Stop the server with Control-C.
If you test the app by starting the web server and then leave the server running while you install new gems, you’ll have to restart the server to see any changes. The same is true for changes to configuration files in the config folder. This can be confusing to new Rails developers because you can change files in the app folders without restarting the server. Stop the server each time after testing and you will avoid this issue.
For your convenience, here is a Tutorial for Rails on Heroku. Heroku provides low cost, easily configured Rails application hosting.
Be sure to set up SSL before you make your application available in production. See the Heroku documentation on SSL.
Add this configuration parameter to the config/application.rb file:
# Heroku requires this to be false config.assets.initialize_on_precompile=false
Then precompile assets, commit to git, and push to Heroku:
$ rake assets:precompile $ git add -A $ git commit -m "assets compiled for Heroku" $ git push heroku master
You’ll need to set the configuration values from the config/application.yml file as Heroku environment variables. See the article Rails Environment Variables for more information.
With the figaro gem, just run:
rake figaro:heroku
Alternatively, you can set Heroku environment variables directly with heroku config:add.
$ heroku config:add GMAIL_USERNAME='[email protected]' GMAIL_PASSWORD='secret' $ heroku config:add 'ROLES=[admin, user, VIP]' $ heroku config:add ADMIN_NAME='First User' ADMIN_EMAIL='[email protected]' ADMIN_PASSWORD='changeme'
Complete Heroku deployment with:
$ heroku run rake db:migrate $ heroku run rake db:seed
See the Tutorial for Rails on Heroku for details.
This application provides no useful functionality apart from demonstrating Devise with CanCan and Twitter Bootstrap working together on Rails 3. Add any models, controllers, and views that you need.
For more complex applications that use Devise, CanCan, and Twitter Bootstrap, see:
- rails-stripe-membership-saas example and tutorial
- rails-prelaunch-signup example and tutorial
The example application contains a suite of RSpec unit tests and Cucumber scenarios and step definitions.
After installing the application, run rake -T to check that rake tasks for RSpec and Cucumber are available.
Run rake spec to run RSpec tests.
Run rake cucumber (or more simply, cucumber) to run Cucumber scenarios.
Please send the author a message, create an issue, or submit a pull request if you can contribute improved RSpec or Cucumber files.
Problems? Check the issues.
The tutorial provides additional documentation.
For a Devise introduction, Ryan Bates offers a Railscast on Devise. You can find documentation for Devise at https://github.com/plataformatec/devise. There is an active Devise mailing list and you can submit Devise issues at GitHub.
Please create a GitHub issue if you identify any problems or have suggestions for improvements.
Your best source for help with problems is Stack Overflow. Your issue may have been encountered and addressed by others.
You can also try Rails Hotline, a free telephone hotline for Rails help staffed by volunteers.
If you make improvements to this application, please share with others.
Send the author a message, create an issue, or fork the project and submit a pull request.
If you add functionality to this application, create an alternative implementation, or build an application that is similar, please contact me and I’ll add a note to the README so that others can find your work.
Daniel Kehoe implemented the application and wrote the tutorial.
Is the app useful to you? Follow the project on Twitter: @rails_apps
and tweet some praise. I’d love to know you were helped out by what I’ve put together.
Copyright © 2012-13 Daniel Kehoe