Laravel9にJetstream Livewire版をインストールする方法と注意点・初期設定を解説

Laravel Jetstream

Laravel9にJetstream Livewire版をインストールする方法と注意点・初期設定を解説します。

まず最初にインストール前のご留意事項をお伝えした後、具体的なインストール方法を説明していきますね。

Laravel Jetstreamインストール前のご留意事項

Jetstream以外でもいえることですが、Laravel9以上をインストールするには、PHP8以上が必要になります。あらかじめ、準備しておいてください。

なお、既にBreezeやLaravel/ui等、すでに他のライブラリを入れたプロジェクトに、Jetstreamを入れるのはおすすめしません。

Jetstreamの公式マニュアルにも、下記のようにあります。

Jetstream should only be installed into new Laravel applications. Attempting to install Jetstream into an existing Laravel application will result in unexpected behavior and issues.

【日本語訳】

Jetstream は新しい Laravel アプリケーションにのみインストールしてください。既存の Laravel アプリケーションに Jetstream をインストールしようとすると、予期しない動作や問題が発生することがあります。

Jetstreamマニュアル:https://jetstream.laravel.com/2.x/installation.html

Junko
Junko

Jetstreamは高機能な分、やや複雑です。

他のライブラリで作ったプロジェクトに入れてしまうと、思わぬエラーが発生する可能性があるので、ご注意を。

Laravel Jetstreamインストール方法

それではインストール方法を解説します。

① まずは、普通通りLaravelのプロジェクトを作成します。

プロジェクトを作成するディレクトリで、下記コマンドを実行しましょう。

Junko
Junko

最後のjetstreamはプロジェクト名です。お好みで変えてくださいね。

② Jetstream Livewire版をインストールします。

プロジェクト内で、下記コマンドを実行して、Jetstreamをインストールします。

次に下記コマンドを実行します。

team版をいれる場合には、最後にteamをつけます。

Junko
Junko

team不要な場合は、最後の –teamsは付けずにコマンドを実行してください。

③ npm install と npm run dev を実行します。

④ マイグレート実行

下記コマンドを実行し、データベースにテーブルを作成します。

⑤ サーバーをたてて、画面を表示する

サーバーを起動します。

トップページは下記のとおり。

トップページ右上をクリックすると、ログイン(/login)・登録ページ(/register) を表示できます。

【Jetstream Login】

【Jetstream Register】

Jetstream Livewireインストール時にエラーになった場合の対策

以上です。スムーズにいけば、それほど時間もかかりません。

ただ、エラーになることもあります。その場合の対策をいくつか載せておきますね。困ったときに参考にしてください。

npm run dev後に WARNINGS in child compilations と表示

webpack.mix.jsに下記を追加します。

次にnpm run devを行うと、エラーの詳細が表示されるので、メッセージに応じて対応します。

Jetstreamのロゴ画像が大きすぎる!

インストール後、こんな感じでロゴ画像が表示された場合。

Junko
Junko

ロゴが大きすぎて、全体が表示できない…

public/mix-manifest.jsonファイルを下記のように変更すればロゴはなおります。

【mix-manifest.json 変更前】

【mix-manifest.json 変更後】

Junko
Junko

もしXAMPPサーバーを使っている場合は、ログイン後に他の修正も必要になる可能性があります。php artisan serveコマンドを実行して、サーバーを立ち上げることをおすすめします。

Jetstream Livewireインストール後の初期設定

最初に行っておいたほうが良い初期設定も、いくつかご紹介します。

コンポーネントファイルの作成

Jetstreamでは、ビューファイルのコンポーネントがあらかじめ用意されています。コンポーネントとは、ビュー部分を作る部品のようなものです。

ボタンを作るコンポーネントとか、各種コンポーネントがあらかじめ準備されています。

もし既存のコンポーネントに手を加えたい場合は、下記コマンドを実行します。

resources/views/vendor/jetstream/componentsの中に、各ファイルが作成されます。

ロゴの変更

ロゴ画面の変更方法も説明します。

たとえばログイン画面のロゴを変更したい場合には、上記の①コンポーネントのカスタマイズを実行した後、resources/views/vendor/jetstream/components/authentication-card-logo.blade.phpファイルを開きます。

既存のコードを削除し、お好きなロゴファイルを入れてください。

ログインページ(/login)を表示すると、差し替えた画像が表示されます。

言語や時間の設定

ほか、config/app.php ファイルでの言語や時間の設定など、他のライブラリを入れたと場合と同じ変更が必要となります。

詳細は下記を参考にしてください。

さいごに

以上、Jetstream Livewire版のインストール方法を解説しました。

使い方など、また別記事で解説するかもしれません。

複数のチームを作り、チーム内で役割を割り振る、といった機能を手軽に搭載するには、Jetstreamはすばらしいプラットフォームです。

ただ、機能が高度な分複雑です。小規模なプロジェクトの場合には、Breeze版が良いと思います。

用途に応じて、使い分けていきましょう♪

Laravel Jetstream
Laravel Jetstream Team版のデモサイト作りました♪
Laravel9 Jetstream Livewire Team版で作成しております。
https://faq.createmore-prj.com/register


「二段階認証ってどんなふうにかかるんだろ」
と思ったら、試してくださいね。

社内にWebアプリ開発経験がなくて、困ってませんか?

「自社でWebアプリ開発を始めていきたい」
という企業様のために、Laravelセミナー・プログラミング教育を実施しています。

【セミナー使用スライド】

詳細はこちらご覧ください

Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました