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

40min
Overview
This guide walks you through creating a complete CRUD (create, read, update, delete) application using Marko and Back4app. 
In this tutorial, you will set up a project—named Basic-CRUD-App-Marko—on Back4app, design a robust database schema, and integrate your Marko frontend with Back4app’s API. 
The tutorial also explains how to secure your backend and deploy your application for production use.
What You Will Learn
How to construct CRUD applications that efficiently manage data using a reliable backend.
Tips for designing a scalable schema and linking it to a Marko-based frontend.
Utilizing Back4app’s user-friendly admin interface for managing data effortlessly.
Deployment strategies, including containerization with Docker, for launching your web application.
﻿
Prerequisites
Before starting, ensure you have:
A Back4app account and a new project.
Follow the instructions in Getting Started with Back4app if needed.
A Marko development environment set up.
Use the Marko CLI or your preferred setup method. Ensure Node.js (v14 or later) is installed.
Basic knowledge of JavaScript, Marko, and REST APIs.
Visit the Marko documentation for more details.
﻿
Step 1 – Setting Up Your Project
Starting a New Back4app Project
Sign in to your Back4app account.
Select “New App” on your dashboard.
Input the project name: Basic-CRUD-App-Marko and follow the on-screen prompts.
Create New Project
﻿
Your new project will now appear on your Back4app dashboard, laying the groundwork for your backend.
﻿
Step 2 – Crafting Your Database Schema
Building Your Data Model
For this CRUD app, you’ll create a couple of collections. Below are examples of collections with suggested fields to help you design a practical database schema.
1. Collection: Products
This collection will hold details about each product.
Field
Type
Details
_id
ObjectId
Auto-generated primary identifier.
name
String
The product name.
details
String
A brief description of the product.
created_at
Date
Timestamp marking product creation.
updated_at
Date
Timestamp of the last update.
2. Collection: Users
This collection holds user and authentication data.
Field
Type
Details
_id
ObjectId
Auto-generated unique identifier.
username
String
A unique name for the user.
email
String
A unique email address.
password
String
A hashed version of the user's password.
created_at
Date
Record creation timestamp.
updated_at
Date
Last modified timestamp.
You can manually define these collections in the Back4app dashboard by creating a new class for each collection and then adding the appropriate columns.
Create New Class
﻿
You can quickly add fields by choosing a type, naming your column, setting default values, and marking it as required if necessary.
Create Column
﻿
﻿
Utilizing the Back4app AI Agent for Schema Creation
The Back4app AI Agent simplifies schema design by generating collection and field definitions based on your prompt. This feature saves time and ensures consistency in your database setup.
How to Use the AI Agent:
Access the AI Agent:
Navigate to your Back4app dashboard and find the AI Agent in your project settings.
Describe Your Schema:
Provide a detailed prompt describing the collections and fields you require.
Review and Implement:
After generation, review the suggested schema and apply the changes.
Example Prompt
Text
Create the following collections for my Back4app project:

1) Collection: Products
- Fields:
  - _id: ObjectId (auto-generated)
  - name: String
  - details: 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: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections for my Back4app project:

1) Collection: Products
- Fields:
  - _id: ObjectId (auto-generated)
  - name: String
  - details: 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: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
This approach streamlines your schema creation process.
﻿
Step 3 – Activating the Admin Interface & CRUD Functionality
Introducing the Admin Interface
The Back4app Admin App is a no-code interface that makes data management effortless. Its drag and drop features let you easily add, modify, view, or remove records.
Enabling the Admin Interface
Go to the “More” section in your Back4app dashboard.
Select “Admin App” and then click on “Enable Admin App.”
Set Up Admin Credentials:
Create your first admin account which will also assign system roles like B4aAdminUser.
Enable Admin App
﻿
Once activated, log in to the Admin App to manage your backend.
Admin App Dashboard
﻿
Managing CRUD Operations via the Admin Interface
Within the Admin App you can:
Add New Entries: Use the “Add Record” option in a collection (e.g., Products).
View/Modify Records: Click on any entry to review or update its details.
Remove Entries: Utilize the delete function to remove obsolete records.
This streamlined interface enhances user experience by simplifying data management tasks.
﻿
Step 4 – Connecting Marko with Back4app
Now that your backend is configured, it’s time to integrate your Marko frontend with Back4app using the API.
Option A: Employing the API
You will use REST API calls to execute CRUD operations in your Marko application.
Example: Fetching Data via REST
JS
// In a Marko component script file (e.g., fetchProducts.marko)
import { onMount } from 'marko/src/runtime/client';

