Quickstarters
How to Build a Basic CRUD App with Meteor? A Step-by-Step Guide

41min
Overview
In this guide, you will learn to develop a  CRUD (create, read, update, and delete) application using Meteor. 
We will integrate your Meteor app with Back4app as the backend service, ensuring that your data management is robust and scalable. 
Throughout the tutorial, you'll set up a project named Basic-CRUD-App-Meteor, define your database schema, and configure your collections—all while utilizing Back4app’s powerful features.
You'll also see how to employ Back4app’s Admin App for efficient data management and how to secure your backend with advanced access control measures. 
By the end, you'll have a production-ready Meteor application that supports CRUD operations along with user authentication.
Main Takeaways
Develop CRUD functionalities that efficiently handle data operations using Back4app.
Design and implement a scalable backend paired with a Meteor frontend.
Utilize Back4app’s drag and drop Admin App to simplify data operations.
Learn deployment strategies, including Docker containerization, for your Meteor application.
﻿
Prerequisites
Before starting, ensure you have:
A Back4app account with a new project.
For setup instructions, check out Getting Started with Back4app.
A Meteor development environment.
Install Meteor from Meteor’s official website and ensure Node.js (v14 or later) is available.
Basic knowledge of JavaScript, Meteor, and REST APIs.
Consult the Meteor documentation for more insights if needed.
﻿
Step 1 – Project Initialization
Setting Up Your Back4app Project
Sign in to your Back4app account.
Click the “New App” option on your dashboard.
Input the project name: Basic-CRUD-App-Meteor and follow the prompts to create your project.
Create New Project
﻿
After creation, your project will be listed on your Back4app dashboard, laying a solid groundwork for your backend setup.
﻿
Step 2 – Designing the Database Schema
Crafting Your Data Model
For a basic CRUD application, you'll need multiple collections. Below are examples detailing the collections and fields required to manage data operations effectively.
1. Collection: Items
This collection holds details for every item.
Field
Type
Details
_id
ObjectId
Auto-generated unique identifier.
title
String
Name or title of the item.
description
String
Brief summary of the item.
created_at
Date
Timestamp marking item creation.
updated_at
Date
Timestamp for the most recent update.
2. Collection: Users
This collection manages user information and authentication details.
Field
Type
Details
_id
ObjectId
Auto-generated unique identifier.
username
String
Unique identifier for the user.
email
String
Unique email address.
password_hash
String
Securely hashed password.
created_at
Date
Timestamp of account creation.
updated_at
Date
Timestamp of the latest account update.
Manually add these collections in the Back4app dashboard by creating a new class for each and defining the respective fields.
Create New Class
﻿
Create each field by selecting its type, specifying a name, adding default values if necessary, and indicating if it’s required.
Create Column
﻿
﻿
Leveraging the Back4app AI Agent for Schema Creation
The Back4app AI Agent streamlines schema generation directly from your dashboard. By providing a descriptive prompt outlining your desired collections and fields, the AI Agent can automatically create your database schema.
How to Use the AI Agent:
Access the AI Agent:
Navigate to the AI Agent section in your Back4app dashboard.
Describe Your Schema:
Input a detailed prompt specifying the collections and fields you require.
Review and Apply:
Evaluate the suggested schema and apply the changes to your project.
Sample Prompt
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
This method ensures your schema is both consistent and optimized for the application’s needs.
﻿
Step 3 – Activating the Admin App & Performing CRUD Operations
Overview of the Admin Interface
Back4app’s Admin App is an intuitive, no-code tool that empowers you to manage backend data effortlessly through drag and drop operations. It simplifies creating, reading, updating, and deleting records.
Enabling the Admin App
Go to the “More” menu on your Back4app dashboard.
Select “Admin App” and click on “Enable Admin App.”
Set Up Admin Credentials:
Create an initial admin user, which also configures default roles such as B4aAdminUser along with system collections.
Enable Admin App
﻿
After activation, log in to the Admin App to begin managing your data.
Admin App Dashboard
﻿
Utilizing the Admin App for CRUD Tasks
Within the Admin App, you can:
Add Records: Click “Add Record” in any collection (like Items) to create new entries.
View/Modify Records: Select a record to inspect or change its details.
Remove Records: Delete records that are no longer required.
This interface greatly enhances the user experience by making data operations straightforward.
﻿
Step 4 – Integrating Meteor with Back4app
Now that your backend is configured and managed via the Admin App, it’s time to connect your Meteor application to Back4app.
Using REST APIs in Meteor
You can integrate with Back4app by making REST API calls.
Example: Fetching Data via REST
Below is an example code snippet to fetch items from Back4app in a Meteor method:
JS
// /imports/api/items.js
import { Meteor } from 'meteor/meteor';
import { HTTP } from 'meteor/http';

