In this tutorial, we are going to create a simple meteor app to manage a Todo list and collaborate with others on those tasks. By the end, you should have a basic understanding of Meteor and its project structure.
Installation
The first step is to install meteor on your system. Here's how to go about it:
OSX/Linux
Run the following command in your terminal to install the latest official Meteor release:
curl https://install.meteor.com/ | sh
- For compatibility, Linux binaries are built with CentOS 6.4 i386/amd64.
- iOS development requires the latest Xcode.
Windows
First install Chocolatey, then run this command using an Administrator command prompt:
choco install meteor
- Meteor supports Windows 7/Windows Server 2008 R2 and up.
- The installer uses Chocolatey, which has its own requirements.
- Disabling antivirus (Windows Defender, etc.) will improve performance.
- iOS development is not supported.
Create the meteor app
To create the app, open your terminal and type:
meteor create simple-todos
This will create a new folder called simple-todos with all of the files that a Meteor app needs:
client/main.js # a JavaScript entry point loaded on the clientclient/main.html # an HTML file that defines view templatesclient/main.css # a CSS file to define your app's stylesserver/main.js # a JavaScript entry point loaded on the serverpackage.json # a control file for installing NPM packagespackage-lock.json # Describes the NPM dependency tree.meteor # internal Meteor files.gitignore # a control file for git
To run the newly created app:
cd simple-todosmeteor
Open your web browser and go to http://localhost:3000 to see the app running.
You can play around with this default app for a bit before we continue. For example, try editing the text in <h1> insideclient/main.htmlusing your favorite text editor. When you save the file, the page in your browser will automatically update with the new content. We call this "hot code push".
Newer JavaScript syntax
Meteor supports many newer JavaScript features, such as those in ECMAScript 2015 (ES6). If you haven't tried these next-generation JavaScript features yet, we recommend taking a look at ECMAScript 2015-2017 Guide to familiarize yourself with the newer syntax.
Now that you have some experience editing the files in your Meteor app, let's start working on a simple todo list application.