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

43min
Overview
In this guide, you'll learn to create a CRUD (create, read, update, and delete) application using Riot.js. 
We’ll walk through setting up a Back4app project—named Basic-CRUD-App-RiotJS—to serve as your backend, and then integrate it with a Riot.js frontend. 
This tutorial covers everything from designing your database schema and managing data with the Back4app Admin App to integrating your frontend using either the SDK (if applicable) or REST/GraphQL API calls.
By the end, you'll have a fully operational, production-ready web application featuring user authentication and secure data handling.
Main Benefits
Master CRUD operations using a scalable backend system.
Gain insights on integrating a Riot.js frontend with Back4app.
Utilize the intuitive Back4app Admin App for effortless data management.
Learn deployment strategies, including Docker containerization.
﻿
Prerequisites
Before you start, make sure you have:
A Back4app account with a new project.
Refer to Getting Started with Back4app for guidance.
A development setup for Riot.js.
You can use the Riot CLI or include Riot via a script tag. Ensure Node.js (v14 or later) is installed.
Basic knowledge of JavaScript, Riot.js, and REST APIs.
If needed, consult the Riot.js documentation for additional insights.
﻿
Step 1 – Project Initialization
Creating a Back4app Project
Sign in to your Back4app account.
Click “New App” on your dashboard.
Name your project: Basic-CRUD-App-RiotJS and follow the setup instructions.
Create New Project
﻿
Your project will now appear on your Back4app dashboard, serving as the backbone for your application's data.
﻿
Step 2 – Designing Your Database Schema
Crafting Your Data Model
For our CRUD application, you will define multiple collections. Below are sample collections and fields to help you structure your database for efficient CRUD operations.
1. Items Collection
This collection holds details about each item.
Field
Type
Description
_id
ObjectId
Auto-generated unique identifier.
title
String
Item title.
description
String
Brief item description.
created_at
Date
Timestamp when the item was added.
updated_at
Date
Timestamp when the item was modified.
2. Users Collection
This collection contains user details and authentication info.
Field
Type
Description
_id
ObjectId
Auto-generated unique identifier.
username
String
Unique username.
email
String
Unique email address.
password_hash
String
Encrypted password.
created_at
Date
Account creation timestamp.
updated_at
Date
Last account update timestamp.
You can configure these collections manually on the Back4app dashboard by creating new classes and defining columns.
Create New Class
﻿
You can add fields by selecting a data type, assigning a name, setting defaults, and marking if the field is mandatory.
Create Column
﻿
Leveraging the Back4app AI Agent for Schema Creation
The Back4app AI Agent, accessible from your dashboard, can automatically generate your schema by processing a detailed prompt describing your required collections and fields.
Using the AI Agent:
Open the AI Agent:
Find it in your project settings or menu.
Input Your Data Model:
Paste a prompt outlining your collections and their fields.
Review and Confirm:
Validate the generated schema and apply it to your project.
Sample Prompt
Text
Create these 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 these 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 tool expedites the process and ensures a consistent schema setup.
﻿
Step 3 – Activating the Admin App & CRUD Actions
Overview of the Admin App
The Back4app Admin App offers a no-code, drag-and-drop interface for effortless backend management, letting you execute CRUD operations quickly.
Activating the Admin App
Open the “More” menu in your Back4app dashboard.
Select “Admin App” and click “Enable Admin App.”
Set up your admin account by creating the initial admin user, which also establishes default roles.
Enable Admin App
﻿
Once enabled, log in to the Admin App to manage your backend data.
Admin App Dashboard
﻿
Performing CRUD Operations via the Admin App
Within this interface, you can:
Add Records: Use the “Add Record” button within a collection (e.g., Items) to create new entries.
Edit Records: Click on any record to view and modify its details.
Remove Records: Delete any record that is no longer necessary.
This tool streamlines your workflow by offering a straightforward interface for managing data.
﻿
Step 4 – Connecting Riot.js with Back4app
Now that your backend is set up, it’s time to connect your Riot.js frontend to Back4app.
Option A: Employing the Parse SDK 
Install the Parse SDK:
Bash
npm install parse
npm install parse
﻿
Initialize Parse in Your Riot.js Project:
Create a file (e.g., src/parseConfig.js):
JS
// src/parseConfig.js
import Parse from 'parse';
// Insert your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/parseConfig.js
import Parse from 'parse';
// Insert your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Use Parse in a Riot Tag:
Create a Riot tag (e.g., items.riot) to fetch and display items:
HTML
<script type="riot">
import Parse from './parseConfig';

