Category: 08. Meteor Js

Integrate Meteor with GraphQL for a flexible and modern API approach.

1. Install Apollo and GraphQL Packages:

meteor add apollo meteor npm install graphql apollo-server

1. Set Up Apollo Server:

import { ApolloServer, gql } from 'apollo-server'; const typeDefs = gql type Query { items: [Item] } type Item { _id: ID name: String quantity: Int } ; const resolvers = { Query: { items: () => Items.find().fetch() } }; const server = new ApolloServer({ typeDefs, resolvers }); server.listen().then(({ url }) => { console.log(🚀 Server ready at ${url}); });

1. Querying GraphQL from Meteor:Use Apollo Client or a similar library to query GraphQL endpoints.

import { ApolloClient, InMemoryCache, gql } from '@apollo/client'; const client = new ApolloClient({ uri: 'http://localhost:4000/', cache: new InMemoryCache() }); client.query({ query: gql query { items { _id name quantity } }  }).then(response => console.log(response.data));

Docker for Containerization

1. Create a Dockerfile:

FROM node:18 WORKDIR /usr/src/app COPY package*.json ./ RUN npm install COPY . . RUN npm run build EXPOSE 3000 CMD ["npm", "start"]

1. Build and Run Docker Container:

docker build -t my-meteor-app . docker run -p 3000:3000 my-meteor-app

CI/CD with Meteor

1. Set Up a CI/CD Pipeline: Use platforms like GitHub Actions, GitLab CI, or Jenkins to automate testing and deployment.
2. Example GitHub Actions Workflow:

name: Deploy Meteor App on: push: branches: - main jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: '18' - name: Install dependencies run: npm install - name: Build run: npm run build - name: Deploy run: npm run deploy

Meteor applications can interact with microservices for more modular and scalable architectures.

1. Create a Microservice: Use Node.js or other technologies to create your microservices.
2. Integrate with Meteor: Call your microservices from Meteor methods or use HTTP packages to interact with them.

meteor add http

Meteor.methods({ 'getWeather': function (city) { const response = HTTP.get(http://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}); return response.data; } });

Optimizing Performance

1. Optimize Publication Queries: Make sure your publication queries are efficient and only return necessary data.

jsCopy codeMeteor.publish('items', function () { return Items.find({}, { fields: { name: 1, quantity: 1 } }); });

1. Use Meteor.publishComposite for Complex Data: For publications that need to return related data, you can use the matb33:collection-hooks or reywood:publish-composite packages.

bashCopy codemeteor add reywood:publish-composite

import { PublishComposite } from 'meteor/reywood:publish-composite'; Meteor.publishComposite('itemsWithComments', function () { return { find() { return Items.find(); }, children: [ { find(item) { return Comments.find({ itemId: item._id }); } } ] }; });

1. Use Meteor.defer for Delayed Execution: To avoid blocking the main thread, use Meteor.defer for code that doesn’t need to be executed immediately.

jsCopy codeMeteor.defer(() => { // This code runs later, after the current event loop. });

Schema Validation with aldeed:simple-schema

1. Define Schema:

import SimpleSchema from 'simpl-schema'; const ItemSchema = new SimpleSchema({ name: { type: String, min: 1, max: 100 }, quantity: { type: Number, min: 0 } }); Items.attachSchema(ItemSchema);

1. Validation on the Server:

Meteor.methods({ 'addItem': function (item) { check(item, ItemSchema); Items.insert(item); } });

Here are some packages that can enhance your Meteor application:

• ostrio:files: For file management.
• kadira:flow-router: For a more modern routing solution.
• matb33:collection-hooks: For hooks on collection operations.

Meteor applications can be deployed on various platforms:

**1. Galaxy: Official Meteor hosting platform.

**2. Docker: Containerize your Meteor app and deploy it to services like AWS, Google Cloud, or Azure.

**3. Heroku: Use the Meteor buildpack to deploy to Heroku.

Example Dockerfile:

FROM node:18

# Create and change to the app directory.
WORKDIR /usr/src/app

# Install app dependencies
COPY package*.json ./
RUN npm install

# Bundle app source
COPY . .

# Build your app
RUN npm run build

# Expose port
EXPOSE 3000

# Run the app
CMD ["npm", "start"]

Example Heroku Deployment:

heroku create
git push heroku main

Meteor can be integrated with modern front-end frameworks like React, Vue, or Angular.

React Example:

meteor add react-meteor-data

React Component:

import React from 'react';
import { withTracker } from 'meteor/react-meteor-data';
import { Items } from '../imports/api/items';

const App = ({ items }) => (
  <div>
&lt;h1>Items&lt;/h1>
&lt;ul>
  {items.map(item => &lt;li key={item._id}>{item.name}&lt;/li>)}
&lt;/ul>
  </div>
);

export default withTracker(() => {
  Meteor.subscribe('items');
  return {
items: Items.find().fetch()
  };
})(App);

Meteor is well-known for its real-time capabilities. You can use this to build features like live chat or real-time notifications.

Example of Real-Time Chat:

Client Side:

Template.chat.events({
  'submit .new-message': function (event) {
event.preventDefault();
const text = event.target.text.value;
Messages.insert({ text, createdAt: new Date() });
event.target.text.value = '';
  }
});

Server Side:

Meteor.publish('messages', function () {
  return Messages.find();
});

Client Side Subscription:

Meteor.subscribe('messages');

Testing is crucial for ensuring your application works correctly.

**1. Unit Testing:

Use the practicalmeteor:mocha package for unit testing:

meteor add practicalmeteor:mocha

Write Tests:

import { Meteor } from 'meteor/meteor';
import { assert } from 'chai';

describe('Meteor Methods', function () {
  it('should create a new item', function () {
const item = { name: 'Test Item', quantity: 10 };
Meteor.call('insertItem', item);
const insertedItem = Items.findOne({ name: 'Test Item' });
assert.equal(insertedItem.quantity, 10);
  });
});

**2. Integration Testing:

Use cypress or webdriver for end-to-end testing.

npm install --save-dev cypress

Write Integration Tests:

describe('My App', () => {
  it('should load the homepage', () => {
cy.visit('/');
cy.contains('Welcome to Meteor');
  });
});

Meteor has a rich ecosystem of packages for various functionalities. Some useful packages include:

• aldeed:simple-schema: For schema validation.
• mongo: For MongoDB integration.
• reactive-var: For reactive variables.

Adding a Package:

meteor add package-name

Using a Package:

import SimpleSchema from 'simpl-schema';

const ItemSchema = new SimpleSchema({
  name: String,
  quantity: Number
});