Skip to content

Instantly share code, notes, and snippets.

@kelso
Last active February 19, 2023 10:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kelso/fd6079d6f30daa879240c9ed90d868d7 to your computer and use it in GitHub Desktop.
Save kelso/fd6079d6f30daa879240c9ed90d868d7 to your computer and use it in GitHub Desktop.
How to generate Rails 7 app with Bootstrap 5 from template file
# Usage:
# rails new my_app -m template.rb
#
# or for existing app (inside an app folder):
# rails app:template LOCATION=../template.rb
# Gemfile
gem 'bootstrap', '~> 5.1.3'
gem 'sass-rails', '~> 6.0.0'
gem_group :development, :test do
gem 'dotenv-rails'
end
# Application layout
remove_file 'app/views/layouts/application.html.erb'
create_file 'app/views/layouts/application.html.erb' do <<-HTML
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<%= render 'shared/navbar' %>
<div class="container">
<%= yield %>
</div>
</body>
</html>
HTML
end
# Add navbar partial
create_file 'app/views/shared/_navbar.html.erb', <<-HTML
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
<div class="container">
<%= link_to "My App", root_path, class: "navbar-brand" %>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<%= link_to "Home", root_path, class: "nav-link" %>
</li>
<li class="nav-item">
<%= link_to "About", about_path, class: "nav-link" %>
</li>
</ul>
</div>
</div>
</nav>
HTML
# Use after_bundle block to run code after Rails has generated the application
after_bundle do
# Importmap pins
append_to_file 'config/importmap.rb', <<-RUBY.strip_heredoc
pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.1.3/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://unpkg.com/@popperjs/core@2.11.2/dist/esm/index.js" # use unpkg.com as ga.jspm.io contains a broken popper package
RUBY
# Append Bootstrap import statements to app/javascript/application.js
append_to_file 'app/javascript/application.js', <<-JS.strip_heredoc
// Bootstrap
import '@popperjs/core';
import * as bootstrap from 'bootstrap';
JS
end
# Application stylesheet
remove_file 'app/assets/stylesheets/application.css'
create_file 'app/assets/stylesheets/application.scss' do <<-SCSS
@import 'bootstrap';
SCSS
end
# Full title helper
inject_into_file 'app/helpers/application_helper.rb', after: "module ApplicationHelper\n" do
<<-RUBY
def full_title(page_title = '')
base_title = 'My App'
if page_title.empty?
base_title
else
page_title + ' | ' + base_title
end
end
RUBY
end
# Config variables
inject_into_file 'config/application.rb', after: "class Application < Rails::Application\n" do
<<-RUBY
config.generators do |generate|
generate.helper false
generate.assets false
generate.view_specs false
generate.helper_specs false
generate.routing_specs false
generate.controller_specs false
generate.system_tests false
end
RUBY
end
# Dotenv
create_file '.env' do <<-FILE
SECRET_KEY_BASE=placeholder
FILE
end
# Add root route
route "root to: 'pages#index'"
# Add routes
route "get 'about', to: 'pages#about'"
# Pages controller
create_file 'app/controllers/pages_controller.rb' do
<<-RUBY
class PagesController < ApplicationController
def index
end
def about
end
end
RUBY
end
# Index view
create_file 'app/views/pages/index.html.erb' do
<<-HTML.strip_heredoc
<%= content_for :title, 'Home' %>
<h1>Hello world</h1>
<p>This is the home page.</p>
HTML
end
# About view
create_file 'app/views/pages/about.html.erb' do
<<-HTML.strip_heredoc
<%= content_for :title, 'About' %>
<h1>About</h1>
<p>Lorem ipsum dolor sit.</p>
HTML
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment