Quickstarters
Building a Basic CRUD Application with Cycle.js: A Comprehensive Guide

41min
Overview
This guide will walk you through constructing a full-featured CRUD (create, read, update, and delete) application using Cycle.js. 
In this tutorial, you'll configure a Back4app project titled Basic-CRUD-App-CycleJS which will serve as a robust backend for your application. 
You'll learn to design a scalable data model, manage your data via the intuitive Back4app Admin App, and integrate your Cycle.js frontend with Back4app using REST/GraphQL calls.
By the end, you'll have a production-ready web app capable of executing CRUD operations along with user authentication and secure data handling.
Key Insights
Build a functional CRUD system with a reliable backend.
Gain practical experience in architecting a scalable data model.
Utilize a drag-and-drop admin tool for seamless data management.
Integrate a Cycle.js frontend with Back4app through REST/GraphQL.
Learn deployment strategies including Docker containerization.
﻿
Prerequisites
Before you begin, ensure you have:
A Back4app account with an active project.
If you need assistance, check out Getting Started with Back4app.
A Cycle.js development setup.
Use tools like create-cycle-app and ensure Node.js (version 14 or later) is installed.
Familiarity with JavaScript, Cycle.js, and REST APIs.
For a refresher, consult the Cycle.js documentation.
﻿
Step 1 – Project Initialization
Creating a New Back4app Project
Sign in to your Back4app account.
Press the “New App” button on your dashboard.
Assign the project name: Basic-CRUD-App-CycleJS and follow the setup prompts.
Create New Project
﻿
After creation, your project will be visible on the dashboard, ready for backend configuration and management.
﻿
Step 2 – Defining Your Database Schema
Structuring Your Data Model
For this CRUD application, you'll create several collections to manage your data. Below are example collections with essential fields and data types.
1. Items Collection
This collection will store the details of each item.
Field
Data Type
Description
_id
ObjectId
Auto-generated unique identifier.
title
String
The item’s title.
description
String
A brief summary of the item.
created_at
Date
The timestamp for when the item was added.
updated_at
Date
The timestamp for the latest update.
2. Users Collection
This collection handles user details and authentication.
Field
Data Type
Description
_id
ObjectId
Auto-generated unique identifier.
username
String
The user’s unique identifier.
email
String
The user’s email address.
password_hash
String
Encrypted password for secure authentication.
created_at
Date
Account creation timestamp.
updated_at
Date
Timestamp for the most recent update.
You can define these collections manually via the Back4app dashboard by creating new classes and configuring the corresponding fields.
Create New Class
﻿
To add fields, choose the data type, provide a field name, optionally set a default value, and mark the field as required if needed.
Create Column
﻿
﻿
Automating Schema Creation with the Back4app AI Agent
The Back4app AI Agent simplifies schema creation by automatically generating your data model based on a provided prompt. This ensures a consistent and efficient database design.
Steps to Utilize the AI Agent:
Access the AI Agent:
Log into your Back4app dashboard and select the AI Agent from the menu or project settings.
Detail Your Data Requirements:
Input a comprehensive prompt that lists the necessary collections and their fields.
Review and Implement:
Examine the auto-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 feature not only saves time but also ensures a well-structured and optimized schema.
﻿
Step 3 – Activating the Admin App & Managing CRUD Operations
Exploring the Admin App
The Back4app Admin App provides a no-code, drag-and-drop interface for effortless backend data management. It streamlines CRUD operations for your collections.
Enabling the Admin App
Open the “More” menu in your Back4app dashboard.
Select “Admin App” and then click on “Enable Admin App.”
Set up your admin credentials by creating your first admin user. This action will also initialize system roles (e.g., B4aAdminUser).
Enable Admin App
﻿
After activation, sign in to the Admin App to begin managing your collections.
Admin App Dashboard
﻿
Performing CRUD Operations via the Admin App
Within the Admin App, you can:
Add Records: Click the “Add Record” button in any collection (e.g., Items) to insert new entries.
View/Modify Records: Select an existing record to inspect details or modify fields.
Remove Records: Utilize the delete option to discard unwanted entries.
This user-friendly interface greatly enhances the management and administration of your data.
﻿
Step 4 – Integrating Cycle.js with Back4app
Now that your backend is operational via Back4app, it's time to integrate your Cycle.js frontend.
Option: Utilizing REST/GraphQL APIs
We'll focus on REST API calls to interact with your backend.
Below is an example Cycle.js component that retrieves and displays items from your Back4app database using Cycle's HTTP driver.
Example: Fetching and Displaying Items with Cycle.js
JS
import xs from 'xstream';
import {run} from '@cycle/run';
import {div, h1, ul, li, input, button, makeDOMDriver} from '@cycle/dom';
import {makeHTTPDriver} from '@cycle/http';

