Preparing the Rails App

Ruby, Rails & system packages

Required software

  • Ruby 2.2.2 or later, e.g. 2.3.1, see the .ruby-version file
  • Rails 5.0.x, required  for Solidus 2.0,  If you are still using Rails 4.2, you can use Scrivito 1.7 and Soldius 1.4 instead.
  • Generate a new Rails app (or reuse an existing one): rails new mystore
  • An SQL database: sqlite3 for local development, MySQL/MariaDB or PostgreSQL for production
  • Solidus requires imagemagick: brew install imagemagick on OS X, or refer to imagemagick.org for installation on Unix

Recommendations

Remove the spring and spring-watcher-listen gems from your Gemfile. It is often in the way during development. We will also remove turbolinks below, since Scrivito does not support it yet.

Use dotenv-rails to be able to store “local” ENV variables in .env, e.g. Scrivito credentials or the secret key of Devise (used by Solidus, see below).  You can use secrets.yml if preferred.

Add the following to your Gemfile:

gem 'dotenv-rails', '~> 2.0'

Run bundle install, then add the following to the .gitignore file:

# Ignore dotenv-rails files
.env
.env.production

Adding Solidus

Add the following gems to your Gemfile:

gem 'solidus', '~> 2.0'
gem 'solidus_auth_devise'
gem 'deface', '~> 1.0'

Execute bundle install, then install Solidus:

bundle exec rails g spree:install

The installer will ask you to enter an e-mail address and a password for the Solidus admin user.

Then:

bundle exec rails g solidus:auth:install

Optionally, you can use a different file storage backend for production. Solidus/Spree stores its files using Paperclip which lets you choose among several storage options, e.g. Amazon S3, Azure or Dropbox.

Show Amazon S3 integration

Using Amazon S3 via Paperclip

First, add the aws-sdk gem to your app. Then specify the S3_BUCKET_NAME and S3_BUCKET_REGION to use in your .env file. If you are not using AWS IAM profiles, also specify AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY. After that, create the following initializer:

Copy
# config/initializers/paperclip.rb

if ENV['S3_BUCKET_NAME']
  s3_credentials = {
    bucket: ENV.fetch('S3_BUCKET_NAME'),
    s3_region: ENV.fetch('S3_BUCKET_REGION'),
    s3_host_name: "s3-#{ENV.fetch('S3_BUCKET_REGION')}.amazonaws.com",
  }

  if ENV['AWS_ACCESS_KEY_ID']
    s3_credentials.merge!({
      access_key_id: ENV.fetch('AWS_ACCESS_KEY_ID'),
      secret_access_key: ENV.fetch('AWS_SECRET_ACCESS_KEY'),
    })
  end

  Paperclip::Attachment.default_options.merge!(
    storage: :s3,
    s3_credentials: s3_credentials,
  )

  Spree::Image.attachment_definitions[:attachment].delete(:url)
  Spree::Image.attachment_definitions[:attachment].delete(:path)
end

You should now be able to start the Rails app: bundle exec rails s. Visit http://localhost:3000/ and enjoy your (very) basic installation of Solidus/Spree.

Adding Scrivito

First, remove turbolinks. Turbolinks will be supported starting at one of the next releases, but currently they're not.

  • Remove the turbolinks gem from your Gemfile.
  • Remove require turbolinks from app/assets/javascripts/application.js.
  • Remove 'data-turbolinks-track' from app/views/layouts/application.html.erb.

Next, add the following to the Gemfile:

​gem 'scrivito', '~> 1.7'
group :development, :test do
gem 'thin'
end

Execute bundle install.

Now, obtain your Scrivito API credentials from your Scrivito CMS settings.

SCRIVITO_TENANT is the ID of your CMS. Click the title or the gear icon of the CMS; its ID should then be displayed on the next page and is also part of the URL.

Your SCRIVITO_API_KEY can be found on the "Danger Zone" tab (you just need one of them).

Add these values to the .env file, like so:

SCRIVITO_API_KEY=api_key
SCRIVITO_TENANT=tenant_id

To complete the integration, follow the integration instructions, but please skip step 9, “Optionally integrate a front-end framework” since we will be using Solidus' markup.

You should now be able to run the app. Start the Rails app using bundle exec rails s, then visit http://localhost:3000/

There is no styling yet, so the site won't look good. We will add nice styling later on. Next let's define the routing.