Rails 4 Extranet and E-Commerce application implementing Devise "Single Sign On" with "Active Admin", "Comfy Mexican Sofa" and "Spree Commerce"
Rails 4 Extranet and E-Commerce application implementing Devise "Single Sign On" with "Active Admin", "Comfy Mexican Sofa" and "Spree Commerce" {#welcome}
This tutorial explains how to implement a unified application using a Devise to authenticate admin users and standard spree authentication to authenticate spree users.
Assumptions and Dependencies
This tutorial assumes that operating system in use is Ubuntu 12.04 and that Rails version 4 is being used (which is the most recent version at this time.
This [tutorial][1] at digital ocean explains how to install rails properly on Ubuntu using RVM. This tutorial also assumes one understands the standard unix file structure and can find launch and type into the unix command line, edit files as well as install Ubuntu 12.04 LTS. Also wherever you see "localhost" you can substitute the hostname or IP address of your linux host.
NOTE: The upshot of this is that you need a very very minimal experience with the concept of the linux command line as used in VPS (virtual private servers) etc. This familiarity can be obtained within 30 minutes easily perhaps alot less. It is likely that you already possess this familiarity.**
Create New Rails Application
First we need to create a new rails application. We do this in the command line as shown below it will give you lots of output and in the case below create an application in the folder "unified".
<i class="icon-file"></i> Terminal
rails new unified
Change into application directory
<i class="icon-file"></i> Terminal
cd unified
Installing "Comfy Mexican Sofa CMS", "Active Admin" and "Spree Commerce"
"Comfy Mexican Sofa" is the ruby gem we will use to provide the CMS functionality for this application, "Active Admin" provides the general administrative interface and "Spree" provides the shopping cart functionality. To install these gems this we add them to the Gemfile and then bundle. Bundle will produce considerable output.
<i class="icon-pencil"></i> .Gemfile
gem 'comfortable_mexican_sofa'
gem 'activeadmin', github: 'gregbell/active_admin'
gem 'spree', '2.1.0'
gem 'spree_auth_devise', :github => "spree/spree_auth_devise", :branch => "2-1-stable"
<i class="icon-file"></i> Terminal
bundle
Configuring "Comfortable Mexican Sofa" CMS
In order to configure "Comfortable Mexican Sofa" we need to to generate it and run the migrations
<i class="icon-file"></i> Terminal
rails g comfy:cms
rake db:migrate
We can start the server now to see the cms.
<i class="icon-file"></i> Terminal
rails s
You can then view the cms admin interface at http://localhost:3000/admin Ctrl + C stops the server. We do not want the cms to load in the /admin path because this is where active admin will be loading so we need to edit the mount path for the cms in config/routes.db. we change the line comfyroute :cmsadmin, :path => '/admin' so that the cms mounts at /cms. We can then start the server once more.
<i class="icon-pencil"></i> config/routes.rb
comfy_route :cms_admin, :path => '/cms'
<i class="icon-file"></i> Terminal
rails s -d
The cms admin interface will then be viewable at http://localhost:3000/cms
Configuring "Active Admin"
Configuring Active Admin simply consist of running the generator and migrations for now.
<i class="icon-file"></i> Terminal
rails generate active_admin:install
rake db:migrate
Active Admin is now viewable at http://localhost:3000/admin
in your config/initializers/active_admin.rb
config.before_filter do
params.permit!
end
Edit CMS initializer to use ActiveAdmin authentication
module CmsDeviseAuth
def authenticate
unless current_admin_user
redirect_to '/admin/login'
end
end
end
config.admin_auth = 'CmsDeviseAuth'
Configuring "Spree Commerce"
TO configure spree first we must generate it.
<i class="icon-file"></i> Terminal
rails generate spree:install
We do not want the cms to load in the / path because this is where spree will be loading so we need to edit the mount path for spree in config/routes.db. we change the line mount Spree::Core::Engine, :at => '/' so that the cms mounts at /shop. We can then start the server once more.
We need to generate the admin user.
<i class="icon-file"></i> Terminal
rails generate active_admin:install
rake db:migrate
Edit Gemfile
gem 'spree_fancy', :git => 'git://github.com/spree/spree_fancy.git', :branch => '2-1-stable'
bundle install
bundle exec rails g spree_fancy:install
Restart server
Configure Git
Initialize repository
<i class="icon-file"></i> Terminal
git init
Edit .gitignore so that database changes are also tracked by commenting the lines that ignore the database file and database log.
<i class="icon-pencil"></i> .gitignore
# Ignore the default SQLite database.
#/db/*.sqlite3
#/db/*.sqlite3-journal
Configuring CSS and Javascript
In order to stop ActiveAdmin from affecting the styles of our main application and avoid the loading of Spree and CMS stylesheets in our main application. We need to stop it from loading the tree. To do this we edit app/assets/css/application.css replacing require_tree . with require statements for our individual css in this case monster.css which resides in app/assets/css/
<i class="icon-pencil"></i> app/assets/css/application.css
*= require monster
In order to speed up load time we want to disable asset debugging in the development environment. We do this by making the edit below
<i class="icon-pencil"></i> config/environments/production.rb
config.assets.debug = false
Add TinyMCE WYSIWYG
To use TinyMCE add it to .Gemfile and edit the layout in CMS to use rich_text for the pages instead of text.
<i class="icon-pencil"></i> .Gemfile
gem 'tinymce-rails'
Locating necessary Layout, Partial and Assets
<i class="icon-file"></i> Terminal
bundle show spree
bundle show spree_frontend
bundle show spree_fancy
bundle show comfortable_mexican_sofa
Test
Now you should be able to see the CMS admin interface at http://localhost:3000/cms
You should be able to see the activeadmin interface at http://localhost:3000/admin
You should be able to see the activeadmin interface at http://localhost:3000/shop
Written by Dion Santana
Related protips
1 Response
@diosan: great article mate.