Zenn
📑

いちいちVScodeのLiveServerつかうのめんどくさい。自分のサイトをアプリみたいにアイコンダブルクリックで立ち上げたい。

に公開
web開発
tech

何ができるようになるか？

アイコンダブルクリックでローカルで自分のサイトを立ち上げられる。
LiveServerをつかう。いちいちVScodeのLiveServerつかうのめんどくさくない？
突然ちょろっと開発状況見せたい時とかあるよね

前提条件

Homebrew と Node.jsがインストールされてること。
そもそもインストールされてるか忘れた場合は以下のコマンドを打つ。

node -v

インストール済みであれば以下のような表示が出る。

v18.16.0

未インストールであれば以下のような表示となる。

zsh: command not found: node

Homebrewが未インストールであれば以下のコマンドでインストール

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Homebrewのパスを設定

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

Homebrewを使っている人は以下のコマンドでインストールしよう。

brew install node

手順

グローバルにLiveServerを入れる

npm install -g live-server

入ったか確認する。

live-server --version

任意の名前.command を作る

#!/bin/bash
live-server "ターゲットディレクトリのパス" --port=5503 &

# サーバーが起動するまで待機
sleep 3

# 指定のURLをブラウザで開く
open "http://127.0.0.1:5503/index.html"

実行権限を付与

chmod +x /ファイルのあるパス/任意の名前.command

これで完了
あとは任意の名前.commandをダブルクリックするだけ！

Discussion