Meteor ToDo App - Meteor
Interview Questions
All Tutorials
Job SearchHow 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
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.
