Rails 7 is now more flexible in terms of the front-end technologies we want to use for our projects. Webpacker has been retired and right now is not really recommended to use for new projects.
Make sure that your system has the latest Ruby installed. Check out Rodrigo’s post on Starting a New Ruby on Rails Project for details.
Let’s Get Started
Let’s start a project with this command:
bundle exec rails new . -a propshaft -j esbuild --database postgresql --skip-test --css tailwind
We use PostgreSQL instead of the default SQLite. Make sure that you have PostgreSQL installed on your machine. The fastest way is to install the Posgres.app. Or get your hands dirty by installing it via Homebrew.
We are skipping the default test library here as well. We highly recommend using RSpec instead.
We will use Propshaft as the asset handler and skip Sprockets.
Tailwind CLI for CSS packaging is used here. Since we specified esbuild, Rails assumes that we will use a Node.js-based tool. On the Gemfile,
cssbundling-rails will be added.
After this command, the Gemfile should contain the following entries:
gem "propshaft" gem "jsbundling-rails" gem "turbo-rails" gem "stimulus-rails" gem "cssbundling-rails"
Turbo-rails and Stimulus-rails are defaults.
For the package manager, we will use Yarn, which is also the default choice of Rails. The
package.json should look like this:
dependencies part lists all the packages our run-time code depends on. We have 2 Hotwire libraries and 3 libraries for CSS processing, namely:
scripts part contains scripts that can be invoked by Yarn. The
build script (invoked via
yarn build) triggers esbuild to look at files in
build:css script calls Tailwind to output
application.css, this can be invoked by
Tailwind have a configuration file (
content section is used to determine the files to be used for the final CSS bundle.
applicaiton.tailwind.css file initializes Tailwind classes.
@tailwind base; @tailwind components; @tailwind utilities;
./controllers, which installs Stimulus. The Stimulus documentation explains further how to use it with Turbo.
// Entry point for the build script in your package.json import "@hotwired/turbo-rails" import "./controllers"
app/views/layouts/application.html.erb file should look like below.
Run the App
Rails use the Foreman gem. This allows the application to start multiple processes together. On your
bin/dev file, it checks if Foreman is installed and install it when it’s missing.
if ! foreman version &> /dev/null then echo "Installing foreman..." gem install foreman fi foreman start -f Procfile.dev "$@"
Procfile.dev file contains the processes we want to start. The items below starts 3 processes:
- The Rails server
--watchparameter, so it runs in the background when files change, and
yarn build:csswith a
--watchparameter too. This triggers Tailwind to bundle our CSS.
web: bin/rails server -p 3000 js: yarn build --watch css: yarn build:css --watch
Now let’s run the app by running
Note: If you haven’t created your database yet, run
rails db:create on the console.