Meteor ToDo App - Meteor

How to create a simple todo app?

This chapter will explain you on how to create simple todo app.

Step1 - Create App

Open the command prompt and run below commands

To see the app, run the app with the meteor command and go to http://localhost:3000

Step2 - Create Folders and Files

Instead of default file structure we will refactor it. Let's create client folder where we will create todo-app.html, todo-app.css and todo-app.js.

Let’s also create server folder with server.js inside.

Finally create a collections folder with task-collection.js file inside.

You can view the app structure in below image

meteor-todo-structure.jpg

Step 3 - client/todo-app.html

First development step is to create HTML for the app. An input field is needed where you can add new tasks and these tasks will be in a form of list with delete and check functionality. We will also have functionality for showing or hiding completed tasks.

Step 4 - collections/task-collection.js

In this step we will just create new MongoDB Collection so that we can use it on both server and client side.

Step 5 - server/server.js

Next define methods for the app on server side and these methods will be called from the client. In this file we will also publish database query.

Step 6 - client/todo-app.js

This is the main client JavaScript file. This file could also be refactored but we will write all client side code here. First subscribe to the task collection which is published on the server. Then we are creating helpers to handle the app logic and finally we are defining events that will call methods from the server.

Step 7 - Deploy

Once we are done with development, we can deploy the app from command prompt window and deployment name of our app will be my-first-todo-app.

We can open the http://my-first-todo-app.meteor.com/ to start using our app.

meteor-todo-app-deployed.jpg

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Meteor Topics