curl https://install.meteor.com/ | sh

npm install -g meteor

$ meteor create --bare warehouse
$ cd warehouse
$ meteor npm install

meteor-base@1.5.1             # Packages every Meteor app needs to have
mobile-experience@1.1.0       # Packages for a great mobile UX
mongo@1.12.0                   # The database Meteor supports right now
static-html             # Define static page content in .html files
reactive-var@1.0.11            # Reactive variable for tracker
tracker@1.2.0                 # Meteor's client-side reactive programming library

standard-minifier-css@1.7.3   # CSS minifier run for production mode
standard-minifier-js@2.6.1    # JS minifier run for production mode
es5-shim@4.8.0                # ECMAScript 5 compatibility for older browsers
ecmascript@0.15.2              # Enable ECMAScript2015+ syntax in app code
typescript@4.3.2              # Enable TypeScript syntax in .ts and .tsx modules
shell-server@0.5.0            # Server-side component of the `meteor shell` command

$ meteor remove mobile-experience static-html reactive-var tracker standard-minifier-css es5-shim shell-server

meteor-base@1.5.1             # Packages every Meteor app needs to have
mongo@1.12.0                   # The database Meteor supports right now

standard-minifier-js@2.6.1    # JS minifier run for production mode
ecmascript@0.15.2              # Enable ECMAScript2015+ syntax in app code
typescript@4.3.2              # Enable TypeScript syntax in .ts and .tsx modules

$ meteor add http

$ mkdir -p server
$ touch ./server/main.js

import { Meteor } from 'meteor/meteor'
import { HTTP } from 'meteor/http'

// fake data for some products
const productIds = [
  '012345',
  'abcdef',
  'foobar'
]

const randomProductId = () => productIds[Math.floor(Math.random() * 3)]
const randomAvailable = () => Math.random() <= 0.5

Meteor.startup(() => {
  Meteor.setInterval(() => {
    const params = {
      productId: randomProductId(),
      available: randomAvailable()
    }

    const response = HTTP.post('http://localhost:3000/warehouse/update', { params })

    if (response.ok) {
      console.debug(response.statusCode, 'updated product', params)
    } else {
      console.error(response.statusCode, 'update product failed', params)
    }
  }, 5000) // change this value to get faster or slower updates
})

$ meteor --port=4000

$ cd .. # you should be outside of warehouse now
$ meteor create --blaze catalog-service
$ cd catalog-service
$ meteor npm install --save bcrypt body-parser jquery mini.css simpl-schema
$ meteor add reactive-dict accounts-password accounts-ui aldeed:autoform communitypackages:autoform-plain leaonline:webapp jquery@3.0.0!

$ mkdir -p imports
$ touch ./imports/Products.js

import { Mongo } from 'meteor/mongo'

export const Products = new Mongo.Collection('products')

// used to automagically generate forms via AutoForm and SimpleSchema
// use with aldeed:collection2 to validate document inserts and updates
Products.schema = {
  productId: String,
  name: String,
  description: String,
  category: String,
  price: Number,
  available: Boolean
}

const fixedDocs = [
  {
    productId: 'foobar',
    name: 'Dev Keyboard',
    description: 'makes you pro dev',
    category: 'electronics',
    price: 1000,
    available: true
  },
  {
    productId: '012345',
    name: 'Pro Gamepad',
    description: 'makes you pro gamer',
    category: 'electronics',
    price: 300,
    available: true
  },
  {
    productId: 'abcdef',
    name: 'Pro Headset',
    description: 'makes you pro musician',
    category: 'electronics',
    price: 800,
    available: true
  }
]

// to make the start easier for you, we add some default docs here
Meteor.startup(() => {
  if (Products.find().count() === 0) {
    fixedDocs.forEach(doc => Products.insert(doc))
  }
})

import { Meteor } from 'meteor/meteor'
import { WebApp } from 'meteor/webapp'
import bodyParser from 'body-parser'
import { Products } from '../imports/Products'

const http = WebApp.connectHandlers

// proper post body encoding
http.urlEncoded(bodyParser)
http.json(bodyParser)

// connect to your logger, if desired
const log = (...args) => console.log(...args)

// this is an open HTTP POST route, where the
// warehouse service can update product availability
http.use('/warehouse/update', function (req, res, next) {
  const { productId, available } = req.body
  log('/warehouse/update', { productId, available })

  if (Products.find({ productId }).count() > 0) {
    const transform = {
      productId: productId,
      available: available === 'true' // http requests wrap Boolean to String :(
    }

    // if not updated we respond with an error code to the service
    const updated = Products.update({ productId }, { $set: transform })
    if (!updated) {
      log('/warehouse/update not updated')
      res.writeHead(500)
      res.end()
      return
    }
  }

  res.writeHead(200)
  res.end()
})

