Book Image

Build Applications with Meteor

Book Image

Build Applications with Meteor

Overview of this book

This book starts with the basic installation and overview of the main components in Meteor. You’ll get hands-on multiple versatile applications covering a wide range of topics from adding a front-end views with the hottest rendering technology React to implementing a microservices oriented architecture.All the code is written with ES6/7 which is the latest significantly improved JavaScript language. We’ll also look at real-time data streaming, server to server data exchange, responsive styles on the front-end, full-text search functionality, and integration of many third-party libraries and APIs using npm. By the end of the book, you’ll have the skills to quickly prototype and even launch your next app idea in a matter of days.
Table of Contents (16 chapters)
Title Page
Credits
About the Author
About the Reviewer
www.PacktPub.com
Customer Feedback
Preface
8
Build a Chatbot with Facebook’s Messenger Platform

Building the Modal


In our app, we want to open a popup/modal on a user action and then close it either by clicking on the close button inside the modal or anywhere outside of it. 

Let's build a sample Modal app and see how it'll work in a step-by-step fashion. Later, we can implement it in the Kanban app. Open the terminal and create a modal app: meteor create modal. To save on typing and installing packages one by one, copy and replace this package.json file with the one that was generated by Meteor. Then, run  npm install:

{
 "name": "modal",
 "private": true,
 "scripts": {
 "start": "meteor run"
},
 "dependencies": {
 "babel-runtime": "6.18.0",
 "classnames": "^2.2.5",
 "meteor-node-stubs": "~0.2.0",
 "react": "^15.4.2"
},
 "babel": {
  "plugins": [
  "transform-class-properties"
  ]
},
 "devDependencies": {
 "babel-plugin-transform-class-properties": "^6.19.0"
 }
}

To keep it clear and descriptive, we will create the Modal app with just four files. Delete all the default files in the client...