onMount(async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Products', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Products:', data.results);
  } catch (error) {
    console.error('Failed to fetch products:', error);
  }
});
// In a Marko component script file (e.g., fetchProducts.marko)
import { onMount } from 'marko/src/runtime/client';

onMount(async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Products', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Products:', data.results);
  } catch (error) {
    console.error('Failed to fetch products:', error);
  }
});
﻿
This code snippet shows how to pull product data from Back4app using a REST API call.
﻿
Step 5 – Safeguarding Your Backend
Configuring Access Controls
Enhance security by applying Access Control Lists (ACLs) to your records. For example, to create a private product entry:
JS
async function createSecureProduct(productData, owner) {
  const product = {
    name: productData.name,
    details: productData.details
  };

  // Setup ACL: Only the owner has read/write privileges
  product.ACL = {
    "*": { read: false, write: false },
    [owner.id]: { read: true, write: true }
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Products', {
      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(product)
    });
    const result = await response.json();
    console.log('Secure product created:', result);
  } catch (error) {
    console.error('Error creating product:', error);
  }
}
async function createSecureProduct(productData, owner) {
  const product = {
    name: productData.name,
    details: productData.details
  };

  // Setup ACL: Only the owner has read/write privileges
  product.ACL = {
    "*": { read: false, write: false },
    [owner.id]: { read: true, write: true }
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Products', {
      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(product)
    });
    const result = await response.json();
    console.log('Secure product created:', result);
  } catch (error) {
    console.error('Error creating product:', error);
  }
}
﻿
Setting Default Permissions
Use the Back4app dashboard to configure Class-Level Permissions (CLPs) for each collection, ensuring that only authorized users can access sensitive data.
﻿
Step 6 – User Authentication Setup
Creating User Accounts
Back4app employs a user class for authentication. In your Marko app, implement user sign-up and login like this:
JS
// In a Marko component script (e.g., auth.marko)
import { onMount } from 'marko/src/runtime/client';

async function registerUser(username, email, password) {
  const userData = {
    username,
    email,
    password
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      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(userData)
    });
    const result = await response.json();
    console.log('User registered:', result);
  } catch (error) {
    console.error('Registration error:', error);
  }
}
// In a Marko component script (e.g., auth.marko)
import { onMount } from 'marko/src/runtime/client';

async function registerUser(username, email, password) {
  const userData = {
    username,
    email,
    password
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      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(userData)
    });
    const result = await response.json();
    console.log('User registered:', result);
  } catch (error) {
    console.error('Registration error:', error);
  }
}
﻿
This snippet demonstrates a simple user registration flow using REST calls.
﻿
Step 7 – Deploying Your Marko Frontend
Back4app’s Web Deployment feature allows you to host your Marko project directly from a GitHub repository.
7.1 – Building Your Production Version
Open your project directory in a terminal.
Run the build command:
Bash
npm run build
npm run build
﻿
This produces a build directory with your optimized static files.
Confirm the Build:
Check that the build folder includes an index.html and all asset directories.
﻿
7.2 – Organizing and Uploading Your Code
Your repository should hold the full source of your Marko project. A typical directory layout might look like:
Text
Basic-CRUD-App-Marko-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── fetchProducts.marko
│   │   └── auth.marko
│   ├── app.marko
│   └── api.js
├── package.json
└── README.md
Basic-CRUD-App-Marko-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── fetchProducts.marko
│   │   └── auth.marko
│   ├── app.marko
│   └── api.js
├── package.json
└── README.md
﻿
Example: src/api.js
JS
// src/api.js
export const API_HEADERS = {
  'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
  'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
  'Content-Type': 'application/json'
};

