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 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