Quickstarters
How to Build a Basic CRUD App with Ractive.js: A Step-by-Step Guide

39min
Overview
In this guide, you will learn how to construct a fully functional CRUD (create, read, update, delete) application using Ractive.js. 
This tutorial covers the entire workflow from setting up your Back4app project to designing your database schema, and finally integrating a Ractive.js frontend with your backend. The project, dubbed Basic-CRUD-App-Ractive, will serve as a robust data management solution for your web application.
You'll start by initializing a Back4app project, configuring collections and fields either manually or with the help of the Back4app AI Agent. 
Next, you'll use the intuitive Back4app Admin App for straightforward data handling, followed by integrating your Ractive.js interface with Back4app via REST API calls. This guide also explains how to secure your backend using advanced access control methods.
By the end, you'll have a production-grade CRUD app that not only performs essential operations but also supports user authentication and secure data management.
Essential Points
Master building CRUD applications that adeptly manage data with a reliable backend.
Understand how to design an extensible data schema and connect it with a Ractive.js frontend.
Utilize a drag and drop management interface (Back4app Admin App) for effortless CRUD actions.
Learn deployment strategies including Docker containerization for rapid web app launches.
﻿
Prerequisites
Before starting, ensure you have:
An active Back4app account with a new project created.
Refer to Getting Started with Back4app for guidance.
A Ractive.js development setup.
Set up your project using a boilerplate or your preferred configuration, ensuring you have Node.js (v14 or later) installed.
Basic knowledge of JavaScript, Ractive.js, and REST APIs.
Review the Ractive.js documentation as needed.
﻿
Step 1 – Project Initialization
Starting a New Back4app Project
Log in to your Back4app account.
Select the “New App” option on your dashboard.
Name your project Basic-CRUD-App-Ractive and follow the on-screen instructions to create it.
Create New Project
﻿
After setup, your project will be visible on the dashboard, ready for further backend configuration.
﻿
Step 2 – Designing Your Database Schema
Crafting Your Data Model
For this CRUD application, you'll define several collections to manage your data. Below are examples of the collections with suggested fields and data types, ensuring the backend is optimized for CRUD functionalities.
1. Collection: Items
This collection holds details for each item.
Field
Type
Purpose
_id
ObjectId
Auto-generated primary identifier.
title
String
Item title.
description
String
Brief summary of the item.
created_at
Date
Record creation timestamp.
updated_at
Date
Last update timestamp.
2. Collection: Users
This collection manages user data and authentication.
Field
Type
Purpose
_id
ObjectId
Auto-generated primary identifier.
username
String
Unique identifier for the user.
email
String
User's unique email address.
password_hash
String
Hashed password for secure authentication.
created_at
Date
Timestamp for account creation.
updated_at
Date
Timestamp for last account update.
You can manually establish these collections via the Back4app dashboard by creating new classes and adding the required columns.
Create New Class
﻿
Define fields by selecting the appropriate data type, naming the column, and setting default or required values.
Create Column
﻿
﻿
Utilizing the Back4app AI Agent for Schema Automation
The Back4app AI Agent can automatically generate your schema based on your prompt. This efficient tool simplifies project management by rapidly establishing your collections and fields.
How to Operate the AI Agent:
Access the AI Agent from your project’s dashboard.
Input a detailed prompt describing your desired collections and fields.
Review and apply the auto-generated schema to your project.
Sample Prompt
Text
Create these collections for 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 these collections for 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 approach ensures your schema is consistent and tailored to your app’s needs.
﻿
Step 3 – Activating the Admin App & Managing CRUD Operations
About the Admin Interface
The Back4app Admin App offers a no-code solution to handle your backend data. Its drag and drop interface allows for effortless CRUD operations like adding, modifying, or deleting records.
How to Enable the Admin App
Go to the “More” menu on your Back4app dashboard.
Select “Admin App” and click “Enable Admin App.”
Set up your first admin user, which also configures roles (such as B4aAdminUser) and system collections.
Enable Admin App
﻿
Once activated, log into the Admin App to manage your collections.
Admin App Dashboard
﻿
Managing Data via the Admin App
Adding Entries: Use the “Add Record” option in a collection (like Items) to input new data.
Viewing/Editing Records: Select any record to inspect details or update fields.
Removing Entries: Use the delete function to eliminate obsolete records.
This user-friendly interface streamlines all CRUD functions.
﻿
Step 4 – Connecting Ractive.js with Back4app
Now that your backend is ready, it’s time to connect your Ractive.js frontend to Back4app.
Using REST API Calls with Ractive.js
Since Ractive.js does not have a dedicated Parse SDK, you will use REST API calls to perform CRUD operations.
Example: Fetching Items
Create a Ractive component that retrieves and displays data from your Back4app Items collection.
items.html
HTML
<div id="items-container">
  <h2>Items List</h2>
  <ul>
    {{#each items}}
      <li>
        <strong>{{title}}</strong> - {{description}}
        <button on-click="editItem:{{id}}">Edit</button>
        <button on-click="deleteItem:{{id}}">Delete</button>
      </li>
    {{/each}}
  </ul>
  <div>
    <h3>Add New Item</h3>
    <input type="text" placeholder="Title" value="{{newTitle}}">
    <input type="text" placeholder="Description" value="{{newDescription}}">
    <button on-click="addItem">Add</button>
  </div>
</div>
<div id="items-container">
  <h2>Items List</h2>
  <ul>
    {{#each items}}
      <li>
        <strong>{{title}}</strong> - {{description}}
        <button on-click="editItem:{{id}}">Edit</button>
        <button on-click="deleteItem:{{id}}">Delete</button>
      </li>
    {{/each}}
  </ul>
  <div>
    <h3>Add New Item</h3>
    <input type="text" placeholder="Title" value="{{newTitle}}">
    <input type="text" placeholder="Description" value="{{newDescription}}">
    <button on-click="addItem">Add</button>
  </div>
</div>
﻿
items.js
JS
import Ractive from "ractive";

const API_URL = "https://parseapi.back4app.com/classes/Items";
const HEADERS = {
  "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
  "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
  "Content-Type": "application/json"
};

const ractive = new Ractive({
  target: "#items-container",
  template: "#items-template",
  data: {
    items: [],
    newTitle: "",
    newDescription: ""
  }
});

// Function to load items
async function loadItems() {
  try {
    const response = await fetch(API_URL, { headers: HEADERS });
    const result = await response.json();
    ractive.set("items", result.results.map(item => ({
      id: item.objectId,
      title: item.title,
      description: item.description
    })));
  } catch (error) {
    console.error("Error fetching items:", error);
  }
}

ractive.on("addItem", async function () {
  const title = ractive.get("newTitle");
  const description = ractive.get("newDescription");
  try {
    await fetch(API_URL, {
      method: "POST",
      headers: HEADERS,
      body: JSON.stringify({ title, description })
    });
    ractive.set({ newTitle: "", newDescription: "" });
    loadItems();
  } catch (error) {
    console.error("Error adding item:", error);
  }
});

// Additional functions for editing and deleting would follow a similar REST approach.

loadItems();
import Ractive from "ractive";

const API_URL = "https://parseapi.back4app.com/classes/Items";
const HEADERS = {
  "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
  "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
  "Content-Type": "application/json"
};

const ractive = new Ractive({
  target: "#items-container",
  template: "#items-template",
  data: {
    items: [],
    newTitle: "",
    newDescription: ""
  }
});

// Function to load items
async function loadItems() {
  try {
    const response = await fetch(API_URL, { headers: HEADERS });
    const result = await response.json();
    ractive.set("items", result.results.map(item => ({
      id: item.objectId,
      title: item.title,
      description: item.description
    })));
  } catch (error) {
    console.error("Error fetching items:", error);
  }
}

ractive.on("addItem", async function () {
  const title = ractive.get("newTitle");
  const description = ractive.get("newDescription");
  try {
    await fetch(API_URL, {
      method: "POST",
      headers: HEADERS,
      body: JSON.stringify({ title, description })
    });
    ractive.set({ newTitle: "", newDescription: "" });
    loadItems();
  } catch (error) {
    console.error("Error adding item:", error);
  }
});

// Additional functions for editing and deleting would follow a similar REST approach.

loadItems();
﻿
You can incorporate these API interactions into your Ractive.js components to handle all CRUD operations.
﻿
Step 5 – Strengthening Backend Security
Implementing Access Controls
Enhance security by setting Access Control Lists (ACLs) on your objects. For instance, to make an item private:
JS
async function createPrivateItem(itemData, ownerUserId) {
  const data = {
    title: itemData.title,
    description: itemData.description,
    ACL: {
      [ownerUserId]: { read: true, write: true },
      "*": { read: false, write: false }
    }
  };
  try {
    const response = await fetch(API_URL, {
      method: "POST",
      headers: HEADERS,
      body: JSON.stringify(data)
    });
    const result = await response.json();
    console.log("Private item created:", result);
  } catch (error) {
    console.error("Error creating private item:", error);
  }
}
async function createPrivateItem(itemData, ownerUserId) {
  const data = {
    title: itemData.title,
    description: itemData.description,
    ACL: {
      [ownerUserId]: { read: true, write: true },
      "*": { read: false, write: false }
    }
  };
  try {
    const response = await fetch(API_URL, {
      method: "POST",
      headers: HEADERS,
      body: JSON.stringify(data)
    });
    const result = await response.json();
    console.log("Private item created:", result);
  } catch (error) {
    console.error("Error creating private item:", error);
  }
}
﻿
Configuring Class-Level Permissions
Within the Back4app dashboard, adjust Class-Level Permissions (CLPs) for each collection to define default access policies. This step ensures that only authorized users can access sensitive data.
﻿
Step 6 – Managing User Authentication
Configuring User Accounts
Back4app uses Parse’s User class to handle authentication. Implement user registration and login via REST API calls in your Ractive.js application.
Example: User Sign-Up
JS
async function signUpUser(username, email, password) {
  const response = await fetch("https://parseapi.back4app.com/users", {
    method: "POST",
    headers: HEADERS,
    body: JSON.stringify({ username, email, password })
  });
  const result = await response.json();
  if (result.objectId) {
    alert("User registered successfully!");
  } else {
    alert("Error during sign-up: " + result.error);
  }
}
async function signUpUser(username, email, password) {
  const response = await fetch("https://parseapi.back4app.com/users", {
    method: "POST",
    headers: HEADERS,
    body: JSON.stringify({ username, email, password })
  });
  const result = await response.json();
  if (result.objectId) {
    alert("User registered successfully!");
  } else {
    alert("Error during sign-up: " + result.error);
  }
}
﻿
Implement similar routines for login and session handling. Additional features like password recovery and email verification can be set up via the Back4app dashboard.
﻿
Step 7 – Deploying Your Ractive.js Frontend
Back4app’s Web Deployment feature allows you to host your Ractive.js application by linking it to your GitHub repository.
7.1 Building Your Production Version
Open your project folder in a terminal.
Execute the build process (this might be a custom command based on your setup, e.g., using Rollup or Webpack).
Ensure that your production folder (commonly named dist or build) contains your static files.
7.2 Organizing and Committing Your Code
Your project repository should have a clear structure, for example:
Text
Basic-CRUD-App-Ractive/
|-- node_modules/
|-- public/
|    └── index.html
|-- src/
|    ├── main.js
|    ├── ractiveConfig.js
|    └── components/
|         ├── items.html
|         └── auth.html
|-- package.json
|-- README.md
Basic-CRUD-App-Ractive/
|-- node_modules/
|-- public/
|    └── index.html
|-- src/
|    ├── main.js
|    ├── ractiveConfig.js
|    └── components/
|         ├── items.html
|         └── auth.html
|-- package.json
|-- README.md
﻿
Sample File: ractiveConfig.js
JS
// ractiveConfig.js
// This file can include global configuration for your Ractive app
export const API_URL = "https://parseapi.back4app.com";
export const HEADERS = {
  "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
  "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
  "Content-Type": "application/json"
};
// ractiveConfig.js
// This file can include global configuration for your Ractive app
export const API_URL = "https://parseapi.back4app.com";
export const HEADERS = {
  "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
  "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
  "Content-Type": "application/json"
};
﻿
Committing Your Code
Initialize a Git repository:
Bash
git init
git init
﻿
Add your files:
Bash
git add .
git add .
﻿
Commit the changes:
Bash
git commit -m "Initial commit for Ractive.js frontend"
git commit -m "Initial commit for Ractive.js frontend"
﻿
Create a GitHub repository (e.g., Basic-CRUD-App-Ractive) and push your code:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Ractive.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Ractive.git
git push -u origin main
﻿
7.3 Linking Your Repository to Back4app Web Deployment
Log into your Back4app dashboard, select your project (Basic-CRUD-App-Ractive), and choose the Web Deployment option.
Connect your GitHub account as prompted.
Select the repository and branch (typically main) that contains your Ractive.js code.
7.4 Setting Up Deployment Parameters
Configure the following:
Build Command: Specify your build command (for example, npm run build).
Output Directory: Set it to your production folder (e.g., build or dist).
Environment Variables: Include any necessary API keys or configuration variables.
7.5 Containerizing with Docker (Optional)
If you wish to deploy via Docker, include a Dockerfile in your project:
Dockerfile
# Base build stage using Node.js
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 entire app and build it
COPY . .
RUN npm run build

# Production stage using Nginx
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Base build stage using Node.js
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 entire app and build it
COPY . .
RUN npm run build

# Production stage using Nginx
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
7.6 Launching Your Application
Click the Deploy button in Back4app.
Monitor the deployment process as Back4app pulls and builds your repository.
Once complete, Back4app will provide a URL for your hosted Ractive.js app.
7.7 Verifying the Deployment
Open the provided URL in your browser.
Test all routes, ensuring every asset (CSS, JS, images) loads correctly.
If issues occur, consult the deployment logs and check your build settings.
﻿
Step 8 – Wrap-Up and Future Directions
Great work! You’ve successfully built a complete CRUD application using Ractive.js and Back4app. 
You set up a project named Basic-CRUD-App-Ractive, defined precise collections for Items and Users, and used the intuitive Admin App for backend management. 
Additionally, you integrated your Ractive.js frontend with the backend and fortified your data security.
Next Steps:
Enhance Your UI:
Add features like detailed views, search functions, or real-time updates.
Expand Your Backend:
Integrate advanced backend logic such as cloud functions or third-party API services.
Deepen Your Learning:
Explore the Back4app documentation for more advanced configurations and optimizations.
With this tutorial, you now have the expertise to create a scalable CRUD backend for your Ractive.js application using Back4app. Happy coding!
Field	Type	Purpose
_id	ObjectId	Auto-generated primary identifier.
title	String	Item title.
description	String	Brief summary of the item.
created_at	Date	Record creation timestamp.
updated_at	Date	Last update timestamp.
Field	Type	Purpose
_id	ObjectId	Auto-generated primary identifier.
username	String	Unique identifier for the user.
email	String	User's unique email address.
password_hash	String	Hashed password for secure authentication.
created_at	Date	Timestamp for account creation.
updated_at	Date	Timestamp for last account update.
Updated 25 Feb 2025
Did this page help you?
Building a Basic CRUD Application with Cycle.js: A Comprehensive Guide
How to Build a Basic CRUD App with Knockout.js: A Step-by-Step Guide