Rails is
omakase 🔪🍱
But what if you have allergies 🤧?
(to a spring 🧵 in your soba 🍜, perhaps?)
Fret not,
purveyor of fine apps 📲
for you are in good hands 🤲🏼!
railsnew.io: the simplest way to generate a new Rails app with (or without!) all the bells and whistles.
rails new my_awesome_app
Verify your Stimulus Setup
X CLOSE
- cd into the generated app
> rails g controller verify index
-
paste this into
app/views/verify/index.html.erb:
<div data-controller="hello"> <h1 data-target="hello.output" ></h1> </div>
- >
bin/webpack-dev-server - >
bin/rails s -p 4242 -
>
open http://localhost:4242/verify/index
(or simply visit http://localhost:4242/verify/index) - Verify that the text says 'Welcome to Stimulus'.
Verify your Stimulus Reflex Setup
X CLOSE
- cd into the generated app
> rails g controller verify index
-
paste this into
app/views/verify/index.html.erb:
<a href="#" data-reflex="click->CounterReflex#increment" data-step="1" data-count="<%= @count.to_i %>" > Click me to increment the number: <span> <%= @count.to_i %> </span> </a>
- >
touch app/reflexes/counter_reflex.rb -
paste this into
app/reflexes/counter_reflex.rb:
class CounterReflex < StimulusReflex::Reflex def increment @count = element.dataset[:count].to_i + element.dataset[:step].to_i end end
- >
bin/webpack-dev-server - >
bin/rails s -p 4242 -
>
open http://localhost:4242/verify/index
(or simply visit http://localhost:4242/verify/index) - The number should be incrementing when you click the "Click me to increment the number:" link.
Verify your Tailwind Setup
X CLOSE
- cd into the generated app
> rails g controller verify index
-
paste this into
app/views/verify/index.html.erb:
<h1 class="text-red-500">Hello, Tailwind!</h1>
- >
bin/webpack-dev-server - >
bin/rails s -p 4242 -
>
open http://localhost:4242/verify/index
(or simply visit http://localhost:4242/verify/index) - Verify that the text 'Hello, Tailwind!' is rendered in red.
Verify your Bootstrap Setup
X CLOSE
- cd into the generated app
> rails g controller verify index-
paste this into
app/views/verify/index.html.erb:
<h1 class="text-danger">Hello, Bootstrap!</h1>
- >
bin/webpack-dev-server - >
bin/rails s -p 4242 -
>
open http://localhost:4242/verify/index
(or simply visit http://localhost:4242/verify/index) - Verify that the text 'Hello, Bootstrap!' is rendered in red.
Verify your Stimulus+Tailwind Setup
X CLOSE
- cd into the generated app
> rails g controller verify index
> open app/views/verify/index.html.erb
-
paste this into
app/views/verify/index.html.erb:
<div data-controller="hello"> <h1 data-target="hello.output" class="text-red-500"></h1> </div>
- >
bin/webpack-dev-server - >
bin/rails s -p 4242 -
>
open http://localhost:4242/verify/index
(or simply visit http://localhost:4242/verify/index) - Verify that the text says 'Welcome to Stimulus' (verifies that Stimulus works) in red (verifies that Tailwind works).
Verify your Stimulus+Bootstrap Setup
X CLOSE
- cd into the generated app
> rails g controller verify index
-
paste this into
app/views/verify/index.html.erb:
<div data-controller="hello"> <h1 data-target="hello.output" class="text-danger"></h1> </div>
- >
bin/webpack-dev-server - >
bin/rails s -p 4242 -
>
open http://localhost:4242/verify/index
(or simply visit http://localhost:4242/verify/index) - Verify that the text says 'Welcome to Stimulus' (verifies that Stimulus works) in red (verifies that Bootstrap works).
Verify your Stimulus Reflex+Tailwind Setup
X CLOSE
- cd into the generated app
> rails g controller verify index
-
paste this into
app/views/verify/index.html.erb:
<a href="#" data-reflex="click->CounterReflex#increment" data-step="1" data-count="<%= @count.to_i %>" class="underline" > Click me to increment the number: <span class="text-red-500 text-2xl"> <%= @count.to_i %> </span> </a>
- >
touch app/reflexes/counter_reflex.rb -
paste this into
app/reflexes/counter_reflex.rb:
class CounterReflex < StimulusReflex::Reflex def increment @count = element.dataset[:count].to_i + element.dataset[:step].to_i end end
- >
bin/webpack-dev-server - >
bin/rails s -p 4242 -
>
open http://localhost:4242/verify/index
(or simply visit http://localhost:4242/verify/index) - The number should be red (verifies that TailwindCSS works) and should be incrementing when you click the "Click me to increment the number:" link (verifies that Stimulus works)
Verify your Stimulus Reflex+Bootstrap Setup
X CLOSE
- cd into the generated app
> rails g controller verify index
-
paste this into
app/views/verify/index.html.erb:
<a href="#" data-reflex="click->CounterReflex#increment" data-step="1" data-count="<%= @count.to_i %>" class="underline" > Click me to increment the number: <span class="text-danger display-4"> <%= @count.to_i %> </span> </a>
- >
touch app/reflexes/counter_reflex.rb -
paste this into
app/reflexes/counter_reflex.rb:
class CounterReflex < StimulusReflex::Reflex def increment @count = element.dataset[:count].to_i + element.dataset[:step].to_i end end
- >
bin/webpack-dev-server - >
bin/rails s -p 4242 -
>
open http://localhost:4242/verify/index
(or simply visit http://localhost:4242/verify/index) - The number should be red (verifies that Bootstrap works) and should be incrementing when you click the "Click me to increment the number:" link (verifies that Stimulus works)
Choose Your Base
Time to Start Cooking!
Tweak omakase, use API mode, or start with a blank canvas and pick what you need!
- OmakaseOmakase is fine, but... (customize below)
- API ModeDoing the heavy lifting on the client side!
- The Early DaysSomewhere between the two, circa 2007
- The Minimalist--skip-everything
Add Extra Ingredients (powered by railsbytes.com)
Frontend Framework Menu 🖼️
Optional: Mix in a frontend framework for extra zest
- None
- Stimulus.jsA modest JavaScript framework for the HTML you already have.
- Stimulus.js + Stimulus ReflexCraft modern, reactive web interfaces
CSS Framework Menu 🎨
Optional: Add a CSS framework - present in style!
- None
- TailwindCSSA utility-first CSS framework for rapidly building custom designs
- BootstrapQuickly design and customize responsive mobile-first sites
Testing Framework Menu 🔬
Optional: Minitest or RSpec, that is the Question
Coming Soon (this week)!
- MinitestThe default testing framework
- RSpecThe non-default testing framework used by (almost) everyone
Customize A'la Carte
Our Database Menu 🗄️
More than a toy app? Pick a heavy-duty tool!
- SQLiteThe current default. Recommended by @librarycongress for archival!
- PostgresThe real default. No-brainer if you ever plan to leave development.
- MySQLThe original default. It's fine, but Postgres is finer!
Guest Favorites 🌶️
The raison d'être of our humble establishment.
- ⚠️ Set and locked by a railsbyte!Add spring?Rails application preloader
- ⚠️ Set and locked by a railsbyte!Add listen?Listens to file modifications and notifies you about the changes
- ⚠️ Set and locked by a railsbyte!Add bootsnap?Boot large Ruby/Rails apps faster
Starters 🥗
Stuff to create/skip during initial setup
- ⚠️ Set and locked by a railsbyte!Create Gemfile?Create/skip Gemfile
- ⚠️ Set and locked by a railsbyte!Create .gitignore?Create/skip .gitignore file
- ⚠️ Set and locked by a railsbyte!Create .keep files?Create/skip git .keep files in empty directories
- ⚠️ Set and locked by a railsbyte!Run `bundle install`?Run (or don't) `bundle install` after generating Gemfile
- ⚠️ Set and locked by a railsbyte!Create Puma config files (skip if using a different app server)?Skip Puma-related files
Mains 🍗
The meat of your setup. Some of us are on a fancy diet, though - or vegans 🥑, even!
- ⚠️ Set and locked by a railsbyte!Use ActionText?ActionText: Rich text content and editing
- ⚠️ Set and locked by a railsbyte!Use ActiveRecord?ActiveRecord: The default ORM
- ⚠️ Set and locked by a railsbyte!Use ActiveStorage?ActiveStorage: attach files to your ActiveRecord models
- ⚠️ Set and locked by a railsbyte!Use ActionCable?ActionCable: The power of WebSockets, here and now!
Email me Maybe (#not) 📨
The best way to inbox zero: not sending or receiving any email!
- ⚠️ Set and locked by a railsbyte!Use ActionMailer?ActionMailer: Send emails from your application using mailer classes and views
- ⚠️ Set and locked by a railsbyte!Use ActionMailbox?ActionMailbox: Routes incoming emails to controller-like mailboxes
Le Frontend 🖼️
Tasty bits from the Front of the House
- ⚠️ Set and locked by a railsbyte!Use Sprockets?Sprockets: Rack-based asset packaging system
- ⚠️ Set and locked by a railsbyte!Use Javascript?Add/Skip JavaScript files and config (Webpacker/Turbolinks)
- ⚠️ Set and locked by a railsbyte!Use Turbolinks?Turbolinks makes navigating your web application faster
- ⚠️ Set and locked by a railsbyte!Use Webpacker?Sensible defaults for great OTB Webpack experience
- ⚠️ Set and locked by a railsbyte!Use Yarn?Yarn: Fast, reliable, and secure dependency management
Testing 🔬
MiniSpec or RSpec, that is the real question!
- ⚠️ Set and locked by a railsbyte!Use Minitest?Add/Skip test files
- ⚠️ Set and locked by a railsbyte!Use System Tests?Add/Skip system test files