> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/meteor/meteor/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Steps>
  <Step title="Create a New Project">
    Use the `meteor create` command to scaffold a new application:

    ```bash theme={null}
    meteor create my-app
    ```

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

    <Tip>
      You can also create apps with different templates:

      ```bash theme={null}
      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
      ```
    </Tip>
  </Step>

  <Step title="Navigate to Your Project">
    Change into your new project directory:

    ```bash theme={null}
    cd my-app
    ```
  </Step>

  <Step title="Start the Development Server">
    Run your application:

    ```bash theme={null}
    meteor
    ```

    Meteor will:

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

    <Info>
      The first run may take a minute as Meteor downloads dependencies. Subsequent starts are much faster.
    </Info>
  </Step>

  <Step title="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
  </Step>
</Steps>

## 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
```

<Tabs>
  <Tab title="Client">
    The `client/` directory contains code that runs in the browser:

    ```javascript theme={null}
    // 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 />);
    });
    ```
  </Tab>

  <Tab title="Server">
    The `server/` directory contains code that runs on Node.js:

    ```javascript theme={null}
    // 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);
      }
    });
    ```
  </Tab>

  <Tab title="Imports">
    The `imports/` directory contains isomorphic code (runs on both client and server):

    ```javascript theme={null}
    // imports/api/TasksCollection.js
    import { Mongo } from 'meteor/mongo';

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

    <Note>
      Files in `imports/` are not automatically loaded. You must explicitly import them where needed.
    </Note>
  </Tab>
</Tabs>

## Your First Changes

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

<Steps>
  <Step title="Open the App Component">
    Edit `imports/ui/App.jsx` in your favorite code editor.
  </Step>

  <Step title="Modify the Header">
    Change the header text:

    ```jsx theme={null}
    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!
  </Step>

  <Step title="Add a New Task Component">
    Create a new file `imports/ui/TaskForm.jsx`:

    ```jsx theme={null}
    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>
      );
    };
    ```
  </Step>

  <Step title="Use the Form Component">
    Import and use it in `App.jsx`:

    ```jsx theme={null}
    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!
  </Step>
</Steps>

## Understanding Meteor's Magic

### Real-Time Data Synchronization

Meteor automatically synchronizes data between the client and server:

<CodeGroup>
  ```javascript Server (Automatic) theme={null}
  // Data inserted on the server...
  await TasksCollection.insertAsync({ text: 'New task' });
  ```

  ```javascript Client (Automatic) theme={null}
  // ...automatically appears on all connected clients!
  const tasks = useTracker(() => TasksCollection.find().fetch());
  // Tasks update automatically when data changes
  ```
</CodeGroup>

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

### Isomorphic JavaScript

Write code once, run it everywhere:

```javascript theme={null}
// 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:

<CodeGroup>
  ```bash Development theme={null}
  # Run development server
  meteor

  # Run on a different port
  meteor --port 4000

  # Reset database
  meteor reset

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

  ```bash Packages theme={null}
  # 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
  ```

  ```bash Production theme={null}
  # Build for production
  meteor build ../output --architecture os.linux.x86_64

  # Run in production mode
  meteor run --production

  # Update Meteor version
  meteor update
  ```

  ```bash Testing theme={null}
  # Run package tests
  meteor test-packages

  # Run app tests
  meteor test --driver-package meteortesting:mocha
  ```
</CodeGroup>

## Adding Popular Packages

### User Accounts

```bash theme={null}
meteor add accounts-password
meteor npm install --save bcrypt
```

```javascript theme={null}
import { Accounts } from 'meteor/accounts-base';

// Create a user
await Accounts.createUser({
  username: 'meteorite',
  password: 'password',
  email: 'user@example.com'
});

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

### Routing (React Router)

```bash theme={null}
meteor npm install --save react-router-dom
```

```jsx theme={null}
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

```bash theme={null}
# 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

<Tip>
  **Use `meteor npm` instead of `npm`**: This ensures you're using the npm version bundled with Meteor, avoiding version conflicts.
</Tip>

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

<Tip>
  **Enable Source Maps**: Add `METEOR_PROFILE=1 meteor` to get detailed performance profiling.
</Tip>

<Warning>
  **Remove `insecure` and `autopublish` before deploying**: These packages are helpful for prototyping but allow unrestricted database access.

  ```bash theme={null}
  meteor remove insecure autopublish
  ```
</Warning>

## Next Steps

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

<CardGroup cols={2}>
  <Card title="Complete Tutorial" icon="graduation-cap" href="/tutorial">
    Build a full-featured To-Do app with authentication, filtering, and more.
  </Card>

  <Card title="API Reference" icon="book" href="https://docs.meteor.com">
    Dive deep into Collections, Methods, Publications, and Accounts.
  </Card>

  <Card title="Deployment" icon="rocket" href="https://docs.meteor.com/tutorials/deployment/deployment.html">
    Learn how to deploy your app to Galaxy, Heroku, or your own server.
  </Card>

  <Card title="Testing" icon="vial" href="https://docs.meteor.com/tutorials/testing/testing.html">
    Write tests for your Meteor application with TinyTest or Jest.
  </Card>
</CardGroup>

## Get Help

<CardGroup cols={3}>
  <Card title="Forums" icon="comments" href="https://forums.meteor.com">
    Ask questions and get help from the community.
  </Card>

  <Card title="Discord" icon="discord" href="https://discord.gg/hZkTCaVjmT">
    Chat with other Meteor developers in real-time.
  </Card>

  <Card title="GitHub" icon="github" href="https://github.com/meteor/meteor">
    Report bugs and request features.
  </Card>
</CardGroup>