Quick Start Guide

Get started with Meteor in minutes. Create your first application and see real-time data synchronization in action.

Create Your First Meteor App

Get up and running with Meteor in just a few commands. This guide will have you building a functional application in under 10 minutes.

1. Create a New Project

   Use the meteor create command to scaffold a new application:

   meteor create my-app
   

   This creates a new directory with a complete Meteor application using React and Rspack (the default in Meteor 3.4+).

   You can also create apps with different templates:

   meteor create my-app --react      # React app (default)
   meteor create my-app --vue        # Vue 3 app
   meteor create my-app --blaze      # Blaze app
   meteor create my-app --typescript # TypeScript support
   
2. Navigate to Your Project

   Change into your new project directory:

   cd my-app
   
3. Start the Development Server

   Run your application:

   meteor
   

   Meteor will:

   • Start the development server
   • Launch the embedded MongoDB database
   • Build your application
   • Open your app at http://localhost:3000

   The first run may take a minute as Meteor downloads dependencies. Subsequent starts are much faster.

4. See Your App Running

   Open your browser to http://localhost:3000 and you’ll see your new Meteor application!

   The default app includes:

   • A welcome message
   • Sample data from MongoDB
   • Hot Module Replacement (HMR) enabled
   • React Fast Refresh configured

Project Structure

Your new Meteor app has the following structure:

my-app/
├── client/              # Client-side code
│   └── main.jsx        # Client entry point
├── server/              # Server-side code
│   └── main.js         # Server entry point
├── imports/             # Shared code
│   ├── api/            # Collections, methods, publications
│   └── ui/             # React components
│       ├── App.jsx     # Root component
│       └── Task.jsx    # Task component
├── public/              # Static assets
├── tests/               # Test files
├── package.json         # npm dependencies
└── .meteor/             # Meteor configuration
    └── packages         # Meteor packages

Client

The client/ directory contains code that runs in the browser:

// client/main.jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Meteor } from 'meteor/meteor';
import { App } from '/imports/ui/App';

Meteor.startup(() => {
  const container = document.getElementById('react-target');
  const root = createRoot(container);
  root.render(<App />);
});

Server

The server/ directory contains code that runs on Node.js:

// server/main.js
import { Meteor } from 'meteor/meteor';
import { TasksCollection } from '/imports/api/TasksCollection';

const insertTask = (taskText) =>
  TasksCollection.insertAsync({ text: taskText });

Meteor.startup(async () => {
  if ((await TasksCollection.find().countAsync()) === 0) {
    [
      'First Task',
      'Second Task',
      'Third Task',
    ].forEach(insertTask);
  }
});

Imports

The imports/ directory contains isomorphic code (runs on both client and server):

// imports/api/TasksCollection.js
import { Mongo } from 'meteor/mongo';

export const TasksCollection = new Mongo.Collection('tasks');

Files in imports/ are not automatically loaded. You must explicitly import them where needed.

Your First Changes

Let’s make some changes to see Hot Module Replacement in action:

1. Open the App Component

   Edit imports/ui/App.jsx in your favorite code editor.

2. Modify the Header

   Change the header text:

   export const App = () => (
     <div>
       <h1>My Awesome To-Do App!</h1>
       {/* rest of the component */}
     </div>
   );
   

   Save the file and watch your browser update instantly without losing state!

3. Add a New Task Component

   Create a new file imports/ui/TaskForm.jsx:

   import React, { useState } from 'react';
   import { TasksCollection } from '/imports/api/TasksCollection';
   
   export const TaskForm = () => {
     const [text, setText] = useState('');
   
     const handleSubmit = async (e) => {
       e.preventDefault();
       
       await TasksCollection.insertAsync({
         text: text.trim(),
         createdAt: new Date(),
       });
       
       setText('');
     };
   
     return (
       <form onSubmit={handleSubmit} className="task-form">
         <input
           type="text"
           placeholder="Type to add new tasks"
           value={text}
           onChange={(e) => setText(e.target.value)}
         />
         <button type="submit">Add Task</button>
       </form>
     );
   };
   
