Closed7
Rails7, esbuild, dockerのセットアップ
任意のオプションでrails newしてbundle install
セットアップはこの2つを使う
gem "jsbundling-rails"
gem "cssbundling-rails"
実行
bundle exec rails javascript:install:esbuild
出力
docker@a1ba158fc6e3:/usr/src/app$ bundle exec rails javascript:install:esbuild
Compile into app/assets/builds
create app/assets/builds
create app/assets/builds/.keep
append app/assets/config/manifest.js
append .gitignore
append .gitignore
Add JavaScript include tag in application layout
insert app/views/layouts/application.html.erb
Create default entrypoint in app/javascript/application.js
create app/javascript
create app/javascript/application.js
Add default package.json
create package.json
Add default Procfile.dev
create Procfile.dev
Ensure foreman is installed
run gem install foreman from "."
Fetching foreman-0.87.2.gem
Successfully installed foreman-0.87.2
1 gem installed
Add bin/dev to start foreman
create bin/dev
Install esbuild
run yarn add esbuild from "."
yarn add v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ esbuild@0.15.7
info All dependencies
├─ esbuild-linux-64@0.15.7
└─ esbuild@0.15.7
Done in 12.58s.
Add build script
Add "scripts": { "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets" } to your package.json
出力されたとおり
package.jsonにbuildを追加した
"scripts": {
"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
}
実行
bundle exec rails css:install:sass
出力
docker@a1ba158fc6e3:/usr/src/app$ bundle exec rails css:install:sass
Build into app/assets/builds
exist app/assets/builds
identical app/assets/builds/.keep
File unchanged! The supplied flag value not found! app/assets/config/manifest.js
Stop linking stylesheets automatically
gsub app/assets/config/manifest.js
File unchanged! The supplied flag value not found! .gitignore
File unchanged! The supplied flag value not found! .gitignore
Remove app/assets/stylesheets/application.css so build output can take over
remove app/assets/stylesheets/application.css
Add stylesheet link tag in application layout
File unchanged! The supplied flag value not found! app/views/layouts/application.html.erb
append Procfile.dev
Add bin/dev to start foreman
identical bin/dev
Install Sass
create app/assets/stylesheets/application.sass.scss
run yarn add sass from "."
yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 17 new dependencies.
info Direct dependencies
└─ sass@1.54.9
info All dependencies
├─ anymatch@3.1.2
├─ binary-extensions@2.2.0
├─ braces@3.0.2
├─ chokidar@3.5.3
├─ fill-range@7.0.1
├─ glob-parent@5.1.2
├─ immutable@4.1.0
├─ is-binary-path@2.1.0
├─ is-extglob@2.1.1
├─ is-glob@4.0.3
├─ is-number@7.0.0
├─ normalize-path@3.0.0
├─ picomatch@2.3.1
├─ readdirp@3.6.0
├─ sass@1.54.9
├─ source-map-js@1.0.2
└─ to-regex-range@5.0.1
Done in 2.82s.
Add build:css script
Add "scripts": { "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules" } to your package.json
出力されたとおり
package.jsonにbuildを追加した
"scripts": {
"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
"build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
}
docker-compose.ymlでrails用コンテナの起動コマンドを下記のように設定
command: ['/bin/sh', '-c', 'rm -f tmp/pids/server.pid && bin/dev']
bin/dev -> foreman -> Prockfile.devを実行という感じのようだ
#!/usr/bin/env bash
if ! foreman version &> /dev/null
then
echo "Installing foreman..."
gem install foreman
fi
foreman start -f Procfile.dev "$@"
web: bundle exec rails s -p 3000 -b '0.0.0.0'
js: yarn build --watch
css: yarn build:css --watch
layoutはこうなってる
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
起動してjsかscssのファイルをいじればバンドルされる
scss -> sassにした
"build:css": "sass ./app/assets/stylesheets/application.sass:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
esbuildは型チェックせずにバンドルするのでtscコマンドで型チェックするようにした
"scripts": {
"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets --target=es2022 --minify",
"build:css": "sass ./app/assets/stylesheets/application.sass:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
"tsc": "tsc --project tsconfig.json"
}
web: bundle exec rails s -p 3000 -b '0.0.0.0'
js: yarn build --watch
css: yarn build:css --watch
tsc: yarn tsc --watch
このスクラップは2023/10/19にクローズされました