流星ハローワールドの例
このチュートリアルでは、Meteorフレームワークを使用してWebサイトを作成する方法を示します。
使用ツール：
-
流星1.2.1
-
Linux（Debian、UbuntuまたはMint）でテスト済み
-
Mac OSXでテスト済み
1. Meteorをインストールする
curl https://install.meteor.com | shを発行すると、すべてがインストールおよび構成されます。
$ curl https://install.meteor.com | sh
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 6674 0 6674 0 0 4145 0 --:--:-- 0:00:01 --:--:-- 4145
Downloading Meteor distribution
######################################################################## 100.0%
Meteor 1.2.1 has been installed in your home directory (~/.meteor).
Writing a launcher script to /usr/local/bin/meteor for your convenience.
//...
これにより、meteor実行可能スクリプトがインストールされます。
2. Meteorアプリを作成する
2.1 Issue meteor create {app-name} to create a Meteor app based on the default ‘click-and-count” template. このチュートリアルでは、「hello」アプリを作成します。
$ meteor create hello Created a new Meteor app in 'hello'. To run your new app: cd hello meteor //...
2.2 When it’s done, you will see a hello directory, containing the following files :
$ tree -a -L 1 hello hello |--- hello.css |--- hello.html |--- hello.js |--- .meteor
2.3 Review the generated files.
hello.js
if (Meteor.isClient) {
// counter starts at 0
Session.setDefault('counter', 0);
Template.hello.helpers({
counter: function () {
return Session.get('counter');
}
});
Template.hello.events({
'click button': function () {
// increment the counter when button is clicked
Session.set('counter', Session.get('counter') + 1);
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
hello.css
/* CSS declarations go here */
hello.html
hello Welcome to Meteor!
{{> hello}}You've pressed the button {{counter}} times.
P.S The folder .meteor containing the current Meteor project configuration info, often times, you don’t touch this.
3. Meteorアプリを実行する
Meteorアプリを実行するには、プロジェクトのルートパスに移動し、meteorと入力します。
$ cd hello/ $ pwd $ /home/example/hello $ meteor [[path-to/hello ]]]]] => Started proxy. => Started MongoDB. => Started your app. => App running at: http://localhost:3000/
Meteorはポート3000で開始されます。
4. Demo
4.1 Opens the browser and access http://localhost:3000/
4.2 In the broswer, open few tabs and access the same URL http://localhost:3000/, leaves the browser open. hello.htmlを編集し、h1の見出しの最後に「hello world」を追加して保存します。
hello.html
hello Welcome to Meteor! hello world
{{> hello}}You've pressed the button {{counter}} times.
4.3 Review the browser again, changes immediately appear on all browser tabs, no need to refresh the browser or F5!
5. FAQs
5.1 How to stop the running Meteor app?
A : Bring up the terminal where the Meteor app is running, and press ctrl+c
5.2 Is there other Meteor app template?
A : meteor create --list
$ meteor create --list Available examples: clock leaderboard localmarket simple-todos simple-todos-angular simple-todos-react todos
テンプレート「localmarket」からMeteorアプリを作成する例
$ meteor create hello --example localmarket
5.3 How to start Meteor app on different port?
A : Uses meteor --port {port-number}
$ meteor --port 8080
1024未満のポートの場合、sudoが必要です
$ meteor --port 80 Error: listen EACCES $ sudo meteor --port 80