4. Use the Form Component

   Import and use it in App.jsx:

   import React from 'react';
   import { useTracker, useSubscribe } from 'meteor/react-meteor-data';
   import { TasksCollection } from '/imports/api/TasksCollection';
   import { Task } from './Task';
   import { TaskForm } from './TaskForm';
   
   export const App = () => {
     const isLoading = useSubscribe('tasks');
     const tasks = useTracker(() => 
       TasksCollection.find({}, { sort: { createdAt: -1 } }).fetch()
     );
   
     if (isLoading()) {
       return <div>Loading...</div>;
     }
   
     return (
       <div>
         <h1>My Awesome To-Do App!</h1>
         <TaskForm />
         <ul>
           {tasks.map(task => (
             <Task key={task._id} task={task} />
           ))}
         </ul>
       </div>
     );
   };
   

   You now have a working form that adds tasks in real-time!

Understanding Meteor’s Magic

Real-Time Data Synchronization

Meteor automatically synchronizes data between the client and server:

Server (Automatic)

// Data inserted on the server...
await TasksCollection.insertAsync({ text: 'New task' });

// ...automatically appears on all connected clients!
const tasks = useTracker(() => TasksCollection.find().fetch());
// Tasks update automatically when data changes

No REST APIs to write. No websocket code. No polling. Meteor handles all data synchronization automatically through DDP (Distributed Data Protocol).

Isomorphic JavaScript

Write code once, run it everywhere:

// This collection definition works on both client and server
import { Mongo } from 'meteor/mongo';

export const TasksCollection = new Mongo.Collection('tasks');

// Client: Uses Minimongo (in-memory database)
// Server: Uses MongoDB
// Both: Same API!

Integrated Build System

Meteor automatically:

• ✅ Transpiles ES6+ and JSX
• ✅ Bundles your code
• ✅ Hot reloads changes
• ✅ Handles imports
• ✅ Optimizes for production

Common Commands

Here are the most useful Meteor commands:

Development

# Run development server
meteor

# Run on a different port
meteor --port 4000

# Reset database
meteor reset

# Reset database only (keep code)
meteor reset --db

# Add a Meteor package
meteor add accounts-password

# Add an npm package
meteor npm install --save react-icons

# Remove a package
meteor remove insecure

# List packages
meteor list

# Build for production
meteor build ../output --architecture os.linux.x86_64

# Run in production mode
meteor run --production

# Update Meteor version
meteor update

# Run package tests
meteor test-packages

# Run app tests
meteor test --driver-package meteortesting:mocha

Adding Popular Packages

User Accounts

meteor add accounts-password
meteor npm install --save bcrypt

import { Accounts } from 'meteor/accounts-base';

// Create a user
await Accounts.createUser({
  username: 'meteorite',
  password: 'password',
  email: '[e-mail]'
});

// Login
Meteor.loginWithPassword(username, password);

Routing (React Router)

meteor npm install --save react-router-dom

import { BrowserRouter, Routes, Route } from 'react-router-dom';

const App = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/tasks" element={<Tasks />} />
    </Routes>
  </BrowserRouter>
);

UI Libraries

# Material-UI
meteor npm install --save @mui/material @emotion/react @emotion/styled

# Tailwind CSS
meteor npm install --save-dev tailwindcss postcss autoprefixer
meteor add juliancwirko:postcss

# Bootstrap
meteor npm install --save bootstrap

Development Tips

Use meteor npm instead of npm: This ensures you’re using the npm version bundled with Meteor, avoiding version conflicts.

Install the Meteor DevTools Extension: Available for Chrome and Firefox, it helps debug publications, methods, and data flow.

Enable Source Maps: Add METEOR_PROFILE=1 meteor to get detailed performance profiling.

Remove insecure and autopublish before deploying: These packages are helpful for prototyping but allow unrestricted database access.

meteor remove insecure autopublish

Next Steps

You now have a working Meteor application! Here’s what to explore next:

Complete Tutorial

Build a full-featured To-Do app with authentication, filtering, and more.

API Reference

Dive deep into Collections, Methods, Publications, and Accounts.

Deployment

Learn how to deploy your app to Galaxy, Heroku, or your own server.

Testing

Write tests for your Meteor application with TinyTest or Jest.

Get Help

Forums

Ask questions and get help from the community.

Discord

Chat with other Meteor developers in real-time.

GitHub

Report bugs and request features.