Exemple de monde bonjour Meteor
Dans ce tutoriel, nous allons vous montrer comment créer un site Web avec le frameworkMeteor.
Les outils utilisés :
-
Meteor 1.2.1
-
Testé avec Linux (Debian, Ubuntu ou Mint)
-
Testé avec Mac OSX
1. Installer Meteor
Problèmecurl https://install.meteor.com | sh, tout sera installé et configuré.
$ 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.
//...
Cela installera un script exécutablemeteor.
2. Créer l'application Meteor
2.1 Issue meteor create {app-name} to create a Meteor app based on the default ‘click-and-count” template. Dans ce tutoriel, nous allons créer une application «bonjour».
$ 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. Exécutez l'application Meteor
Pour exécuter l'application Meteor, accédez au chemin racine du projet, saisissezmeteor
$ cd hello/ $ pwd $ /home/example/hello $ meteor [[path-to/hello ]]]]] => Started proxy. => Started MongoDB. => Started your app. => App running at: http://localhost:3000/
Le Meteor sera lancé sur le port 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. Modifiezhello.html, ajoutez un «hello world» à la fin de la ligne d'en-tête deh1 et enregistrez-le.
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
Exemple pour créer une application Meteor à partir du modèle «localmarket»
$ meteor create hello --example localmarket
5.3 How to start Meteor app on different port?
A : Uses meteor --port {port-number}
$ meteor --port 8080
Pour un port inférieur à 1024, il fautsudo
$ meteor --port 80 Error: listen EACCES $ sudo meteor --port 80