【React】Windows10にReact+Laravelの開発環境を構築してみた

はじめに

Chocolatey、VirtualBox、Vagrantがインストールされている事。

Homestead Vagrant Boxのインストール

$ vagrant box add laravel/homestead

Homesteadのインストール

$ git clone https://github.com/laravel/homestead.git Homestead
$ cd Homestead
$ git checkout release
Switched to a new branch 'release'
Branch 'release' set up to track remote branch 'release' from 'origin'.

$ init.bat
        1 個のファイルをコピーしました。
        1 個のファイルをコピーしました。
        1 個のファイルをコピーしました。
Homestead initialized!

Homesteadの設定

Homestead.yamlの設定を変更します。
今回は共有フォルダの設定とNginxの設定を変更します。

folders:
    - map: C:\code\my_app
      to: /home/vagrant/code/my_app

sites:
    - map: homestead.test
      to: /home/vagrant/code/my_app/public

鍵の作成

$ ssh-keygen -b 4096

Vagrantの実行

$ vagrant up

Vagrantにssh接続

$ vagrant ssh

プロジェクト作成

$ cd code/
$ composer create-project --prefer-dist laravel/laravel my_app

Reactのインストール

$ cd my_app
$ composer require laravel/ui
$ php artisan ui react --auth
$ npm install && npm run dev

起動

$ php artisan serve

こんなのを用意しておくと便利です。

"scripts": {
    "serve": "php artisan serve & npm run watch-poll",
}
$ npm run serve