Meteor.methods({
  'items.fetch'() {
    try {
      const response = HTTP.get('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response.data.results;
    } catch (error) {
      throw new Meteor.Error('fetch-failed', 'Unable to fetch items.');
    }
  }
});
// /imports/api/items.js
import { Meteor } from 'meteor/meteor';
import { HTTP } from 'meteor/http';

Meteor.methods({
  'items.fetch'() {
    try {
      const response = HTTP.get('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response.data.results;
    } catch (error) {
      throw new Meteor.Error('fetch-failed', 'Unable to fetch items.');
    }
  }
});
﻿
Integrate similar REST calls within your Meteor components or methods for creating, updating, and deleting records.
﻿
Step 5 – Securing Your Backend
Implementing Access Control Lists (ACLs)
Protect your data by assigning ACLs to your objects. For instance, to create an item visible only to its owner:
JS
async function createSecureItem(itemData, ownerUser) {
  const itemPayload = {
    title: itemData.title,
    description: itemData.description,
    ACL: {
      [ownerUser.id]: { read: true, write: true },
      '*': { read: false, write: false }
    }
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(itemPayload)
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error creating secure item:', error);
  }
}
async function createSecureItem(itemData, ownerUser) {
  const itemPayload = {
    title: itemData.title,
    description: itemData.description,
    ACL: {
      [ownerUser.id]: { read: true, write: true },
      '*': { read: false, write: false }
    }
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(itemPayload)
    });
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error creating secure item:', error);
  }
}
﻿
Configuring Class-Level Permissions (CLPs)
Within your Back4app dashboard, set up CLPs for each collection to control default access rules. This step ensures that only authorized users can access sensitive data.
﻿
Step 6 – Managing User Authentication
Setting Up Meteor User Accounts
Back4app leverages Parse’s User class for authentication, but in Meteor you can handle user registration and login using standard REST calls.
Example: User Registration via REST
JS
// /imports/api/auth.js
import { HTTP } from 'meteor/http';

export const signUpUser = async (username, password, email) => {
  try {
    const response = await HTTP.post('https://parseapi.back4app.com/users', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      data: {
        username,
        password,
        email
      }
    });
    return response.data;
  } catch (error) {
    throw new Meteor.Error('signup-failed', error.message);
  }
};
// /imports/api/auth.js
import { HTTP } from 'meteor/http';

export const signUpUser = async (username, password, email) => {
  try {
    const response = await HTTP.post('https://parseapi.back4app.com/users', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      data: {
        username,
        password,
        email
      }
    });
    return response.data;
  } catch (error) {
    throw new Meteor.Error('signup-failed', error.message);
  }
};
﻿
Implement similar methods for user login and session management. Additional features such as email verification and password resets can be managed via the Back4app dashboard.
﻿
Step 7 – Deploying Your Meteor Frontend
Back4app’s Web Deployment feature facilitates hosting your Meteor application by linking to a GitHub repository. Follow these steps to deploy your Meteor app.
7.1 Generate Your Production Build
Open a terminal in your project directory.
Build your Meteor app:
Bash
meteor build ../output --directory
meteor build ../output --directory
﻿
This command creates a build directory containing optimized static assets.
Confirm the Build:
Ensure that the build output includes an index.html and required asset directories.
﻿
7.2 Organize and Upload Your Code
Your GitHub repository should have the complete source code of your Meteor application. A typical structure might be:
Text
Basic-CRUD-App-Meteor/
├── .meteor/
├── client/
│   └── main.html
├── server/
│   └── main.js
├── imports/
│   ├── api/
│   │   ├── items.js
│   │   └── auth.js
│   └── startup/
│       └── index.js
├── package.json
└── README.md
Basic-CRUD-App-Meteor/
├── .meteor/
├── client/
│   └── main.html
├── server/
│   └── main.js
├── imports/
│   ├── api/
│   │   ├── items.js
│   │   └── auth.js
│   └── startup/
│       └── index.js
├── package.json
└── README.md
﻿
Sample File: /imports/api/items.js
JS
// /imports/api/items.js
import { Meteor } from 'meteor/meteor';
import { HTTP } from 'meteor/http';