function main(sources) {
  // Intent: capture add-item interactions
  const addClick$ = sources.DOM.select('.add').events('click');

  // Model: make an HTTP request to fetch items
  const request$ = xs.of({
    url: 'https://parseapi.back4app.com/classes/Items',
    category: 'items',
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    }
  });

  // Intent: handle HTTP responses
  const items$ = sources.HTTP.select('items')
    .flatten()
    .map(res => res.body.results);

  // View: render the items list
  const vdom$ = items$.startWith([])
    .map(items =>
      div([
        h1('Items'),
        button('.add', 'Add Item'),
        ul(
          items.map(item =>
            li(`${item.title} — ${item.description}`)
          )
        )
      ])
    );

  return {
    DOM: vdom$,
    HTTP: request$
  };
}

const drivers = {
  DOM: makeDOMDriver('#app'),
  HTTP: makeHTTPDriver()
};

run(main, drivers);
import xs from 'xstream';
import {run} from '@cycle/run';
import {div, h1, ul, li, input, button, makeDOMDriver} from '@cycle/dom';
import {makeHTTPDriver} from '@cycle/http';

function main(sources) {
  // Intent: capture add-item interactions
  const addClick$ = sources.DOM.select('.add').events('click');

  // Model: make an HTTP request to fetch items
  const request$ = xs.of({
    url: 'https://parseapi.back4app.com/classes/Items',
    category: 'items',
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    }
  });

  // Intent: handle HTTP responses
  const items$ = sources.HTTP.select('items')
    .flatten()
    .map(res => res.body.results);

  // View: render the items list
  const vdom$ = items$.startWith([])
    .map(items =>
      div([
        h1('Items'),
        button('.add', 'Add Item'),
        ul(
          items.map(item =>
            li(`${item.title} — ${item.description}`)
          )
        )
      ])
    );

  return {
    DOM: vdom$,
    HTTP: request$
  };
}

const drivers = {
  DOM: makeDOMDriver('#app'),
  HTTP: makeHTTPDriver()
};

run(main, drivers);
﻿
This sample code demonstrates how to use Cycle.js to perform an HTTP GET request to fetch items and render them dynamically.
﻿
Step 5 – Securing Your Backend
Applying Access Control Lists (ACLs)
Secure your objects by defining ACLs. For example, when creating a private item:
JS
async function createPrivateItem(data, ownerUser) {
  const newItem = {
    title: data.title,
    description: data.description
  };

  // Define ACL: restrict access to the owner only
  newItem.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(newItem)
    });
    const result = await response.json();
    console.log('Created item:', result);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}
async function createPrivateItem(data, ownerUser) {
  const newItem = {
    title: data.title,
    description: data.description
  };

  // Define ACL: restrict access to the owner only
  newItem.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(newItem)
    });
    const result = await response.json();
    console.log('Created item:', result);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}
﻿
Configuring Class-Level Permissions (CLPs)
Within the Back4app dashboard, adjust CLPs for each collection to ensure only authenticated users can access sensitive information.
﻿
Step 6 – Implementing User Authentication
Setting Up Account Registration and Login
Back4app utilizes a User class for authentication. Use REST API calls to manage user sign-ups and logins within your Cycle.js application.
Below is an example of handling user registration:
JS
async function signUpUser(userData) {
  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({
        username: userData.username,
        password: userData.password,
        email: userData.email
      })
    });
    const result = await response.json();
    alert('Registration successful!');
    return result;
  } catch (error) {
    alert('Registration error: ' + error.message);
  }
}
async function signUpUser(userData) {
  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({
        username: userData.username,
        password: userData.password,
        email: userData.email
      })
    });
    const result = await response.json();
    alert('Registration successful!');
    return result;
  } catch (error) {
    alert('Registration error: ' + error.message);
  }
}
﻿
You can replicate similar patterns for user login and session management.
﻿
Step 7 – Deploying Your Cycle.js Frontend with Web Deployment
Back4app’s Web Deployment feature lets you host your Cycle.js application effortlessly via integration with your GitHub repository.
7.1 Preparing Your Production Build
Open your project directory in a terminal.
Run the build command:
Bash
npm run build
npm run build
﻿
This creates a build directory with optimized static files.
Confirm the Build:
Ensure the build folder contains an index.html and related asset directories.
﻿
7.2 Organizing and Uploading Your Source Code
Your Git repository should include the entire Cycle.js application source. An example file structure:
Text
Basic-CRUD-App-CycleJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── main.js
│   ├── httpDrivers.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
Basic-CRUD-App-CycleJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── main.js
│   ├── httpDrivers.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
﻿
Example File: src/main.js
JS
import xs from 'xstream';
import {run} from '@cycle/run';
import {div, h1, makeDOMDriver} from '@cycle/dom';
import {makeHTTPDriver} from '@cycle/http';
import ItemsList from './components/ItemsList';

