Ruby on Rails E-Commerce in 2019! Demo Included

When it comes to certain things in life, I'm a purist. A snob, even. Now if you don't have time—or simply don't care—to learn why I'm a purist, feel free to skip to our Rails e-commerce tutorial! Otherwise, let me explain...

On the guitar, I avoid using a capo; when learning another language, I avoid Google Translate; when my best friend in the second grade brought a Game Genie for my Super Nintendo, I was forced into a tough realization: he could no longer be my best friend.

After all, if I'm going to learn something, I'm going to learn it right. No shortcuts, not for me.

Which is why I was so torn when taking a deeper dive into Ruby on Rails. At times, Rails feels like cheating… but it's also addictingly fun.

So today I'm going to put my purist biases aside to explore Ruby on Rails e-commerce. In this post, I'm going to briefly explain what Ruby on Rails is, look at why it's controversial, and finally explain the advantage of using Rails for e-commerce.

As an added bonus, I'm even going to show you exactly how you can build a Ruby on Rails e-commerce site using Refinery CMS. You'll get a step-by-step look into how to:

• Create the Refinery site

• Integrate Snipcart's shopping cart

• Make database migrations

• Define new inventory

• Build an e-commerce template

But first, a confession. I had never really given Ruby on Rails a fair shake because, to me, it was always summed up by two words:

Confusion and Controversy.

No, that's not the name of my new retro-punk band (though that would be a killer name). Those are just two ideas that would always spring to mind whenever I read about Rails.

Confusion and controversy.

The confusion comes in because a lot of young, up-and-coming coders can't seem to grasp the idea that Ruby and Ruby on Rails are two separate concepts. So just for the sake of clarity, let's clear this up at the forefront: They're different. Very, very different.

A few words on Ruby & Ruby on Rails

Ruby is a programming language. Rails is a server-side web framework written in Ruby. You can think of Rails as the Django to your Python or the Vue.js to your JavaScript. The framework always needs the language, but the language doesn't always need the framework.

So how does a simple RoR definition get confused with Ruby?

Ruby and Rails are often taken hand-in-hand because of the framework's initial and ongoing popularity. Since its creation back in 2005 by David Heinemeier Hansson (one of the brilliant minds that brought us Basecamp), the mighty powers of Rails have overshadowed the foundational language. But this popularity hasn't gone without some criticism—which leads us to the….

...Controversy: The "No True Scotsman" Argument against Rails

Ok, so "controversy" might actually be too strong of a word here. If you've ever gotten lost reading through an endless spiral of coding forums (and let's be real, we all have), then you've likely noticed that Rails has a lot of die-hard fans. They swear by it. In fact, one of Rails' advantages is that it has a thriving and incredibly outspoken community.

It's really the critics of Rails who make things interesting. I wouldn't necessarily say a lot of programmers dislike it, they simply... dismiss it. For them, Rails is like "coding on training wheels."

You see, many of Rails' benefits are also its downfall: easy to learn, very forgiving, and a lot of things under the hood that you never really have to look at. Basically, critics think Ruby on Rails should be advertised with the following warning:

Not for true, hardcore devs.

Now, if you're reading this as an avid Rails user, I know what you're thinking, "Thems' fightin' words." And yeah, I get it. After all, if you can build a Ferrari in your garage, who cares if the engine comes pre-built? You still got the Ferrari.

Both sides, it seems, have fair arguments. And it's not my job to change anyone's mind. What I will do, however, is find some common ground. Below you'll see four indisputable reasons why using Rails for e-commerce is advantageous for devs.

Why use Rails for e-commerce?

1. Clean, quick, and cost efficient

