flutter webがrailsを乗る

Posted at 2021-03-14

内容

flutter webで開発したfrontをrails serverでアクセルできるようにする手順

flutter 2.0.1
rails 6.1.3

flutter projectのフォルダで以下のcommandでbuildすると

flutter build web

フォルダbuild/webが作成される

rails new flutter-on-rails
rails g controller Home index

config/routes.rbを以下のように設定

Rails.application.routes.draw do
  root 'home#index'
end

flutter projectのフォルダbuild/web/assetsをrailsのapp/assets/下にcopy
flutter projectのフォルダbuild/web/iconsをrailsのapp/assets/下にcopy
flutterのbuildしたbuild/web/main.dart.jsファイルの内容をrailsのapp/javascript/packs/flutter.jsにcopy
flutterのファイルbuild/web/index.htmlの内容でrailsのapp/views/home/index.html.erbファイルを上書きする
railsのapp/views/home/index.html.erbファイルにflutter.jsの参照するようにする

<!DOCTYPE html>
<html>
<head>
  .......省略
  <link rel="manifest" href="manifest.json">
  <%= javascript_pack_tag "flutter" %>
</head>
  .......省略