Meteor 2.0 + React + TypeScript tutorial

Bootstrap a new Meteor 2.0 project with React and TypeScript

Step 1: Install Meteor

Windows

# Run the Meteor Windows installer script :
Invoke-WebRequest -Uri https://install.meteor.com/windows -OutFile $env:USERPROFILE\Downloads\install-meteor.exe; Start-Process -FilePath $env:USERPROFILE\Downloads\install-meteor.exe -Wait

# Check the installation :
meteor --version

# Install Meteor 2.16 specifically :
meteor update --release 2.16

# Check the installation :
meteor --version

Linux

# Run the Meteor Linux installer script :
curl "https://install.meteor.com/?release=2.16" | sh

# Check the installation :
meteor --version

# Install Meteor 2.16 specifically :
meteor update --release 2.16

# Check the installation :
meteor --version

Step 2: Create a new Meteor project

# Create a directory for your project
mkdir meteor-react-typescript-tutorial
cd meteor-react-typescript-tutorial

# Create a new Meteor project :
meteor create . --typescript

Run the project

To start the project, you need to run the Meteor server. You can do this by running the following command :

# Start the Meteor server :
meteor npm run start

By default, Meteor will launch a server on http://localhost:3000 and a MongoDB instance on http://localhost:3001. You can change the default port by setting the PORT environment variable.

You can also use your own MongoDB instance by setting the MONGO_URL environment variable. It is a good practice to use a MongoDB instance even in development. This will speed up the startup process (Meteor is sloooow) and will allow you to store all the data you need.

You can accomplish this using Docker Compose :

name: meteor-tuto-dev-env

services:
  vs-mongo:
    image: mongo:4.4.15
    ports:
      - 0.0.0.0:3001:27017
    restart: always
    command:
      - --storageEngine=wiredTiger
      - --bind_ip_all
      - --port
      - "27017"
    volumes:
      - meteor-tuto-mongodb-data:/data/db
      - meteor-tuto-mongodb-config:/data/configdb
    environment:
      MONGODB_EXTRA_FLAGS: --wiredTigerCacheSizeGB=3
      MONGODB_ENABLE_DIRECTORY_PER_DB: "no"
      MONGODB_ENABLE_JOURNAL: "yes"
      MONGODB_DISABLE_JAVASCRIPT: "no"
      MONGODB_DISABLE_SYSTEM_LOG: "no"
      ALLOW_EMPTY_PASSWORD: "yes"
      MONGODB_REPLICA_SET_NAME: rs0

volumes:
  meteor-tuto-mongodb-data:
    name: meteor-tuto-mongodb-data
  meteor-tuto-mongodb-config:
    name: meteor-tuto-mongodb-config

networks:
  meteor-tuto:
    name: meteor-tuto-network

Start building your app

Now that you have a Meteor project with React and TypeScript, you can start building your app. You can add new components, pages, and services to your project.

By default, Meteor will recommend that you will create a new component in the imports/ui/components directory. You can create a new page in the imports/ui/pages directory. You can create a new service in the imports/api directory.

What I recommend is keeping the UI components, pages and layouts inside the client/ directory, the services inside the server/ directory, and the shared code inside the imports/ directory.