【開発環境構築】LaravelをインストールしてJavaScriptを実行するまで(タスク管理とソース管理のツール導入も)

スポンサーリンク

LaravelをインストールしてJavaScriptを実行するまでの手順です。Laravelの手順は探せばたくさんありますが、その分散らかっているので自分が実施した手順をまとめました。

詳細は参考にした方にあるので、最低限の手順をまとめています。

Laravel

前提条件

  • Mac + Vagrant環境で実施
  • 仮想環境の構築は省略(参考の1を参照)

手順

1.仮想マシンに接続

2.Laravelのインストール先へ移動してLaravelをインストール(少し時間かかる)今回は「search_tweet」というプロジェクトを作成しています。

完了したところの画像。

 

3.Homestead.yaml に記述した IPアドレスにブラウザでアクセスしてトップページが表示されることを確認。

参考にさせていただきました

  1. 【Laravel超入門】開発環境の構築(VirtualBox + Vagrant + Homestead + Composer)
  2. Homesteadを使って複数のLaravelプロジェクトを作成する簡単な方法

Laravel MixでJSファイルをコンパイルする設定

前提条件

  • npmがインストールされていること(Macの人は参考の1、2を参照)

手順

上記のLaravelで新プロジェクト(search_tweet)を作成したところからの続きです。

1.「プロジェクト名/resources/assets/js」フォルダを作成して、その配下にjsファイルを作成します。今回は「sample.js」として作成(画像のファイル名間違っていますが、以降「sample.js」として進めます)

2.動作確認のためsample.js に以下のコードを追加します。

3.プロジェクトフォルダ直下のwebpack.mix.jsに以下のコードを追加します。

4.bladeでスクリプトを読み込みます。今回はLaravelのトップページに読み込むので、welcome.blade.phpの<head>タグに以下のコードを追加します。

5.「npm run dev」を実行します。

6.Laravelのトップページを表示するとJavaScript処理されアラートが表示されました。

以上でJavaScriptを動かせるようになりましたが、これだけだとブラウザのデベロッパーツールでデバッグができません。

webpack.mix.jsに以下を追加します。if文で開発時(npm run dev)のみ適用するようにします。

これでデバッグできるようになりました。

参考にさせていただきました

  1. 買いたてのMacにNode.jsとnpmをインストール
  2. MacでPATHを通す
  3. LaravelでJavascriptやCSSを使おう
  4. Laravel mix 始めました

タスク管理とソース管理

タスク管理とソース管理は、参考先だけ導入できたのでリンクのみ。

タスク管理 Redmine

個人でもRedmineを使ってみる!

ソース管理

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です