/Rails-SPA-Template

💎Rails + SPA（バックエンド統合型）の開発用テンプレート

Primary LanguageRuby

Rails-SPA-Template

  • RailsでSPAフロントエンドを開発するテンプレート
  • vite、React、React Router、tailwind CSS、Jestを設定済み
  • バックエンドとフロントエンドは同じサーバー（バックエンド統合）の構成
  • HMR対応

導入

  1. 作業用ディレクトリ作成、移動
    mkdir rails-spa
    cd rails-spa

  2. テンプレートリソース取得、不要ファイル削除
    ※テンプレートリポジトリに紐づく.gitは不要なので削除する
    git clone --depth 1 https://github.com/nkwtnb/Rails-SPA-Template . && rm -rf .git

  3. リポジトリ初期化
    git init

  4. コンテナ作成
    docker-compose build

  5. コンテナ起動、作業開始👍
    docker-compose up [-d]

  • バックエンド（Rails）側はファイルを更新すれば、それがそのまま適用される
  • フロントエンド（React）側もviteによるHMRが有効になっている為、更新がそのまま適用される

本番用ビルド

  1. TypeScriptのコンパイル、viteのビルド
    npm run build

    1. viteによるビルドを実行
      • viteのビルド結果は /app/assets/frontend/ に出力し、プリコンパイル対象となる

  2. Railsのアセットプリコンパイル
    bundle exec rails assets:precompile RAILS_ENV=production

    1. Railsによるアセットプリコンパイルを実行
      • アセットプリコンパイルの結果は public/assets/frontend に出力される