Rails 7、Bootstrap 5教程

DebugUsery
519 阅读3分钟

0.一个巨大的警告

在[BootrAils]，我们很高兴Rails 7在2021年12月中旬问世。前端资产管理又一次完全不同。现在Rails 7几乎放弃了Webpack而选择了jsbundling-rails（带esbuild）+import maps + Sprockets。

因此，作为Rails开发者，我们有了选择。在本教程中，我们将使用默认的Rails 7选项 - 但我们不确定你是否应该这样做。这就是恐惧。缓解将在文章的最后。

1.前提条件

检查你是否已经安装了Ruby 3。检查你是否已经安装了bundler，以及npm在7以上的版本。

$> ruby -v  
ruby 3.0.0p0 // you need at least version 3 here  
$> bundle -v  
Bundler version 2.2.11  
$> npm -v  
8.3.0 // you need at least version 7.1 here  
$> yarn -v  
1.22.10
$> psql --version  
psql (PostgreSQL) 13.1 // let's use a production-ready database locally

任何更高的版本都可以使用。

2.创建一个孤立的、新的Rails 7应用程序

$> mkdir myapp && cd myapp  
$/myapp> echo "source 'https://rubygems.org'" > Gemfile  
$/myapp> echo "gem 'rails', '7.0.0'" >> Gemfile  
$/myapp> bundle install  
$/myapp> bundle exec rails new . --force --css=bootstrap -d=postgresql

打开Gemfile，并替换行

gem "turbo-rails"

以

gem "turbo-rails", '~> 1.0.0'

这一步是一个错误的行为，因为Rails 7在写作的时候还是相当新的。

在bash里面继续。

$/myapp> bundle update  
$/myapp> bin/rails db:create  
$/myapp> bin/rails db:migrate

3.Bootstrap v5是否已经安装？

在这一段中，我们将不写任何代码，而是阅读已经安装的内容。

一些好消息：也许你注意到了上面的--css=bootstrap 选项。这意味着最后一个Bootstrap版本已经安装。

让我们来看看这发生在哪里。

package.json

// inside package.json  
{  
"name": "app",  
"private": "true",  
"dependencies": {  
    "@hotwired/stimulus": "^3.0.1",  
    "@hotwired/turbo-rails": "^7.1.0",  
    "@popperjs/core": "^2.11.0",  
    "bootstrap": "^5.1.3",  
    "esbuild": "^0.14.5",  
    "sass": "^1.45.0"  
  }  
}

OK !Bootstrap 5及其依赖项已经正确地安装在package.json中。

// inside app/assets/stylesheets/application.bootstrap.scss  
@import 'bootstrap/scss/bootstrap';

很好!标准导入bootstrap scss源码，这将使我们以后能够进行微调。

// inside app/javascript/application.js  
// Entry point for the build script in your package.json  
import "@hotwired/turbo-rails"  
import "./controllers"  
import * as bootstrap from "bootstrap"

OK !现在Bootstrap的JavaScript已经被加载了--即使到目前为止没有发生初始化。

打开app/views/layouts/application.html.erb

<!DOCTYPE html>  
<html>  
  <head>  
      <title>Myapp</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_include_tag "application", "data-turbo-track": "reload", defer: true %>  
  </head>  
  
  <body>  
    <%= yield %>  
  </body>  
</html>

有趣的行是javascript_include_tag和stylesheet_link_tag 。它们允许我们从继承自默认布局的每个模板的初始SCSS和JS文件中获益。

创建裸露的最小Bootstrap 5 HTML

创建一个控制器。

# inside app/controllers/home_controller.rb  
class HomeController < ApplicationController  
end

配置一个默认路由。

# inside config/routes.rb  
Rails.application.routes.draw do  
  get "home/index"  
  root to: "home#index"  
end

现在创建一个为Bootstrap 5定制的视图：只需复制/粘贴下面的代码到app/views/home/index.html.erb即可

<!-- inside app/views/home/index.html.erb -->
<h1>Welcome, this is the home page</h1>  
  