export async function fetchProducts() {
  const response = await fetch('https://parseapi.back4app.com/classes/Products', {
    headers: API_HEADERS
  });
  const data = await response.json();
  return data.results;
}
// src/api.js
export const API_HEADERS = {
  'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
  'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
  'Content-Type': 'application/json'
};

export async function fetchProducts() {
  const response = await fetch('https://parseapi.back4app.com/classes/Products', {
    headers: API_HEADERS
  });
  const data = await response.json();
  return data.results;
}
﻿
Committing to GitHub
Initialize Git (if needed):
Bash
git init
git init
﻿
Stage your files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial commit for Marko CRUD frontend"
git commit -m "Initial commit for Marko CRUD frontend"
﻿
Create and push to your GitHub repository:
For example, use a repository named Basic-CRUD-App-Marko-Frontend.
﻿
7.3 – Linking GitHub with Web Deployment
Access Web Deployment:
Sign in to Back4app, go to your project (Basic-CRUD-App-Marko), and open the Web Deployment section.
Connect Your GitHub Account:
Follow the prompts to link your GitHub account.
Select the Repository and Branch:
Choose the repository (e.g., Basic-CRUD-App-Marko-Frontend) and the branch (e.g., main) to deploy.
﻿
7.4 – Configuring the Deployment
Set additional parameters:
Build Command:
If no pre-built build folder exists, set a build command (e.g., npm run build).
Output Directory:
Specify build as the output folder.
Environment Variables:
Input any necessary variables (such as API keys).
﻿
7.5 – Containerizing with Docker
If you prefer Docker, include a Dockerfile in your project repository:
Dockerfile
# Use a Node image for building the app
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

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

# Copy all files and build the app
COPY . .
RUN npm run build

# Use Nginx to serve the build
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

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

# Set working directory
WORKDIR /app

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

# Copy all files and build the app
COPY . .
RUN npm run build

# Use Nginx to serve the build
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
In your deployment settings, choose the Docker deployment option.
﻿
7.6 – Deploying Your Application
Press the Deploy button:
Back4app will pull your repository, run the build, and deploy your app.
Monitor the Process:
Watch the deployment logs for any build or runtime issues.
Access Your Site:
Once deployed, Back4app provides a URL for your hosted Marko application.
﻿
7.7 – Confirming Your Deployment
Open the Provided URL:
Check that your application loads correctly.
Run Through the App:
Verify that all pages load and CRUD functionalities operate as expected.
Troubleshoot if Required:
Use browser developer tools and Back4app logs to address any issues.
﻿
Step 8 – Final Thoughts and Future Enhancements
Great work! You’ve now built a full-featured CRUD application with Marko and Back4app. 
You set up a project called Basic-CRUD-App-Marko, crafted detailed collections for Products and Users, managed data via an intuitive Admin Interface, integrated your Marko frontend using REST APIs, and secured your backend with robust controls.
Next Steps:
Enhance Your UI:
Consider adding advanced features like product details pages, search functionalities, and live notifications.
Expand Backend Capabilities:
Look into integrating serverless functions or third-party APIs for added functionality.
Deepen Your Knowledge:
Refer to the Back4app documentation and additional tutorials for more insights on performance tuning and custom integrations.
Happy coding with Marko and Back4app!
Field	Type	Details
_id	ObjectId	Auto-generated primary identifier.
name	String	The product name.
details	String	A brief description of the product.
created_at	Date	Timestamp marking product creation.
updated_at	Date	Timestamp of the last update.
Field	Type	Details
_id	ObjectId	Auto-generated unique identifier.
username	String	A unique name for the user.
email	String	A unique email address.
password	String	A hashed version of the user's password.
created_at	Date	Record creation timestamp.
updated_at	Date	Last modified timestamp.
Updated 25 Feb 2025
Did this page help you?
Building a Basic CRUD Application with Mithril.js: A Detailed Tutorial
Building a Basic CRUD Application with Polymer: A Comprehensive Walkthrough