Laravel Breezeを使ってみる

開発環境は、

• Windows10 Pro(64bit)
• PHP 8.1.7 (cli) (built: Jun 7 2022 21:45:53) (ZTS Visual C++ 2019 x64)
• Composer version 2.3.7 2022-06-06 16:43:28
• PostgreSQL 14
• node v14.17.5
• npm 6.14.14
• Laravel 9.21.4
• VITE v3.0.2

Cドライブ直下に、laravelディレクトリを作成し、カレントディレクトリへ

cd c:\ && mkdir laravel && cd laravel

以下のコマンドを入力し、Laravelのプロジェクトを作成します

composer create-project laravel/laravel first_breeze --prefer-dist

インストールが終わったら、first_breezeディレクトリをカレントディレクトリにします。

cd first_breeze

PostgreSQLを起動して、データベースを作成します。

create database breeze;

次に、データベースの設定を行うため、.envファイルを開き、必要な設定を記述して保存します。

DB_CONNECTION=pgsql
DB_HOST=<データベースのホスト名>
DB_PORT=<データベースのポート番号>
DB_DATABASE=breeze
DB_USERNAME=<データベース接続のユーザー名>
DB_PASSWORD=<データベース接続のパスワード>

次に、以下のコマンドで、マイグレーションして、テーブルを作成します。

php artisan migrate

Composerを利用して、Laravel Breezeをインストールします。

composer require laravel/breeze --dev

Breezeパッケージをインストールしたら、以下のコマンドで、フロントエンド部分を作成します。

php artisan breeze:install

次に、以下のコマンドを入力

npm install && npm run dev

以下のような、エラーメッセージが表示される。

> esbuild@0.14.49 postinstall c:\laravel\first_breeze\node_modules\esbuild
> node install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for vite@3.0.2: wanted: {"node":"^14.18.0 || >=16.0.0"} (current: {"node":"14.17.5","npm":"6.14.14"})
npm WARN notsup Not compatible with your version of node/npm: vite@3.0.2
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-android-64@0.14.49 (node_modules\esbuild\node_modules\esbuild-android-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-android-64@0.14.49: wanted {"os":"android","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-android-arm64@0.14.49 (node_modules\esbuild\node_modules\esbuild-android-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-android-arm64@0.14.49: wanted {"os":"android","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-darwin-64@0.14.49 (node_modules\esbuild\node_modules\esbuild-darwin-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-darwin-64@0.14.49: wanted {"os":"darwin","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-darwin-arm64@0.14.49 (node_modules\esbuild\node_modules\esbuild-darwin-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-darwin-arm64@0.14.49: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-freebsd-64@0.14.49 (node_modules\esbuild\node_modules\esbuild-freebsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-freebsd-64@0.14.49: wanted {"os":"freebsd","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-freebsd-arm64@0.14.49 (node_modules\esbuild\node_modules\esbuild-freebsd-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-freebsd-arm64@0.14.49: wanted {"os":"freebsd","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-32@0.14.49 (node_modules\esbuild\node_modules\esbuild-linux-32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-32@0.14.49: wanted {"os":"linux","arch":"ia32"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-64@0.14.49 (node_modules\esbuild\node_modules\esbuild-linux-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-64@0.14.49: wanted {"os":"linux","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-arm@0.14.49 (node_modules\esbuild\node_modules\esbuild-linux-arm):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-arm@0.14.49: wanted {"os":"linux","arch":"arm"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-arm64@0.14.49 (node_modules\esbuild\node_modules\esbuild-linux-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-arm64@0.14.49: wanted {"os":"linux","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-mips64le@0.14.49 (node_modules\esbuild\node_modules\esbuild-linux-mips64le):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-mips64le@0.14.49: wanted {"os":"linux","arch":"mips64el"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-ppc64le@0.14.49 (node_modules\esbuild\node_modules\esbuild-linux-ppc64le):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-ppc64le@0.14.49: wanted {"os":"linux","arch":"ppc64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-riscv64@0.14.49 (node_modules\esbuild\node_modules\esbuild-linux-riscv64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-riscv64@0.14.49: wanted {"os":"linux","arch":"riscv64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-s390x@0.14.49 (node_modules\esbuild\node_modules\esbuild-linux-s390x):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-s390x@0.14.49: wanted {"os":"linux","arch":"s390x"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-netbsd-64@0.14.49 (node_modules\esbuild\node_modules\esbuild-netbsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-netbsd-64@0.14.49: wanted {"os":"netbsd","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-openbsd-64@0.14.49 (node_modules\esbuild\node_modules\esbuild-openbsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-openbsd-64@0.14.49: wanted {"os":"openbsd","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-sunos-64@0.14.49 (node_modules\esbuild\node_modules\esbuild-sunos-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-sunos-64@0.14.49: wanted {"os":"sunos","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-windows-32@0.14.49 (node_modules\esbuild\node_modules\esbuild-windows-32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-windows-32@0.14.49: wanted {"os":"win32","arch":"ia32"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-windows-arm64@0.14.49 (node_modules\esbuild\node_modules\esbuild-windows-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-windows-arm64@0.14.49: wanted {"os":"win32","arch":"arm64"} (current: {"os":"win32","arch":"x64"})

added 92 packages from 123 contributors and audited 112 packages in 204.809s

18 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> @ dev c:\laravel\first_breeze
> vite

failed to load config from c:\laravel\first_breeze\vite.config.js
error when starting dev server:
Error: Cannot find module 'node:path'
Require stack:
- c:\laravel\first_breeze\node_modules\vite\dist\node-cjs\publicUtils.cjs
- c:\laravel\first_breeze\node_modules\vite\index.cjs
- c:\laravel\first_breeze\vite.config.js
- c:\laravel\first_breeze\node_modules\vite\dist\node\chunks\dep-1513d487.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
    at Function.Module._load (internal/modules/cjs/loader.js:745:27)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (c:\laravel\first_breeze\node_modules\vite\dist\node-cjs\publicUtils.cjs:5:14)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Object._require.extensions.<computed> [as .js] (file:///c:/laravel/first_breeze/node_modules/vite/dist/node/chunks/dep-1513d487.js:62820:17)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `vite`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2022-07-22T12_57_28_833Z-debug.log

という風にエラーメッセージが表示された。読んでみると、どうやら、バージョンが、14.17.5では、古いようで、Nodeのバージョンを上げることにした。公式サイトへアクセスすると、現時点の、16.16.0 LTSをインストールすることにした。

インストール後、再度、同じコマンドを入力したら、以下のようなメッセージが表示されたので、Webブラウザで、localhost:5173へアクセスすると、以下のような画面が表示された。

> dev
> vite


  VITE v3.0.2  ready in 1374 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

  LARAVEL v9.21.4  plugin v0.5.0

  ➜  APP_URL: http://localhost

The Vite server should not be accessed directly. Your Laravel application's configured APP_URL is: http://localhost

参考リンク

• スターターキット 9.x Laravel