はじめに
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
npx create-react-app frontend --template typescript
※以降、作成したプロジェクトをReactプロジェクトと記載します。
Reactプロジェクトのpackage.jsonを修正する
Reactプロジェクトをビルドする際の設定を変更するため、Reactプロジェクト直下にあるpackage.jsonを修正します。
まず、buildの定義を以下の通りに修正します。
"scripts": {
"build": "react-scripts build && rm -rf ../public/build && mv build ../public"
}
この修正により、ビルドの成果物（buildディレクトリを含む）がルートプロジェクト/publicに配置されるようになります。
次にscriptsと同じ階層にhomepageの指定を追加します。
"homepage": "build"
"scriptes": {
...
この指定の追加により、ビルド後のプログラム内のCSSやJavaScriptを参照するパスにbuildディレクトリが含まれるようになります。
Reactプロジェクトをビルドする
ルートプロジェクト/frontendに移動して、以下のコマンドでビルドします。
yarn build
ルーティングの定義を追加する
ルートプロジェクト/routes/web.phpを開き、以下の定義を追加します。
Route::get('/', function () {
return view('index');
});
Bladeを作成する
ルートプロジェクト/resources/viewsにindex.blade.phpを作成し、
Reactプロジェクトの成果物であるindex.htmlを読み込むコードを追加します。
{!! File::get(public_path('build/index.html')) !!}
動作確認
Webサーバーのドキュメントルートにアクセスします。
アクセスするとReactのロゴが回っている画面が表示されます。
まとめ
Create React Appで作成したプロジェクトをLaravelに組み込むことができました。
実際にこれを使っての開発経験がないので、個人的に使ってみて問題点がでてきたら共有したいと思います。
