この記事を読んで出来ること
バックエンドにPHPのフレームワークであるLaravelを、フロントエンドにJavaScriptのフレームワークであるReactを用いたウェブアプリ開発をするための環境構築。
※今回はmacOSを用いて環境構築を行っています。
Composerをインストールする
まずはLaravelをインストールために用いるComposerをインストールします。Composerとは、PHP開発で使用するライブラリやパッケージを管理するツールで、macOSではHomebrewでインストールすることが出来ます。インストールが完了してバージョン情報が表示されるか確認しておきましょう。
$ brew install composer
$ composer -V
Laravelプロジェクトを作成する
次に、composerを用いてLaravelプロジェクトを作成します。プロジェクトの作成にはcreate-projectを用います。
$ composer create-project laravel/laravel "プロジェクト名"
$ cd "プロジェクト名"
Reactを利用できるようにする
フロントエンドのフレームワークをReactに設定します。まずは、Reactを利用するために必要なlaravel/uiパッケージをインストールします。
$ composer require laravel/ui
そして最後にReactのインストールをします。この際、"--auth"と書くことでログイン機能もインストールしています。インストールが終わると、npmコマンドを実行するようにメッセージが出るのでその通りに実行します。
$ php artisan ui react --auth
$ npm install && npm run dev
ここまでの作業を終えると、resouce/js/components/Example.jsのコードがReactを用いたものになってることが確認できます。
Laravelの動作確認
以下のコマンドで開発用のローカルサーバを起動し、表示されるアドレスにアクセスします。
$ php artisan serve
インストールが正常に行われていたら、「Laravel」と書かれた初期ページが表示されます。ログイン機能もインストールしているため、右上には「LOGIN」「REGISTER」のリンクも表示されているはずです。
jsファイルの変更を監視する
サーバーは起動したままターミナル上で別のタブを開き、以下のコマンドを実行することでjsファイルが変更されたら自動的にコンパイルが行われます。開発時には "php artisan serve" とこちらのコマンドを実行しておくことでブラウザ上でウェブページを確認することが出来る。
$ npm run watch