AngularのSPAをローカルでサクッと確認するにはangular-http-serverが便利

AngularでのSPA開発に便利な、angular-http-serverというnpmパッケージの紹介です。

以前から開発環境で使っている、http-serverというパッケージ。
http-serverというコマンドを実行するだけでカレントディレクトリをドキュメントルートにした簡易HTTPサーバーが立ち上がるという便利なやつです。
しかし、ビルド済みのAngularプロジェクトをhttp-serverで実行すると、「存在しないパスを指定した際にindex.htmlにリダイレクトする」という設定がされていないために、ルーティングの確認ができません。
そんな時便利なのが、angular-http-server いかにもすぎる名前ですが、「存在しないパスを指定した際にindex.htmlにリダイレクトする」という設定がされているため、ルーティングの確認も行うことができます。

インストール

どこでも実行できるように、今回はグローバルにインストールします。

$ npm install -g angular-http-server

使ってみる

Angular-CLIで作成したプロジェクトを例に、ビルド済みページの動作確認を行ってみます。

まずは、ng buildでプロジェクトをビルド

$ ng build

プロジェクトルートディレクトリ以下にdistディレクトリが作成され、ビルド済みファイルが作成される。

./dist/
├── favicon.ico
├── index.html
├── inline.bundle.js
├── inline.bundle.js.map
├── main.bundle.js
├── main.bundle.js.map
├── polyfills.bundle.js
├── polyfills.bundle.js.map
├── styles.bundle.js
├── styles.bundle.js.map
├── vendor.bundle.js
└── vendor.bundle.js.map

distに移動して、angular-http-serverコマンドを実行します。

$ angular-http-server

ブラウザからlocalhost:8080にアクセスすると、トップページが表示され、その他ルータで設定したパスへのリンクも正常に行えるかと思います。

オプション

ポート番号指定

angular-http-server -p <ポート番号>

HTTPSでサーバー起動

angular-http-server --https

CORSを有効化

angular-http-server --cors

最後に

便利です。