export default {
  items: [],
  onMounted() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    query.find().then(results => {
      this.items = results;
      this.update();
    }).catch(error => console.error("Error fetching items:", error));
  }
}
</script>

<style>
  ul { list-style: none; padding: 0; }
  li { margin: 0.5rem 0; }
</style>

<div>
  <h2>Items</h2>
  <ul>
    <li each={item in items}>
      { item.get("title") } — { item.get("description") }
    </li>
  </ul>
</div>
<script type="riot">
import Parse from './parseConfig';

export default {
  items: [],
  onMounted() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    query.find().then(results => {
      this.items = results;
      this.update();
    }).catch(error => console.error("Error fetching items:", error));
  }
}
</script>

<style>
  ul { list-style: none; padding: 0; }
  li { margin: 0.5rem 0; }
</style>

<div>
  <h2>Items</h2>
  <ul>
    <li each={item in items}>
      { item.get("title") } — { item.get("description") }
    </li>
  </ul>
</div>
﻿
Option B: Using REST or GraphQL APIs
If the Parse SDK is unsuitable, execute CRUD operations via API calls. For instance, to retrieve items using REST:
JS
// REST API example to get items
async function fetchItems() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
}
fetchItems();
// REST API example to get items
async function fetchItems() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
}
fetchItems();
﻿
Integrate these API calls within your Riot.js tags as required.
﻿
Step 5 – Protecting Your Backend
Configuring Access Control Lists (ACLs)
Secure your data by setting ACLs on your objects. For instance, to create a private item:
JS
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Define ACL: only the owner has read/write access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Define ACL: only the owner has read/write access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
﻿
Adjusting Class-Level Permissions (CLPs)
Within your Back4app dashboard, configure CLPs for each collection to ensure that only authenticated or authorized users access sensitive data.
﻿
Step 6 – User Authentication
Configuring User Accounts
Riot.js applications can handle user registration and login using Back4app’s built-in Parse User class. Below is an example Riot tag for user signup:
HTML
<script type="riot">
import Parse from './parseConfig';

export default {
  username: '',
  password: '',
  email: '',
  async signUp(e) {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);
    try {
      await user.signUp();
      alert('User registered successfully!');
    } catch (error) {
      alert('Sign-up error: ' + error.message);
    }
  }
}
</script>

<form onsubmit="{ signUp }">
  <input type="text" placeholder="Username" bind="{ username }">
  <input type="password" placeholder="Password" bind="{ password }">
  <input type="email" placeholder="Email" bind="{ email }">
  <button type="submit">Sign Up</button>
</form>
<script type="riot">
import Parse from './parseConfig';

export default {
  username: '',
  password: '',
  email: '',
  async signUp(e) {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);
    try {
      await user.signUp();
      alert('User registered successfully!');
    } catch (error) {
      alert('Sign-up error: ' + error.message);
    }
  }
}
</script>

<form onsubmit="{ signUp }">
  <input type="text" placeholder="Username" bind="{ username }">
  <input type="password" placeholder="Password" bind="{ password }">
  <input type="email" placeholder="Email" bind="{ email }">
  <button type="submit">Sign Up</button>
</form>
﻿
A similar strategy can be applied for login and session management. Additional features like social login, email verification, or password recovery can be set up in your Back4app dashboard.
﻿
Step 7 – Deploying Your Riot.js Frontend
Back4app’s Web Deployment feature lets you host your Riot.js app by linking your GitHub repository. Follow these steps to deploy your production build:
7.1 Build Your Production Files
Open your project directory in a terminal.
Run your build command:
Bash
npm run build
npm run build
﻿
This creates a build folder with optimized static files (HTML, JS, CSS, images).
Confirm the build:
Verify that the build folder includes an index.html and required asset directories.
﻿
7.2 Organize and Push Your Code to GitHub
Your repository should contain the complete Riot.js frontend source. A typical structure could be:
Text
Basic-CRUD-App-RiotJS-Frontend/
|-- node_modules/
|-- public/
|    └── index.html
|-- src/
|    ├── app.riot
|    ├── parseConfig.js
|    └── tags/
|         ├── items.riot
|         └── auth.riot
|-- package.json
|-- README.md
Basic-CRUD-App-RiotJS-Frontend/
|-- node_modules/
|-- public/
|    └── index.html
|-- src/
|    ├── app.riot
|    ├── parseConfig.js
|    └── tags/
|         ├── items.riot
|         └── auth.riot
|-- package.json
|-- README.md
﻿
Example: src/parseConfig.js
JS
// src/parseConfig.js
import Parse from 'parse';

