Recently the Rails 7 went out and it includes a lot of changes and new features. What I want to focus on is generating a new Rails 7 app with Bootstrap CSS and Bootstrap JS.
If you don’t want to read the article you can watch it here.
Disclaimer: The commands with a : prefix are run from inside Vim. To understand how I use Vim with Rails, check my Ruby on Rails with Vim article.
Create new app with Bootstrap
Create a new Rails app using:
$ rails new app-with-bootstrap --css bootstrap
This will generate a new Rails app and download Bootstrap CSS and JS for you.
Run app
In Rails 7, the new way of running the server is:
$ ./bin/dev
This spins up a few processes, including the server and a watcher for CSS and JS files.
Prepare a URL path
The goal is to test Bootstrap CSS and JS on http://localhost:3000/home. To do this, edit routes.rb and configure it:
:Einitializer
Add:
root 'home#index'
After reloading, you’ll get an exception because home_controller isn’t defined yet. Let’s fix that.
Generate controller home
Generate the controller:
:Generate controller home
After refreshing, you’ll see an exception that the index action is missing. Add:
def index
end
to home_controller.rb.
Now, after refreshing, you’ll be missing the index.html.erb template. Create it:
:Eview home/index.html.erb
Add some text to it. When you refresh, you should see your template rendered.
Verifying Bootstrap CSS and JS
To verify Bootstrap is working, copy the modal HTML code from the Bootstrap page and paste it into your home/index.html.erb file. Refresh the page and click the "Launch demo modal" button—you should see the modal.
Add custom styles
To add custom styles, put your CSS in:
app/assets/stylesheets/custom.css
Then add the asset name to the Rails pipeline by editing app/assets/config/manifest.js:
//= custom.css
Finally, apply the styles in your application layout by editing application.html.erb and adding:
<%= stylesheet_link_tag "custom", "data-turbo-track": "reload" %>
After refreshing, your modal should look different with your custom styles.
This small tutorial guided you step by step on how to have a fully fledged Rails 7 app with Bootstrap CSS, Bootstrap JS, and your own custom styles.
Have fun,
Grzegorz