Create React Appで作成したプロジェクトをLaravelに組み込む

はじめに

Create React Appで作成したプロジェクトをLaravelに組み込んでみたかったので、今回チャレンジしてみました。

環境

  • WSL2(Ubuntu 20.04.2 LTS)
  • Laravel 8.52.0
  • Node.js 10.19.0
  • npm 6.14.4
  • Yarn 1.22.11

前提

  • Laravelのプロジェクトを作成済み
  • 動作確認できるWebサーバーが起動中

※以降、Laravelのプロジェクトをルートプロジェクトと記載します。

Creat React Appでプロジェクトを作成する

ルートプロジェクト直下に移動して、以下のコマンドでReact+TypeScriptのプロジェクトを作成します。

  • プロジェクト名:frontend

※以降、作成したプロジェクトをReactプロジェクトと記載します。

Reactプロジェクトのpackage.jsonを修正する

Reactプロジェクトをビルドする際の設定を変更するため、Reactプロジェクト直下にあるpackage.jsonを修正します。

まず、buildの定義を以下の通りに修正します。

この修正により、ビルドの成果物(buildディレクトリを含む)がルートプロジェクト/publicに配置されるようになります。

次にscriptsと同じ階層にhomepageの指定を追加します。

この指定の追加により、ビルド後のプログラム内のCSSやJavaScriptを参照するパスにbuildディレクトリが含まれるようになります。

Reactプロジェクトをビルドする

ルートプロジェクト/frontendに移動して、以下のコマンドでビルドします。

ルーティングの定義を追加する

ルートプロジェクト/routes/web.phpを開き、以下の定義を追加します。

Bladeを作成する

ルートプロジェクト/resources/viewsにindex.blade.phpを作成し、
Reactプロジェクトの成果物であるindex.htmlを読み込むコードを追加します。

動作確認

Webサーバーのドキュメントルートにアクセスします。
アクセスするとReactのロゴが回っている画面が表示されます。

まとめ

Create React Appで作成したプロジェクトをLaravelに組み込むことができました。
実際にこれを使っての開発経験がないので、個人的に使ってみて問題点がでてきたら共有したいと思います。


--------------------------
システム開発のご要望・ご相談はこちらから

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です