function main(sources) {
  const itemsVTree$ = ItemsList(sources);

  const vdom$ = itemsVTree$.map(tree =>
    div([
      h1('Cycle.js CRUD Application'),
      tree
    ])
  );

  return {
    DOM: vdom$
  };
}

const drivers = {
  DOM: makeDOMDriver('#app'),
  HTTP: makeHTTPDriver()
};

run(main, drivers);
import xs from 'xstream';
import {run} from '@cycle/run';
import {div, h1, makeDOMDriver} from '@cycle/dom';
import {makeHTTPDriver} from '@cycle/http';
import ItemsList from './components/ItemsList';

function main(sources) {
  const itemsVTree$ = ItemsList(sources);

  const vdom$ = itemsVTree$.map(tree =>
    div([
      h1('Cycle.js CRUD Application'),
      tree
    ])
  );

  return {
    DOM: vdom$
  };
}

const drivers = {
  DOM: makeDOMDriver('#app'),
  HTTP: makeHTTPDriver()
};

run(main, drivers);
﻿
Committing to GitHub
Initialize a Git repository (if not already done):
Bash
git init
git init
﻿
Stage your files:
Bash
git add .
git add .
﻿
Commit your work:
Bash
git commit -m "Initial commit for Cycle.js frontend"
git commit -m "Initial commit for Cycle.js frontend"
﻿
Create a GitHub repository (e.g., Basic-CRUD-App-CycleJS-Frontend).
Push your repository:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-CycleJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-CycleJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 Linking Your Repository with Web Deployment
Access Web Deployment:
Sign in to Back4app, navigate to your project (Basic-CRUD-App-CycleJS), and select the Web Deployment feature.
Connect to GitHub:
Follow the prompts to link your GitHub account so Back4app can access your repository.
Select the Repository and Branch:
Choose your repository (e.g., Basic-CRUD-App-CycleJS-Frontend) and the branch (typically main).
﻿
7.4 Deployment Settings
Build Command:
If your repository lacks a pre-built build folder, specify a build command (e.g., npm run build).
Output Directory:
Set this to build so Back4app knows where to find the static files.
Environment Variables:
Include any necessary API keys or configuration details.
﻿
7.5 Dockerizing Your Cycle.js Application
If you opt for Docker deployment, add a Dockerfile to your repository:
Dockerfile
# Use an official Node image for building the app
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

# Copy dependency definitions
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the remaining files
COPY . .

# Build the Cycle.js application
RUN npm run build

# Use Nginx to serve the built files
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 for building the app
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

# Copy dependency definitions
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the remaining files
COPY . .

# Build the Cycle.js application
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Select the Docker deployment option in your Web Deployment configuration if you choose to containerize your app.
﻿
7.6 Launching Your Application
Deploy Your App:
Click the Deploy button after configuring your settings.
Monitor the Deployment:
Back4app will pull your code from GitHub, build the app (if configured), and deploy it.
Access Your Application:
Once deployment is complete, Back4app will provide a URL for your live Cycle.js application.
﻿
7.7 Testing Your Deployment
Visit the Deployed URL:
Open the provided URL in your browser.
Confirm Functionality:
Ensure all routes and assets load properly.
Debug if Necessary:
Use browser developer tools and review Back4app deployment logs to troubleshoot any issues.
﻿
Step 8 – Wrapping Up and Future Enhancements
Congratulations! You have successfully built a CRUD application using Cycle.js and Back4app. 
You've set up a project titled Basic-CRUD-App-CycleJS, defined your database schema for Items and Users, and managed your data via the intuitive Admin App. 
Additionally, you've integrated your Cycle.js frontend with your backend using REST/GraphQL and secured your data with proper access controls.
Next Steps:
Expand Your Frontend:
Add more advanced views, filtering, or real-time updates.
Integrate Additional Backend Features:
Consider adding Cloud Functions, third-party APIs, or role-based access control.
Further Learning:
Explore the Back4app documentation for additional insights on performance tuning and custom integrations.
With this guide, you now possess the skills to build a scalable CRUD backend for your Cycle.js application using Back4app. Happy coding!
Field	Data Type	Description
_id	ObjectId	Auto-generated unique identifier.
title	String	The item’s title.
description	String	A brief summary of the item.
created_at	Date	The timestamp for when the item was added.
updated_at	Date	The timestamp for the latest update.
Field	Data Type	Description
_id	ObjectId	Auto-generated unique identifier.
username	String	The user’s unique identifier.
email	String	The user’s email address.
password_hash	String	Encrypted password for secure authentication.
created_at	Date	Account creation timestamp.
updated_at	Date	Timestamp for the most recent update.
Updated 25 Feb 2025
Did this page help you?
How to Build a Basic CRUD App with Marionette.js: A Step-by-Step Guide
How to Build a Basic CRUD App with Ractive.js: A Step-by-Step Guide