サイトが表示されない

Question

現在下のURLのサイト「Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう」を制作しようとしてます。
リンク内容

URLのサイトの見出し「フロントエンドのビルド」というところまでほぼ同じコードを再現し、「npm run watch」でURLを出してgooglecromeを使って表示させようとしましたが、何も表示されず、ロード画面のまま固まります。

このサイトに書いてあるように画面に「Hello world」を出すにはどうすれば良いでしょうか？

各サービスのバージョン

php --version 7.4.4
node -v 13.8.0
vue --version 4.2.3
php artisan --version 7.5.2

URLのサイトと異なる部分

・Dockerを使用せず、見出し「フロントエンドの準備」からコードを描き始めています。（仮想サーバーを使用しておりません。）laravelはcomposerでダウンロードしました。
・見出し「Laravel mix」のwebpack.mix.jsにおいて、以下のようにコードを描きました。（あまり関係ないとは思います。）

const mix = require('laravel-mix')

mix.browserSync('photoapp.test')
  .js('resources/js/app.js', 'public/js')
  .version()

エラーについて

・ターミナルにはエラーは出ておりません。（「Compiled successfully in 1659」と出ております。）
・http://localhost:3000をcromeにかけると何も表示されません。
・http://photoapp.testをcromeにかけるとDNS_PROBE_FINISHED_NXDOMAINが出ます。調べて下のURL通りに作業をしましたが治りませんでした。
リンク内容
また、npm run watchを解除した後にもう一度cromeで検索しても同じエラーが発生しました。

Answer 1

laravel mixはフロントエンド用のタスクランナーです。
phpの実行環境が別途必要です。（この記事だとDockerで準備しているようです）

Comments

[Beronika]

ありがとうございます。

イメージとしてはlaravelを動かしながらlaravel mixを動かすという感じでしょうか？

いずれにしてもこの記事の通りDockerで動かすのが一番簡単そうですね。

[mikkame]

はい。Laravelはバックエンド
Laravel mixがフロントエンド
と考えて両方とも動かす必要があります

[Beronika]

返事が遅れてしまい申し訳ありません。しばらくいじっておりませんでした。
アドバイスありがとうございます。

アドバイス通りDockerを使って同時に動かすのが一番楽かと思い、サイトの通りやってみました。しかし、Docker側でlaravelを動かしてからlaravelmixを動かしてみましたが相変わらず表示されません。
他に注意するべき点はございますでしょうか？

[mikkame]

エラーログがないともなんとも解答できません。
まずはlaravel mix ではなくその前提となるlaravelの起動を目指しましょう