If you're creating an e-commerce site for yourself or a client, one of the strongest arguments for using Rails is how quickly you can make a site that isn't only functional but looks sleek. All those pre-built conventions (that we talked about above) and that large library of gems (that we'll talk about below) will fast track your site's creation time. Plus, because of the language's simplicity and the DIY attitude, maintenance becomes way more manageable. If it's true that time = money (and it is), then Rails allows you to save both.

2. Large, vocal community

Rails has one of the largest active communities in the programming world. And just like the saying goes, "there's nothing new under the Ruby sun," this community is more than willing to give advice for overcoming any bugs you may be run into. This means that you—and your Rails e-commerce site—has a whole (and invisible) IT department running behind it.

Plus, you've got cool gems. Gems are like apps that you can integrate into your Rails site and as the framework has grown, so have the number of Rails e-commerce gems to pull from. There is a whole community on GitHub who've created gems for just about any use you would need. Sure, some devs prefer to code and create these functions themselves. But others take the "Why re-invent the wheel?" approach. The cool thing with Rails is that you have both options.

3. Never dying, ever-evolving

"Is ruby on rails" is one of my favorite things to type into Google because the search engine automatically suggests, "dead." This question comes up again and again in dev-forums.

Here's the short answer: No.

Here's the longer answer: Nope. Not even a little bit.

And here's the reason: Ruby on Rails isn't dead, it's just not experiencing the exponential growth that it did in its infancy. Like all frameworks, Rails had a "buzz" around it after being released. This buzz may be tapering off, but Rails is still alive and kicking. In fact, just last month Rails came out with their latest version, 5.2.2, which has loads of new features.

4. Marketable

Rails has become an incredibly valuable skill in the web dev market. But let me be clear.

Here is what I'm NOT saying: Rails is the most marketable framework out there.

Here's what I AM saying: Rails is still very marketable.

I've seen too many forum threads asking, "Which is the most profitable web framework to know?" with a list that usually includes Rails, Django, Node.js, etc. The bottom line is that for a programmer at any level, the simplicity of Rails combined with the number of companies wanting to hire Rails proficient devs is an awesome opportunity seldom found. Mastering Rails for e-commerce can lead to many future opportunities just like mastering any other framework. The difference is that the time it will take you to master Rails is potentially much, much lower than any other framework out there, but the quality of the site is arguably the same—or, at the very least, competitive.

What are Some Great Rails E-commerce Tools?

Ok, so whether you love, tolerate, or choose to ignore Rails, everyone should at least have a look at the fully stocked Rails e-commerce solutions out there:

• Solidus : An open-source e-commerce platform for high-volume businesses

• Spree E-Commerce: Or, rather, Spree Commerce. A complete, scalable, and API-driven open source e-commerce framework

• Sharetribe: A peer-peer marketplace platform

But if you're looking for something a little more customized, check out our hand-tailored e-commerce setup using Refinery CMS with a Snipcart integration.

In the following tutorial, you're going to learn how to do everything from start to finish using Refinery CMS to create a site, define your products, and build a unique e-commerce template. Like Rails itself, the combination of Refinery CMS and Snipcart makes the process simple, elegant, and super effective.

Let's get started!

Rails e-commerce tutorial with Refinery CMS

Pre-requisites:

• a Snipcart account (forever free in Test mode)

• Ruby on Rails installed (5.2.2 in our demo)

Installing what's necessary

First things first, you'll have to install what's needed for Refinery to work. Now, I won't go into much detail about how to do so because it's thoroughly explained in their Installation Prerequisites.

Once this is done, you'll have to run the following command to scaffold the Refinery project:

refinerycms refinery-snipcart

Creating an extension

We could have overloaded the CMS pages to create our products but we will be a little neater and create our own extension in order to keep Snipcart's things apart. Refinery ships with an awesome extension scaffolding tool, and that's what we're going to use to generate ours. To do so, run the following command:

rails generate refinery:engine product name:string description:string price:integer photo:image

After the scaffolding is completed, don't forget to run these commands:

bundle install
rails generate refinery:products
rake db:migrate

The command is pretty self-explanatory; it will create an entity with a name, id, description, price, and photo with the corresponding types (string, string, integer and image).

Migrating to Postgres

Now, SQLite3 is a great database to kickstart a project, but I think it can run short if you are building a full-blown production project. For that reason, we will migrate our database to Postgres instead of SQLite3. It will also make it easier for us to push to Heroku once we are ready for production. If you don't already have Postgres installed you will have to download it here.

Once Postgres is downloaded, install it and define a password for the default user.

Now, hop back to your IDE and open your Gemfile. In it, replace the gem 'sqlite3' line to gem 'pg'. Then, run bundle install. The last thing we will need to update is the config/database.yml file. So open it and change it to:

default: &default
  adapter: postgresql
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  timeout: 5000
  password: {YOUR_POSTGRES_PASSWORD}
  username: postgres
development:
  <<: *default
  database: db/dev_db
# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: db/test_db
production:
  <<: *default
  database: db/production_db

We're almost set, you'll just have to run the following commands to populate your database:

rake db:create
rake db:migrate
rake db:seed

Once it's finished you can run: rails server. If you've set everything correctly a local server should boot up on port 3000. To start your Refinery install, hit:

http://localhost:3000/refinery

You should be prompted with a form to create a user looking like this:

After you've created your user, you will be redirected to Refinery's dashboard where you will see our brand new Products panel. That's what we will use to define our products. Click on the Add a new product link and define your products, like we do below:

Creating views

At this point, we have a database with our products inside them. What we need to do is consume this data in order to show it in 'views.' Hit your server index which is typically http://localhost:3000. Then, hit the products link. Voilà! Your views should compile without errors now, and you should see all the corresponding product's information rendered as a list. The view is rather barebone so we will go ahead and make it a little funkier. Open your IDE again and hop to:

vendor/extensions/products/app/views/refinery/products/products/show.html.erb

This is the view used to render each individual product. That's where we will show buy buttons which means Snipcart's necessary scripts will also have to be on that page. To do that, add the following to the template:

<% content_for :meta do%>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" data-api-key="YOUR_API_KEY" id="snipcart"></script>
    <link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" rel="stylesheet" type="text/css"  />
<%  end  %>

This will render the scripts at the start of the <head> tag, exactly what we want. (Don't forget to override YOUR_API_KEY in snipcart.js script tag. After that we will have to declare our buy button. Here's the code we used:

   <section>
    <%= content_tag("button", 
    'Buy it for ' + @product.price.to_s + "$",
    :class => "snipcart-add-item",
    :data => { 
      :"item-name" => @product.name,
      :"item-id" => @product.id,
      :"item-image" => @product.photo.thumbnail({}).url,
      :"item-url" => refinery.products_product_path(@product),
      :"item-price" => @product.price,
      :"item-description" => @product.description
    }) %>
  </section>

Perfect! Now we can hit a product page and add a product to our shopping cart! At the moment, there's really no styling to our website whatsoever, so it won't resemble our end demo. If you wish to check out how we styled our demo you can go directly to the source on Github through the link at the end of this post.

Deploying our store

Here's the final step to get our store up and running for real clients. We will be using Heroku to host our [demo] but you're not limited by that if you wish to go another route.

You will need the Heroku CLI in order to do this, which you can download here.

After that, open your cmd and run heroku login, after being logged in, run heroku create. This will create a brand new heroku app. Then run heroku addons:create heroku-postgresql:hobby-dev. This will link Postgres to your app so you can create your database. Then you can git add . and commit to finally push on your project with git push heroku master. This will trigger the build automatically and scaffold your app. You only need to run heroku run rake db:migrate and heroku run rake db:seed.

Hooray, now our whole setup is up and running! Although, if you're opening your Heroku app, you will see that we lost our products along the way. No worries, this is normal. You can either redefine them in the dashboard as we previously did or import your local files by creating a dump beforehand. I won't cover the details of the second option but Heroku explains it very well here.

Live demo & GitHub repo

Closing thoughts

So that's it! Overall, great experience with Rails and Refinery CMS.

Things I liked:

• It was fun to play with and it was a totally new experience.

• RoR is a little bit tricker to work with on Windows, so I had to dive in some lower level configuration to make this work.

• I found it fun and more challenging than simply adding a package to my project.

Things I didn't like:

• Ruby's syntax was new to me and I felt completely lost for the first hour. Really simple things made me feel like I had gone astray.

• There aren't that many discussions about Refinery CMS online so if you can't find your question in their docs, you will have to dig on your own.

• Refinery CMS architecture felt a little bit convoluted. I really needed to dive deep into their docs to find what I thought were simple questions. Some principles I felt should have been a little bit more intuitive but, again, it was my first experience with Ruby so I am probably the one to blame ;)

If you've enjoyed this post, please take a second to share it on Twitter. Got comments, questions? Hit the section below!