Atomエディタで簡易httpサーバーを立てられるプラグイン「atom-live-server」の紹介です。

htmlファイル内でjavascriptを編集中、ローカルファイルをブラウザで開いた時 思っていた動作と違った経験はありませんか?

そういう時は 大体がXMLHttpRequest( jQueryのget処理など )を行っている時で、Google Chromeでは下記の様のなエラーを吐き出します。

xhr.js: 175
XMLHttpRequest cannot load file:///Users/name/Develop/mySite/something.js.
Cross origin requests are only supported for protocol schemes: 
 http, data, chrome, chrome-extension, https, chrome-extension-resource.


上のエラーは ' XMLHttpRequestは特定のプロトコルしか許可していない 'というメッセージです。
( * サポートされているプロトコル: http, data, chrome, chrome-extension, https, chrome-extension-resource )

そのような場合、PythonのSimpleHTTPServerなど、
各種プログラミング言語に用意されているローカルサーバーを立ち上げるのも良いのですが、もっと簡単に簡易httpサーバーを立ち上げることできるのが「atom-live-server」です。

' atom-live-server 'はAtomエディタのプラグインで、ショートカットキーを押すだけでhttpサーバーを立ち上げることが出来ます。

* atom-live-server

 

atom-live-serverのインストール

atom-live-serverのインストールはSettingメニュー -> installから' atom-live-server 'と検索してインストールするほか、コマンドライン上からapmコマンドを使ってインストールできます。

# apmコマンドを使って、ターミナル上からインストール
apm install atom-live-server

 

atom-live-serverの使い方

atom-live-serverの使い方は簡単で、
Atomエディタで開いてるファイル上でショートカットキーを押せば プロジェクトフォルダをルートとしたローカルサーバーが立ち上り、自動的にデフォルトブラウザでページが開かれます。

例えば、ポート3000でローカルサーバーを立ち上げる場合は ctrl + shift + 3を押せばサーバーが立ち上がり、atomをアプリケーションごと閉じるとするとサーバーも自動的に終了されます。
( 例 : test.htmlにアクセスする場合は http://127.0.0.1:3000/test.html )

* 用意されているショートカットキー、開かれるページ ( * 既にポートが使用中の場合は自動的にポートが割り当てられます )

- ctrl + shift + 3 :  http://127.0.0.1:3000
- ctrl + shift + 4 :  http://127.0.0.1:4000
- ctrl + shift + 5 :  http://127.0.0.1:5000
- ctrl + shift + 8 :  http://127.0.0.1:8000
- ctrl + shift + 9 :  http://127.0.0.1:9000

同じファイルを左はローカルファイル、右はatom-live-serverで開いてみました

Atom内でブラウザを機能を追加するプラグイン'browser-plus(過去紹介記事)'と連動させると使い勝手も広がります

 

Summary

以上が ' atom-live-server ' の紹介でした。

ショートカットキー 一発でローカルサーバーを立ち上げることが出来るので、axios等のXMLHttpRequestライブラリを試したい時や、フロントエンドデベロッパーさんには活躍する機会が多そうなプラグインです。

GitHub : atom-live-server

 

この記事のカテゴリ

プログラミング

この記事のタグ

ATOMエディタ , 開発ツール , javascript

Socialシェアボタン

スポンサーリンク