Meteor Hallo Weltbeispiel

Meteor hallo Weltbeispiel

In diesem Tutorial zeigen wir Ihnen, wie Sie eine Website mit dem Framework vonMeteorerstellen.

Benutztes Werkzeug :

Meteor 1.2.1
Getestet mit Linux (Debian, Ubuntu oder Mint)
Getestet mit Mac OSX

1. Installieren Sie Meteor

Issuecurl https://install.meteor.com | sh, alles wird installiert und konfiguriert.

$ 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.
//...

Dadurch wird das ausführbare Skript vonmeteorinstalliert.

2. Meteor App erstellen

2.1 Issue meteor create {app-name} to create a Meteor app based on the default ‘click-and-count” template. In diesem Tutorial erstellen wir eine "Hallo" -App.

$ 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}}

P.S The folder .meteor containing the current Meteor project configuration info, often times, you don’t touch this.

3. Führen Sie die Meteor App aus

Navigieren Sie zum Ausführen der Meteor-App zum Projektstammpfad und geben Siemeteor ein

$ cd hello/
$ pwd
$ /home/example/hello

$ meteor
[[path-to/hello ]]]]]

=> Started proxy.
=> Started MongoDB.
=> Started your app.

=> App running at: http://localhost:3000/

Der Meteor wird auf Port 3000 gestartet.

4. Demo

4.1 Opens the browser and access http://localhost:3000/

meteor-hello-world-1

4.2 In the broswer, open few tabs and access the same URL http://localhost:3000/, leaves the browser open. Bearbeiten Siehello.html, hängen Sie ein „hello world“ an das Ende der Überschrift vonh1an und speichern Sie es.

hello.html


  hello



  Welcome to Meteor! hello world

  {{> hello}}

4.3 Review the browser again, changes immediately appear on all browser tabs, no need to refresh the browser or F5!

meteor-hello-world-2

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

Beispiel zum Erstellen einer Meteor-App aus der Vorlage "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

Für einen Port unter 1024 benötigen Siesudo

$ meteor --port 80
Error: listen EACCES

$ sudo meteor --port 80

TOC

Meteor Hallo Weltbeispiel