Optimal Ruby on Rails Setup for 2020

Is Rails viable in 2020? What is the best way to use it for a modern monolith?

Rails is better than ever to build new projects with, it has always done an amazing job at developer experience through its generators and getting right into coding your app instead of building config for weeks to wire up your bespoke solution for another web application.

One area it has started to accelerate over the last few years has been the front end experience. It has taken a while to get right but it has become quite awesome and follows suit with the rest of “the Rails way”, which is something like: “get all of the decisions that don’t matter to this project out of my way so we can get to coding our app.”

So, what is the best way to set that up now? Most of the custom setup for a new app is in the front end and so that is where we will spend most of our time in this post.

Tech Stack:

• Rails 6
• PostgreSQL — database
• RSpec — testing framework
• React with Webpacker — for JavaScript
• TailwindCSS — for styling

Let’s get into it.

I am going to assume you have an updated version of Ruby, as well as PostgreSQL, installed on your machine.

First, let’s update your version of Rails by running gem update rails and then install our new application by running rails new MyNewApp -T -d postgresql --skip-sprockets in the folder we wish to have the project.

Here are the details about the flags we added to this install:

1. the -T tells us that we skip the testing framework (because we will install RSpec later).
2. the -d postgresql installs the Postgres gem and sets up the config to work with Postgres by default if you didn’t guess.
3. the --skip-sprockets skips sprockets. haha. sprockets, if you didn't know, is the toolset that was used to compile JavaScript, SASS from your assets folder.

One last thing to note is that Rails 6 Webpacker is installed by default. What is Webpacker? It is the gem that Rails now uses to integrate with JavaScript, but it takes a little bit more setting up to get it to work with React. We are going to use another gem called React-Rails that gives us helpers to include React components in our rails views.

So, let’s run cd MyNewApp to move into our app and run bundle add react-rails to add the gem to our bundle.

Next, let’s run the generators to get the react portion built out:

rails webpacker:install:react

then:

rails generate react:install

This does all the setup of our Rails app with React. You will see some new files where our components live, but let’s generate our own. First, we will create a new view for it to live on.

Add a route by adding root to: "application#index to the config/routes.rb file.

Then Add the file app/views/application/index.html.erb

Next, we can generate a React component to use on that page by running: rails g react:component MyHomePage tagline:string

As you will see, that generated this component file: app/javascript/components/MyHomePage.js

Now that we have Webpacker installed and it is using Webpack to compile all our JavaScript into a single file, how do we include this file in our Rails app?

Well, there are a few things going on here. Webpack automatically generates a file for every file in the “pack” folder. This is our entry file. In our app, we have an application.js file for this. When we setup react-rails , it added some code to map all the components in the javascript/components folder into the application.js file and mount them as top-level components we can use in our view files.

react-rails also gives us this helper to use those components, so let's add this component to our app/views/application/index.html.erb file, by adding this line:

<%= react_component("MyHomePage", {tagline: "super duper site"}) %>

you should now be able to start the rails server and browse to localhost:3000 and see our component rendered! awesome!

Let’s add some styles to this!

I love TailwindCSS. I have always been a fan of helper classes, especially when they are well designed and documented. Tailwind gives us the ability to stay in flow and if you want to learn more about that you can click here to read more about it.

First, we add Tailwind via yarn by running: yarn add tailwindcss

Next, we need to create a new stylesheet, for our CSS to land in:

mkdir app/javascript/styles

touch app/javascript/styles/application.css

Then there are 3 files you need to import into our new application.css file:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

But, this won’t completely satisfy our compiler; we need to generate a Tailwind config file and since Rails uses PostCSS now, let’s make sure we add what we need to the PostCSS config.

To generate a config for Tailwind, run: npx tailwindcss init (this also lets you change and extend the default theme).

To setup our PostCSS config, we add require('tailwindcss') and require('autoprefixer') to postcss.config.js

It should look like this:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

Next, we need to setup our CSS to be included in our app correctly.

Add the application.css to the application.js file so Webpacker will compile it like this:

import "../styles/application.css";

In our application layout, change stylesheet_link_tag to stylesheet_pack_tag

Remove the stylesheets in the app/assets/stylesheets folder.

Restart our server and we should see our CSS is now loading.

You should be able to see that TailwindCSS reset the default font face to sans serif.

Lastly, let’s get our testing framework installed and running.

Run bundle add rspec-rails and then generate all the files to install it by running : rails g rspec:install

Next, let’s tell Rails to generate the correct test files when using generators by adding this to our config/application.rb:

config.generators do |g|
  g.test_framework :rspec,
  fixtures: false,
  view_specs: false,
  helper_specs: false,
  routing_specs: false
end

We did it! We have our Rails app setup with React, Tailwind, PostgreSQL, and Rspec. I hope you have as much fun with this stack as I have. Here is a link to the code for what we ran through today.

I will soon be building more on this solution about how to pattern the React components you build with a full-stack Rails app. Come back soon!

Contributor’s Bio

Kory lives in the wonderful city, Seattle, Washington. He is a Senior Software Engineer at Echobind and has been writing full-stack web applications for the last eight years.