// Insert your actual Back4app keys here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/parseConfig.js
import Parse from 'parse';

// Insert your actual Back4app keys here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Example: src/app.riot
HTML
<app>
  <h1>Riot.js CRUD App</h1>
  <items></items>
  <auth></auth>

  <script type="riot">
    import Items from './tags/items.riot';
    import Auth from './tags/auth.riot';

    export default { }
  </script>
</app>
<app>
  <h1>Riot.js CRUD App</h1>
  <items></items>
  <auth></auth>

  <script type="riot">
    import Items from './tags/items.riot';
    import Auth from './tags/auth.riot';

    export default { }
  </script>
</app>
﻿
Commit and Push Your Code
Initialize a Git repo (if not done):
Bash
git init
git init
﻿
Add your files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial commit for Riot.js frontend"
git commit -m "Initial commit for Riot.js frontend"
﻿
Create a GitHub repository (e.g., Basic-CRUD-App-RiotJS-Frontend) and push your code:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-RiotJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-RiotJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 Integrate Your GitHub Repo with Back4app Web Deployment
Open Web Deployment:
Sign in to your Back4app dashboard, select your project (Basic-CRUD-App-RiotJS), and click on Web Deployment.
Connect to GitHub:
Follow the prompts to link your GitHub account and repository.
Choose Your Repo and Branch:
Select your repository (e.g., Basic-CRUD-App-RiotJS-Frontend) and the appropriate branch (like main).
﻿
7.4 Deployment Configuration
Build Command:
If your repository lacks a pre-built build folder, specify the build command (e.g., npm run build). Back4app will execute it.
Output Directory:
Set this to build to indicate where your static files reside.
Environment Variables:
Include any necessary variables (such as API keys) in your configuration.
﻿
7.5 Dockerizing Your Riot.js App (Optional)
If you prefer containerized deployment, add a Dockerfile to your project:
Dockerfile
# Use an official Node image to build the app
FROM node:16-alpine as build

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

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

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

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

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Select the Docker option in your Web Deployment settings if you choose this route.
﻿
7.6 Launch Your Application
Deploy:
Click the Deploy button after configuring your settings.
Monitor the Process:
Back4app will fetch your code, execute the build command, and deploy your app in a container.
Get Your URL:
Once deployed, Back4app provides a URL where your Riot.js application is hosted.
﻿
7.7 Validate Your Deployment
Visit the URL:
Open the provided URL in your browser.
Test the App:
Confirm that all routes and assets (CSS, JavaScript, images) are functioning correctly.
Troubleshoot:
Use browser developer tools and Back4app logs if any issues arise.
﻿
Step 8 – Wrapping Up and Future Directions
Congratulations! You've built a fully functional CRUD app using Riot.js and Back4app. 
You set up a project called Basic-CRUD-App-RiotJS, designed a robust database schema for Items and Users, and managed your data with the Admin App. 
You integrated your Riot.js frontend and implemented security measures like ACLs.
Next Steps:
Enhance the Frontend:
Add features like detailed views, search capabilities, and real-time updates.
Expand Functionality:
Explore advanced backend operations such as Cloud Functions or integrate third-party APIs.
Deepen Your Learning:
Visit the Back4app documentation and other resources to optimize and expand your application.
With these steps, you now have the expertise to build scalable CRUD applications using Riot.js and Back4app. Happy coding!
Field	Type	Description
_id	ObjectId	Auto-generated unique identifier.
title	String	Item title.
description	String	Brief item description.
created_at	Date	Timestamp when the item was added.
updated_at	Date	Timestamp when the item was modified.
Field	Type	Description
_id	ObjectId	Auto-generated unique identifier.
username	String	Unique username.
email	String	Unique email address.
password_hash	String	Encrypted password.
created_at	Date	Account creation timestamp.
updated_at	Date	Last account update timestamp.
Updated 25 Feb 2025
Did this page help you?
How to Build a Basic CRUD App with Knockout.js: A Step-by-Step Guide
Building a CRUD App with Inferno.js: A Comprehensive Walkthrough