An Introduction to Meteor.js - Build an App
Repository
https://github.com/meteor/meteor
What Will I Learn?
By the end of this tutorial, users will understand:
- How to install Meteor on their machine.
- How to bootstrap a Meteor project.
- How to create a simple Meteor app.
Requirements
To follow this tutorial, you will need:
- A laptop or desktop computer.
- Internet access.
- A text editor: Atom, or Visual Studio Code are fine.
- A knowledge of HTML, CSS and JavaScript.
Difficulty
- Basic
Tutorial Contents
Source
This tutorial has been written for students who have a working knowledge of HTML, CSS and JavaScript, but would like to add a framework to their repitoire.
With this in mind, you will learn here, how to use one of the lesser known, yet just as powerful, JavaScript frameworks: Meteor.
Meteor comes bundled with MongoDB for data persistence and integrates with other frameworks such as React, Vue and Angular which makes it great. I also find the flexibility of being able to build for any device (iOS, Android and Desktop) a bonus.
The todo app seems to be today, what 'Hello World!' was a couple of decades ago, so I will be introducing you to Meteor by building a simple todo app. We will see how to get Meteor on you machine, because that's an important step! Then we will generate our app using the command line before moving into the meat of the tutorial - creating the app. We will add some styles, but they will be trivial as getting the application working is the main goal.
Let's begin...
Installing Meteor
Installation for Meteor is fairly straight forward.
Linux/Mac
- Open the terminal and enter the following:
curl https://install.meteor.com/ | sh
Windows
- Install Chocolately.
- Run the following in the command prompt:
choco install meteor
Creating the Project
Creating a Meteor app is really straight forward. Now, as an aside, I use a Mac, so will be referring to my command line as the Terminal. Use the equivalent on a Windows machine.
- Open the Terminal.
- Navigate to the directory where you would like to initialise the app.
- Type the following:
meteor create todo-app
- To run the new app:
cd todo-app
meteor
- This will start the server (which is hot-loading - handy!) and you can view it via
localhost:3000. You will see the following output in the browser:
- Next we will be creating another directory in the project root folder. Change into the todo-app root folder if you're not already there.
- Create a directory called
imports. - Change into the imports directory and create two more directories here. The first is
apiand the second isinterface.
Okay! Now we should be ready to write some code.
Creating the App View
In the files that were just generated, client/main.html is where the bulk of the display is coming from. We are going to change this a little.
- Naviagte to
client/main.htmland open this file in your favourite text editor. - Delete all of the code in this file and replace it with the following:
<head>
<title>Todo App</title>
</head>
- Save and close this file.
Next we will create an html file to store the body of our app.
- Navigate to
imports/interface. - Create a file here called
body.html - Insert the following code into
body.html:
<body>
<div class="container">
<header>
<h1>My Todo List</h1>
</header>
<ul>
{{ #each tasks }}
{{ > task }}
{{ /each }}
</ul>
</div>
</body>
<template name="task">
<li>{{ text }}</li>
</template>
- Save this file.
Finally, we will set up out JavaScript file that sends information to the body.html file.
- Still in the interface directory, create another file named:
body.js. - Insert the following code into
body.js:
import { Template } from 'meteor/templating';
import './body.html';
Template.body.helpers({
tasks: [
{ text: 'Get lunch'},
{ text: 'Write a tutorial'},
{ text: 'Check Steemit'},
]
});
Just before you view it in the browser, we will need to make a change in the client/main.js file.
- Open
client/main.js. - Remove all the code from this file.
- Replace it with this single line:
import '../imports/interface/body.js';
- Save and close this file.
- Open your browser and go to
localhost:3000and you should see the following:
Adding Data Persistance with MongoDB
This isn't a database tutorial, so I will not be going into a great deal of depth here, just know that if you follow along and write the code correctly, it should work.
I will point out mongo commands as we pregress, but other than that, not much else. The good thing is that Meteor ships with mongo, so there is no set up for use really at all - we can just use it straight out of the box.
We will begin here by setting up the ability to save to a database.
- Start by switching to the
apidirectory. - Create a new file named
tasks.js. - Place the following code into this file.
import { Mongo } from 'meteor/mongo';
export const Tasks = new Mongo.Collection('tasks');
- Next, import this file into the
server/main.jsfile, by adding, onto line 2:
import '../imports/api/tasks.js';
- Then, update the
interface/body.jsto accept data from the database rather than the static html file. On line 3 of this file add in:
import { Tasks } from '.../api/tasks.js';
- Save all three files that were just altered and switch to the Terminal.
- Open a new tab and navigate to the todo-app directory.
- Run the following command to start the mongo server:
meteor mongo
- Enter the following lines of code to insert some data into the database (you can enter them all at once or one at a time:
db.tasks.insert({ text: "Hello world!", createdAt: new Date() });
db.tasks.insert({ text: "G'Day!", createdAt: new Date() });
db.tasks.insert({ text: "Howdy world!", createdAt: new Date() });
- Close down the mongo console using Ctrl+C.
- Check your output in the browser. You should see your three messages appearing instead of the array we created earlier.
Adding Tasks
So now that we have the database set up, we can save data to it. The problem is, we don't want to go into the console and manually enter our todos each time we have a new one to add.
A better solution is to create a from that can be used to submit the data with. We will place the form at the top of the page in the interface/body.html file.
- Open the above file.
- Put a space between the heading line and the closing header line. For me, this is line 5.
- Enter the following html:
<form class="new-task">
<input type="text" name="text" placeholder="Type to add your item" />
</form>
- Save the
body.htmlfile and switch to theinterface/body.jsfile. We are going to mow write some code that will submit the new task to the list. - Write the following code (directly under the existing code - for me, this will begin on line 13) in the
body.jsfile:
Template.body.events({
'submit .new-task'(event) {
event.preventDefault();
const target = event.target;
const text = event.text.value;
Tasks.insert({
text,
createdAt: new Date() //current time
});
target.text.value = '';
}
});
- Save this file and add in a new todo. You can submit it with the Return or Enter key on your keyboard. Just to quickly explain the submit code.
- We start by watching all elements with a class of
.new-task. - When this is triggered, we create two new variables using JavaScript
const. - The value of whatever is in the text field is assigned to the const called text.
- Using the insert command, it is inserted into the database along with a timestamp of when it was created.
- Finally, the text variable is cleared to make way for any new todos.
- We start by watching all elements with a class of
- One last thing before we move onto the next section. Lets make our most recent todos appear at the top of our list. This could be optional - you might prefer your oldest ones at the top so that you complete them first. In
interface/body.jsupdate line 9 (in my file) to read:
return Tasks.find({}, { sort: { createdAt: -1 } });
Check your app at localhost:3000 and you should see you lastes todo jump to the top of your list.
In the next section, we will look at how to update the todos (check or uncheck them) and how to remove them from the list.
Updating and Removing Todos
Before we do anything in this section, we are going to move the template from the interface/body.html file to its onw file. This is an attempt to keep our code as clean and readable as possible.
- In the interface directory, create a new file. Name it
item.html. - In the same diractory, also create a new javascript file called
item.js. - Remove the template code from
body.htmland paste it intoitem.html. Save both files.
Alright. now that is set up, we are ready to implement the updating and removing.
- In your
item.htmlchange the existing html to look like the following:
<template name="task">
<li class="{{#if checked}}checked{{/if}}">
<button class="delete">×</button>
<input type="checkbox" checked="{{checked}}" class="check-uncheck" />
<span class="text">{{text}}</span>
</li>
- Next we need to wire this up in
item.js.
import { Template } from 'meteor/templating';
import { Tasks } from '../api/tasks.js';
import './item.html';
Template.task.events({
'click .toggle-checked'() {
// Set the checked property to the opposite of its current value
Tasks.update(this._id, {
$set: { checked: ! this.checked },
});
},
'click .delete'() {
Tasks.remove(this._id);
},
});
- Finally, include this in the
body.jsfile. On line 5 of this file, place the following import startment:
import './item.js';
- Save all of your files and check you app in the browser. You should see something like the following. You will be able to add and delete todos, but if you use the checkboxes, nothing will happen as we have not your written the CSS:
Just to explain the JavaScript in this section. We wait for two click events - the first will fire when the user toggles the checkbox and either set the styling of the todo to be 'checked' or 'unchecked'. The second event waits for the user to click the delete button. Once registered, the item will be deleted from the database using the .remove command.
Styling the Checked and Unchecked Events
Okay, going well! The final thing we want to do here is style the events we created in the previous step. At the moment, if we use the checkbox, nothing happens, we need to fix this.
At this point, you can save and close all other files - there is no point having too many open at once - it justs adds unnecessary confusion.
Open the
client/main.cssfile. Currently it only has a couple of styles applied to the body.Type in the following under the existing code. They only add in a few styles, just to make it a little easier to look at and to allow they checked/unchecked function to operate correctly.
.container {
max-width: 600px;
margin: 0 auto;
min-height: 100%;
}
.new-task input {
padding: 10px 0;
width: 100%;
font-size: 1em;
}
li {
list-style: none;
padding: 15px;
border-bottom: #eee solid 1px;
}
li .text {
margin-left: 10px;
}
li.checked {
color: #888;
}
li.checked .text {
text-decoration: line-through;
}
Conclusion
Well, thank you for following along. I hope you have discovered something new throughout the duration of this tutorial. Your todo app should be functioning well. Below is a screenshot of how it turned out after the CSS was applied:
If you find that something went awry, or you did not successfully complete this, please, feel free to ask in the comments section. I'll answer as soon as possible.
As always, I'm keen to hear your thoughts and comments. If you have any ways I can improve, or something you might like to see a tutorial on, please leave a comment below too.
Otherwise, thank you, again, for following, and I'll see you next time.
Thank you for your contribution.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]