<button type="button" 
        class="btn btn-lg btn-danger" 
        data-bs-toggle="popover" 
        title="Popover title" 
        data-bs-content="Amazing content, right ?">
        Click to toggle popover
</button>

这个HTML应该在点击红色按钮时显示一个弹出窗口，但前提是

  • Bootstrap CSS配置正确。
  • Bootstrap JS已经加载并初始化。

很好!这个赤裸裸的极简主义例子将确保一切正常工作。

Bootstrap 5，Rails 7，本地：让我们开始吧!

$/myapp> ./bin/dev  
  
17:24:24 web.1 | started with pid 26889  
17:24:24 js.1 | started with pid 26890  
17:24:24 css.1 | started with pid 26891  
17:24:24 css.1 | yarn run v1.22.10  
17:24:24 js.1 | yarn run v1.22.10  
17:24:24 css.1 | $ sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules --watch  
17:24:24 js.1 | $ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --watch  
17:24:25 js.1 | [watch] build finished, watching for changes...  
17:24:25 css.1 | Sass is watching for changes. Press Ctrl-C to stop.  
17:24:25 css.1 |  
17:24:26 web.1 | => Booting Puma  
17:24:26 web.1 | => Rails 7.0.0 application starting in development  
17:24:26 web.1 | => Run `bin/rails server --help` for more startup options  
17:24:26 web.1 | Puma starting in single mode...  
17:24:26 web.1 | * Puma version: 5.5.2 (ruby 3.0.0-p0) ("Zawgyi")  
17:24:26 web.1 | * Min threads: 5  
17:24:26 web.1 | * Max threads: 5  
17:24:26 web.1 | * Environment: development  
17:24:26 web.1 | * PID: 26889  
17:24:26 web.1 | * Listening on http://127.0.0.1:3000  
17:24:26 web.1 | * Listening on http://[::1]:3000  
17:24:26 web.1 | Use Ctrl-C to stop

很好！控制台显示，我们应该去localhost:3000看看正在发生什么。让我们开始吧。

localhost

localhost

尝试点击按钮。什么也没有发生。

将基于Bootstrap的自定义JavaScript添加到Rails中

让我们将其注入Rails中

// Inside app/javascript/application.js  
import "@hotwired/turbo-rails"  
import "./controllers"  
import * as bootstrap from "bootstrap"  
  
let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))  
let popoverList = popoverTriggerList.map(function (popoverTriggerEl) {  
  return new bootstrap.Popover(popoverTriggerEl)  
})

现在重新加载你的浏览器，然后点击大的红色按钮

localhost

Localhost

很好！成功了

添加自定义的SCSS

// inside app/assets/stylesheets/application.bootstrap.scss  
$h1-font-size: 1rem; // this line was added  
@import 'bootstrap/scss/bootstrap';

重新加载你的浏览器

A smaller h1 title

一个较小的h1标题

Rails 7和Bootstrap 5现在要投入生产了：部署到Heroku上

$/myapp> heroku login  
$/myapp> heroku create  
$/myapp> echo "web: bundle exec puma -C config/puma.rb" >> Procfile  
$/myapp> bundle lock --add-platform x86_64-linux  
$/myapp> heroku addons:create heroku-postgresql:hobby-dev  
$/myapp> heroku buildpacks:add heroku/ruby  
$/myapp> heroku buildpacks:add heroku/nodejs  
$/myapp> git add . && git commit -m 'ready for prod'  
$/myapp> git push heroku main

buildpacks正在向你的生产机器添加环境。标志 --add-platform x86_64-linux是为了与Heroku兼容而设置的。除此以外，上面的每条命令都是相当冗长的，你不会迷路。

安装将持续1到2分钟。你应该在终端的底部看到你的生产就绪的应用程序被部署的URL。但在打开它之前请等待一分钟。

输入 。

$/myapp> heroku run rails db:migrate

现在打开你的浏览器（不是localhost，而是Heroku提供的生产URL）。你应该看到标题和按钮，如果你点击按钮...发生了什么事;)?

一种解脱，有待改进

实现这一结果的工具数量并不完全令人满意。我们将在以后给出解释。 . 敬请关注 !

avatar
文章
阅读
粉丝