// We can provide a publication, so the shop can subscribe to products
Meteor.publish('getAvailableProducts', function ({ category } = {}) {
  log('[publications.getAvailableProducts]:', { category })
  const query = { available: true }

  if (category) {
    query.category = category
  }

  return Products.find(query)
})

// We can provide a Method, so the shop can fetch products
Meteor.methods({
  getAvailableProducts: function ({ category } = {}) {
    log('[methods.getAvailableProducts]:', { category })
    const query = { available: true }

    if (category) {
      query.category = category
    }

    return Products.find(query).fetch() // don't forget .fetch() in methods!
  }
})

<head>
    <title>catalog-service</title>
</head>

<body>
<h1>Catalog service</h1>

{{#unless currentUser}}
    {{> loginButtons}}
{{else}}
    {{> products}}
{{/unless}}
</body>

<template name="products">
    <ul>
    {{#each product in allProducts}}
        <li>
            <div>
                {{product.productId}} - {{product.name}}
                {{#if product.available}})(available){{else}}(not available){{/if}}
            </div>
            <div>{{product.description}}</div>
        </li>
    {{else}}
        <li>No products yet!</li>
    {{/each}}
    </ul>

    <button class="addProduct">Add product</button>

    {{#if addProduct}}
        {{> quickForm id="addProductForm" schema=productSchema type="normal"}}
    {{/if}}
</template>

/* global AutoForm */
import { Template } from 'meteor/templating'
import { Tracker } from 'meteor/tracker'
import { ReactiveDict } from 'meteor/reactive-dict'
import { Products } from '../imports/Products'
import SimpleSchema from 'simpl-schema'
import { AutoFormPlainTheme } from 'meteor/communitypackages:autoform-plain/static'
import 'meteor/aldeed:autoform/static'
import 'mini.css/dist/mini-dark.css'
import './main.html'

// init schema, forms and theming
AutoFormPlainTheme.load()
AutoForm.setDefaultTemplate('plain')
SimpleSchema.extendOptions(['autoform'])

// schema for inserting products,
// Tracker option for reactive validation messages
const productSchema = new SimpleSchema(Products.schema, { tracker: Tracker })

Template.products.onCreated(function () {
  const instance = this
  instance.state = new ReactiveDict()
})

Template.products.helpers({
  allProducts () {
    return Products.find()
  },
  productSchema () {
    return productSchema
  },
  addProduct () {
    return Template.instance().state.get('addProduct')
  }
})

Template.products.events({
  'click .addProduct' (event, templateInstance) {
    event.preventDefault()
    templateInstance.state.set('addProduct', true)
  },
  'submit #addProductForm' (event, templateInstance) {
    event.preventDefault()

    const productDoc = AutoForm.getFormValues('addProductForm').insertDoc
    Products.insert(productDoc)

    templateInstance.state.set('addProduct', false)
  }
})

$ meteor

$ cd .. # you should be outside catalog-service now
$ meteor create --blaze shop
$ cd shop
$ meteor npm install --save jquery mini.css

<head>
    <title>shop</title>
</head>

<body>
<h1>Welcome to our Shop!</h1>

{{> products}}
</body>

<template name="products">

    <h2>Subscribed products (live)</h2>
    <ul>
        {{#each product in subscribedProducts}}
            <li>{{product.name}}</li>
        {{else}}
            <li>Currently no products available</li>
        {{/each}}
    </ul>

    <h2>Fetched products (not live)</h2>
    <ul>
        {{#each product in fetchedProducts}}
            <li>{{product.name}}</li>
        {{else}}
            <li>Currently no products available</li>
        {{/each}}
    </ul>
</template>
```



Do the same with `client/main.js`:



```js
import { Template } from 'meteor/templating'
import { Mongo } from 'meteor/mongo'
import { ReactiveVar } from 'meteor/reactive-var'
import { DDP } from 'meteor/ddp-client'
import 'mini.css/dist/mini-dark.css'
import './main.html'

// at very first we establish a connection to our catalog-service
// in a real app we would read the remote url from Meteor.settings
// see: https://docs.meteor.com/api/core.html#Meteor-settings
const remote = 'http://localhost:3000'
const serviceConnection = DDP.connect(remote)

// we need to pass the connection as option to the Mongo.Collection
// constructor; otherwise the subscription mechanism doesn't "know"
// where the subscribed documents will be stored
export const Products = new Mongo.Collection('products', {
  connection: serviceConnection
})

Template.products.onCreated(function () {
  // we create some reactive variable to store our fetch result
  const instance = this
  instance.fetchedProducts = new ReactiveVar()

  // we can't get our data immediately, since we don't know the connection
  // status yet, so we wrap it into a function to be called on "connected"
  const getData = () => {
    const params = { category: 'electronics' }

    // option 1 - fetch using method call via remote connection
    serviceConnection.call('getAvailableProducts', params, (err, products) => {
      if (err) return console.error(err)

      // insert the fetched products into our reactive data store
      instance.fetchedProducts.set(products)
    })

    // options 2 - subscribe via remote connection, documents will be
    // added / updated / removed to our Products collection automagically
    serviceConnection.subscribe('getAvailableProducts', params, {
      onStop: error => console.error(error),
      onReady: () => console.debug('getAvailableProducts sub ready')
    })
  }

  // we reactively wait for the connected status and then stop the Tracker
  instance.autorun(computation => {
    const status = serviceConnection.status()
    console.debug(remote, { status: status.status })

    if (status.connected) {
      setTimeout(() => getData(), 500)
      computation.stop()
    }
  })
})

Template.products.helpers({
  subscribedProducts () {
    return Products.find({ available: true })
  },
  fetchedProducts () {
    return Template.instance().fetchedProducts.get()
  }
})
```



Now run the app on a different port than 3000 or 4000 and see the avialable products getting magically appear and the non-available ones disappear:



```bash
$ meteor --port=5000
```



We have finished our example project :tada:

**:nerd_face: What's going on here?**

The shop uses a DDP-connection to the running `catalog-service` app and subscribes to the publication we created in [Step 2.3](#create-ddp). Since we add this connection the client Mongo Collection, Meteor knows that the received documenmts have to be placed in this collection. Since queries on the client are reactive our Template engine detects changes of these updates and re-renders, based on the new data.

## Security considerations

We have created some services that communicate with each other by given endpoints. However, these services do neither verify the integrity of the data nor authenticate the source of the requests. This is an advanced topic and may be covered in future articles.

Also note, that the `catalog-service` contains the `autoupdate` package to automatically return any data to any client and the `insecure` package, allowing client-side inserts to be synchronized to the server collection.
These packages are super nice for mocking new prototypes of projects but **you should remove them and implement authentication and verification procedures**.

Many of these topics are covered in the [Meteor guide's security section](https://guide.meteor.com/security.html).

## Deployment

The deployment of these apps is a topic for itself. With more services added to the infrastructure the complexity of deployment increases, too.

In general you can rely on Meteor Software's Galaxy solution, which allows you to deploy your apps and services in one step. It also deploys them on a Meteor-optimized AWS configuration and brings APM tools out-of-the-box.

If you run your own infrastructure or want to use a different provider then you may check out [Meteor-up](https://meteor-up.com/), which allows you to deploy to any server in one step with a few configurations added to a JSON file.

In general you should read on the [deployment guide](https://guide.meteor.com/deployment.html) which covers both solutions and many more topics, like settings files, CDN or SEO.

## Summary and outlook

This article was a short introduction to Microservices with Meteor and should provide enough insights to get you something running.

From here you can extend the example or create your own ones. Notice, that security measures were not part of the article and should therefore be taken seriously, before getting your services out in the wild.

## Further resources

All the code of the hands-on is located on this repository:


  

    

      
      
        jankapunkt
       / 
        microservices-with-meteor
      
    
    

      An example setup to show how to use Microservices with Meteor
    
  
  

    

Microservices with Meteor



An example setup to show how to use Microservices with Meteor.

Read the article on: https://dev.to/jankapunkt/microservices-with-meteor-40la






  


  
View on GitHub




More of my articles on Meteor:

Beginners


Why choose Meteor (or not) for your next project?c
Transform any Meteor App into a PWA
Bootstrapping an Admin account in Meteor


Advanced


Meteor and standard lint 
Plugin architecture with Meteor
Meteor browser bundle and Node-Stubs - beware what you import


<hr>

I regularly publish articles here on dev.to about Meteor and JavaScript. If you like what you are reading and want to support me, you can send me a tip via PayPal.

You can also find (and contact) me on GitHub, Twitter and LinkedIn.

Keep up with the latest development on Meteor by visiting &utm_medium=online&utm_campaign=Q2-2022-Ambassadors">their blog and if you are the same into Meteor like I am and want to show it to the world, you should check out the &utm_medium=online&utm_campaign=Q2-2022-Ambassadors">Meteor merch store.