Meteor.methods({
  'items.fetch'() {
    try {
      const response = HTTP.get('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response.data.results;
    } catch (error) {
      throw new Meteor.Error('fetch-failed', 'Unable to retrieve items.');
    }
  }
});
// /imports/api/items.js
import { Meteor } from 'meteor/meteor';
import { HTTP } from 'meteor/http';

Meteor.methods({
  'items.fetch'() {
    try {
      const response = HTTP.get('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response.data.results;
    } catch (error) {
      throw new Meteor.Error('fetch-failed', 'Unable to retrieve items.');
    }
  }
});
﻿
Commit Your Code to GitHub
Initialize Git in your project folder (if not done):
Bash
git init
git init
﻿
Add all source files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial Meteor CRUD app commit"
git commit -m "Initial Meteor CRUD app commit"
﻿
Create a GitHub repository (e.g., Basic-CRUD-App-Meteor).
Push your code:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Meteor.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Meteor.git
git push -u origin main
﻿
﻿
7.3 Connecting GitHub with Back4app Web Deployment
Access Web Deployment:
Sign in to Back4app, navigate to your Basic-CRUD-App-Meteor project, and click on the Web Deployment option.
Link Your GitHub Account:
Follow on-screen instructions to integrate your GitHub account.
Select the Repository and Branch:
Choose your repository (e.g., Basic-CRUD-App-Meteor) and the branch containing your code (e.g., main).
﻿
7.4 Deployment Configuration
Configure the following settings:
Build Command:
If your repository lacks a pre-built folder, specify the build command (e.g., meteor build ../output --directory).
Output Directory:
Indicate the directory (such as the output folder) that holds your static assets.
Environment Variables:
Add any required API keys or configurations.
﻿
7.5 Dockerizing Your Meteor App (Optional)
If Docker is your deployment preference, include a Dockerfile like below:
Dockerfile
# Use the official Node image as a base
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the app source code
COPY . .

# Build the Meteor app
RUN meteor build ../output --directory

# Serve with Nginx
FROM nginx:stable-alpine
COPY --from=build /app/output/bundle/programs/web.browser /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use the official Node image as a base
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the app source code
COPY . .

# Build the Meteor app
RUN meteor build ../output --directory

# Serve with Nginx
FROM nginx:stable-alpine
COPY --from=build /app/output/bundle/programs/web.browser /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Select the Docker deployment option in Back4app if you opt for containerization.
﻿
7.6 Finalizing Your Deployment
Deploy the Application:
Click the Deploy button after all configurations are complete.
Monitor the Build:
Back4app will fetch your code, run the build command, and deploy your app.
Access Your URL:
Once deployed, Back4app will provide a URL where your Meteor app is live.
﻿
7.7 Verifying the Deployment
Visit the URL:
Open the provided URL in your browser.
Test Functionality:
Check that all routes, styles, and scripts are functioning correctly.
Debug as Needed:
Use browser developer tools and Back4app logs to resolve any issues.
﻿
Step 8 – Final Thoughts and Future Enhancements
Congratulations! You have successfully built a complete CRUD application using Meteor and integrated it with Back4app. 
You set up a project named Basic-CRUD-App-Meteor, designed a robust database schema for Items and Users, and managed data via the Admin App. 
Additionally, you integrated your Meteor frontend with Back4app using REST APIs and applied security measures for data protection.
Next Steps:
Extend Your Frontend:
Add features like detailed views, search functionality, and real-time updates.
Implement Advanced Backend Logic:
Consider using Meteor methods for more complex operations or integrating additional third-party APIs.
Consult Further Resources:
Explore the Back4app documentation and Meteor guides for deeper insights into performance and customization.
Happy coding and enjoy building with Meteor and Back4app!
Field	Type	Details
_id	ObjectId	Auto-generated unique identifier.
title	String	Name or title of the item.
description	String	Brief summary of the item.
created_at	Date	Timestamp marking item creation.
updated_at	Date	Timestamp for the most recent update.
Field	Type	Details
_id	ObjectId	Auto-generated unique identifier.
username	String	Unique identifier for the user.
email	String	Unique email address.
password_hash	String	Securely hashed password.
created_at	Date	Timestamp of account creation.
updated_at	Date	Timestamp of the latest account update.
Updated 23 Feb 2025
Did this page help you?
How to a Basic CRUD App with Alpine.js?
How to Build a CRUD Application with Aurelia? A Comprehensive Tutorial