Getting started with Solidus and a custom TailwindCSS frontend

Getting started with Solidus and a custom TailwindCSS frontend
Do not index
Do not index
URL

Introduction and Rails setup

In the previous posts on this subject I started with using a very opinionated and somewhat heavy starter template. While working on the updates on the articles I came to the realisation that the content was missing the focus on working with Solidus and more about all the steps needed to have it setup. Update strong_migration config, setup standardrb etc etc.
So, I through it all out and started fresh again. This time with only the most minimal changes to the generated Rails application. This first article is the setup and getting Solidus up and running for you locally.
Every step will be merged in main and (eventually) deployed automatically by Hatchbox. We will cover the production setup including encrypted credentials, ActiveStorage and emails. First we will setup our main codebase. You can follow along here:
blogstore
Github
blogstore
Owner
peterberkenbosch
Updated
Sep 1, 2023
We are running on the latest Ruby, at the time of writing version 3.2.2 and Rails 7.0.7. Without further ado, let’s dive in.
We are using esbuild and tailwind for our frontend needs and Postgresql for our database. To create that initial Rails application we run the following:
rails new blogstore -j esbuild -d postgresql --css=tailwind --skip-action-mailbox --skip-action-text
For running the local system I prefer overmind, and the default setup bin script got some changes so it will resets the database and also checks the yarn packages and will install if needed. These changes are not really part of this series and I will not describe it further. You can see the changes made to the default generated app here:

Install and configure Solidus

In the command line run this:
bundle add solidus
And then run the solidus generator with:
bin/rails g solidus:install
This will present a prompt with a few questions for the installer. We want to make sure that we do not install any frontend and payment options through the installer. We only want to install the default devise authentication, this will install the solidus_auth_devise extension and that’s enough for us to get started:
question  Which frontend would you like to use?
              - [starter] Generate all necessary controllers and views directly in your Rails app (default).
              - [none] Skip installing a frontend.
      answer: none
The next question we can accept the default, I typed devise so it’s very clear here that we want to use the devise extension.
question  Which authentication would you like to use?
              - [devise] Install and configure the standard `devise` integration (default).
              - [existing] Integrate and configure an existing `devise` setup.
              - [custom] A starter configuration for rolling your own authentication system.
              - [none] Don't add any configuration for authentication.
      answer: devise
No payment method, we will use Stripe, but will install this later when we have our frontend running.
question  Which payment method would you like to use?
              - [paypal] Install `solidus_paypal_commerce_platform` (default).
              - [stripe] Install `solidus_stripe`.
              - [braintree] Install `solidus_braintree`.
              - [none] Skip installing a payment method.
      answer: none


When everything is installed you will see this line:
complete  Solidus has been installed successfully. Enjoy!
If you now run bin/dev and visit http://localhost:3000/admin you will see the admin login page:
notion image
You can now login with admin@example.com and test123 into a fully operational Solidus admin battle station:
notion image
Next up will be setting up testing support and create a homepage!
To follow along step by step. The steps above are done in this branch:
 

Written by