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

37min
Overview
In this guide, you'll learn how to create a basic CRUD (create, read, update, delete) application using RedwoodJS. 
This tutorial walks you through the process of setting up your project with Back4app as your backend service, designing a robust database schema, and integrating it with a RedwoodJS frontend. 
By following these steps, you’ll build a production-ready application that manages data effectively while employing modern development techniques.
Essential Insights
Master the creation of a CRUD application that efficiently handles data with a powerful backend service.
Discover how to architect a scalable database and merge it with a RedwoodJS interface to enhance user interaction.
Explore the use of a no-code drag and drop management tool—the Back4app Admin App—to streamline CRUD operations.
Learn deployment strategies, including containerization with Docker, to rapidly launch your web application.
﻿
Prerequisites
Before you start, verify that you have the following:
An active Back4app account with a new project ready.
If you need guidance, check out Getting Started with Back4app.
A RedwoodJS development environment set up.
Use the RedwoodJS CLI to create your application. Ensure Node.js (version 14 or later) is installed.
A basic understanding of JavaScript, RedwoodJS, and GraphQL.
For more details, visit the RedwoodJS Documentation.
﻿
Step 1 – Initiate Your Project
Starting a New Back4app Project
Log in to your Back4app dashboard.
Select “New App” to begin a new project.
Name your project: Basic-CRUD-App-RedwoodJS and follow the setup instructions.
Create New Project
﻿
Your project will now appear in the dashboard, laying the groundwork for your backend configuration and management.
﻿
Step 2 – Crafting the Database Schema
Structuring Your Data Model
For this CRUD app, you'll design several collections. Below are examples of two essential collections along with the necessary fields. These setups are crucial for enabling reliable CRUD functionalities.
1. Collection: Items
This collection holds details about each item.
Field
Data Type
Purpose
_id
ObjectId
Auto-generated unique identifier.
title
String
The name or title of the item.
description
String
A short summary describing the item.
created_at
Date
Record creation timestamp.
updated_at
Date
Timestamp of the latest update.
2. Collection: Users
This collection stores user credentials and details.
Field
Data Type
Purpose
_id
ObjectId
Auto-generated unique identifier.
username
String
Unique identifier for the user.
email
String
User's unique email address.
password_hash
String
Encrypted password for authentication.
created_at
Date
Account creation timestamp.
updated_at
Date
Timestamp of the latest update.
You can configure these collections directly in the Back4app dashboard by creating new classes and adding appropriate columns.
Create New Class
﻿
Define each field by choosing its type, naming it, and setting its default or required status.
Create Column
﻿
Employing the Back4app AI Agent for Schema Creation
The Back4app AI Agent, accessible from your dashboard, can automatically generate your database schema based on a descriptive prompt. This feature significantly accelerates the setup of a consistent schema for your application.
How to Use the AI Agent:
Launch the AI Agent:
Access the agent from your Back4app dashboard or project settings.
Detail Your Data Model:
Enter a comprehensive prompt outlining the collections and fields you require.
Review and Implement:
Examine the generated schema suggestions and apply them to your project.
Sample Prompt
Text
Create these collections in my Back4app project:

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - 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 primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
Utilizing this AI-driven approach not only saves time but also guarantees a well-optimized and uniform schema.
﻿
Step 3 – Activating the Admin App & Managing CRUD Operations
Introduction to the Admin App
The Back4app Admin App is a user-friendly, no-code interface that empowers you to handle your backend data effortlessly. Its drag and drop functionality makes performing CRUD operations—such as adding, viewing, updating, and deleting records—a breeze.
How to Enable the Admin App
Go to the “More” menu in your Back4app dashboard.
Select “Admin App” and then click on “Enable Admin App.”
Set up your admin credentials by creating an initial admin user, which also establishes roles (e.g., B4aAdminUser) and system collections.
Enable Admin App
﻿
After activation, log into the Admin App to manage your data.
Admin App Dashboard
﻿
Performing CRUD via the Admin App
Within the Admin App, you can:
Add New Records: Use the “Add Record” button in a collection (e.g., Items) to insert new data.
View and Modify Records: Click on a record to see its details and make updates.
Remove Records: Select the delete option to eliminate data that is no longer needed.
This intuitive interface greatly simplifies data management tasks.
﻿
Step 4 – Integrating RedwoodJS with Back4app
Now that your backend is set up and manageable via the Admin App, it’s time to connect your RedwoodJS frontend with Back4app.
Using GraphQL API Integration
RedwoodJS is built around GraphQL, making it a perfect match for integrating with Back4app via API calls. Instead of using the SDK, you will interact with your backend using GraphQL queries and mutations.
Setting Up Your RedwoodJS Project
Create a new RedwoodJS application:
Bash
yarn create redwood-app basic-crud-app-redwood
yarn create redwood-app basic-crud-app-redwood
﻿
Navigate to your project directory:
Bash
cd basic-crud-app-redwood
cd basic-crud-app-redwood
﻿
Configure your environment variables:
In your .env file, add your Back4app credentials:
Text
BACK4APP_APP_ID=YOUR_APPLICATION_ID
BACK4APP_REST_API_KEY=YOUR_REST_API_KEY
BACK4APP_SERVER_URL=https://parseapi.back4app.com
BACK4APP_APP_ID=YOUR_APPLICATION_ID
BACK4APP_REST_API_KEY=YOUR_REST_API_KEY
BACK4APP_SERVER_URL=https://parseapi.back4app.com
﻿
Fetching Data with RedwoodJS Cells
RedwoodJS Cells simplify data fetching. Here’s an example of a cell that retrieves items:
JS
// web/src/components/ItemsCell/ItemsCell.js
export const QUERY = gql`
  query ITEMS_QUERY {
    items: itemsCollection {
      _id
      title
      description
    }
  }
`;

export const Loading = () => <div>Loading items…</div>;

export const Empty = () => <div>No items available.</div>;

export const Failure = ({ error }) => <div>Error: {error.message}</div>;

export const Success = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item._id}>
          <strong>{item.title}</strong> — {item.description}
        </li>
      ))}
    </ul>
  );
};
// web/src/components/ItemsCell/ItemsCell.js
export const QUERY = gql`
  query ITEMS_QUERY {
    items: itemsCollection {
      _id
      title
      description
    }
  }
`;

export const Loading = () => <div>Loading items…</div>;

export const Empty = () => <div>No items available.</div>;

export const Failure = ({ error }) => <div>Error: {error.message}</div>;

export const Success = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item._id}>
          <strong>{item.title}</strong> — {item.description}
        </li>
      ))}
    </ul>
  );
};
﻿
You can integrate similar GraphQL queries and mutations in your RedwoodJS components to perform CRUD operations.
﻿
Step 5 – Securing Your Backend
Implementing Access Control
Protect your data by setting Access Control Lists (ACLs) directly on objects. For example, when creating a private item, you can ensure that only the owner has read/write privileges.
JS
async function createPrivateItem(itemData, owner) {
  const response = await fetch(`${process.env.BACK4APP_SERVER_URL}/classes/Items`, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': process.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': process.env.BACK4APP_REST_API_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: itemData.title,
      description: itemData.description,
      ACL: {
        [owner]: { read: true, write: true },
        "*": { read: false, write: false }
      }
    })
  });
  return response.json();
}
async function createPrivateItem(itemData, owner) {
  const response = await fetch(`${process.env.BACK4APP_SERVER_URL}/classes/Items`, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': process.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': process.env.BACK4APP_REST_API_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: itemData.title,
      description: itemData.description,
      ACL: {
        [owner]: { read: true, write: true },
        "*": { read: false, write: false }
      }
    })
  });
  return response.json();
}
﻿
Configuring Class-Level Permissions
Within the Back4app dashboard, set Class-Level Permissions (CLPs) for each collection to restrict access to authenticated users or specific roles, ensuring your data remains secure.
﻿
Step 6 – Managing User Authentication
Setting Up Account Management
Back4app leverages a robust user system, which you can integrate into RedwoodJS for user authentication. In your RedwoodJS app, handle user sign-ups and logins through API calls.
Example: User Registration
JS
// web/src/components/Auth/SignUp.js
import { useState } from 'react';

const SignUp = () => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch(`${process.env.BACK4APP_SERVER_URL}/users`, {
        method: 'POST',
        headers: {
          'X-Parse-Application-Id': process.env.BACK4APP_APP_ID,
          'X-Parse-REST-API-Key': process.env.BACK4APP_REST_API_KEY,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username, email, password })
      });
      const data = await response.json();
      if (data.error) {
        alert('Sign up failed: ' + data.error);
      } else {
        alert('User successfully registered!');
      }
    } catch (error) {
      console.error('Registration error:', error);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};

export default SignUp;
// web/src/components/Auth/SignUp.js
import { useState } from 'react';

const SignUp = () => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch(`${process.env.BACK4APP_SERVER_URL}/users`, {
        method: 'POST',
        headers: {
          'X-Parse-Application-Id': process.env.BACK4APP_APP_ID,
          'X-Parse-REST-API-Key': process.env.BACK4APP_REST_API_KEY,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username, email, password })
      });
      const data = await response.json();
      if (data.error) {
        alert('Sign up failed: ' + data.error);
      } else {
        alert('User successfully registered!');
      }
    } catch (error) {
      console.error('Registration error:', error);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};

export default SignUp;
﻿
A similar method can be applied for logging in and maintaining user sessions.
﻿
Step 7 – Deploying Your RedwoodJS Frontend via Web Deployment
Back4app’s Web Deployment feature makes hosting your RedwoodJS frontend seamless. Follow these steps to push your code to production:
7.1 Build Your Production Version
Open your project folder in the terminal.
Run the build command:
Bash
yarn rw build
yarn rw build
﻿
This will generate a web/dist folder containing your optimized static files.
Verify the build output:
Ensure that the web/dist folder contains an index.html along with all necessary assets.
7.2 Organize and Commit Your Source Code
Your repository should host the complete source for your RedwoodJS application. A typical structure might be:
Text
Basic-CRUD-App-Redwood/
├── api/
├── web/
│   ├── dist/
│   ├── src/
│   │   ├── components/
│   │   │   ├── ItemsCell/
│   │   │   └── Auth/
│   │   └── App.js
│   └── index.html
├── .env
└── package.json
Basic-CRUD-App-Redwood/
├── api/
├── web/
│   ├── dist/
│   ├── src/
│   │   ├── components/
│   │   │   ├── ItemsCell/
│   │   │   └── Auth/
│   │   └── App.js
│   └── index.html
├── .env
└── package.json
﻿
Committing to GitHub
Initialize Git (if needed):
Bash
git init
git init
﻿
Stage your files:
Bash
git add .
git add .
﻿
Commit your code:
Bash
git commit -m "Initial commit for RedwoodJS CRUD frontend"
git commit -m "Initial commit for RedwoodJS CRUD frontend"
﻿
Create a GitHub repository (e.g., Basic-CRUD-App-Redwood) and push your code:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Redwood.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Redwood.git
git push -u origin main
﻿
7.3 Integrate with Web Deployment
Access Web Deployment from your Back4app dashboard under your project (Basic-CRUD-App-Redwood).
Connect your GitHub account if you haven’t already, following the prompts.
Select your repository and branch (e.g., main) containing your RedwoodJS code.
7.4 Set Deployment Parameters
Build Command: Specify yarn rw build if your repository doesn’t include a pre-built distribution.
Output Directory: Configure the output directory as web/dist.
Environment Variables: Include any necessary environment variables, such as your Back4app keys.
7.5 Containerizing with Docker 
If you favor Docker for deployment, include a Dockerfile in your repository. For instance:
Dockerfile
# Use an official Node image for building the app
FROM node:16-alpine as builder

# Set the working directory
WORKDIR /app

# Copy dependency definitions
COPY package*.json ./

# Install dependencies
RUN yarn install

# Copy the project files
COPY . .

# Build the RedwoodJS app
RUN yarn rw build

# Use Nginx to serve the static files
FROM nginx:stable-alpine
COPY --from=builder /app/web/dist /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 builder

# Set the working directory
WORKDIR /app

# Copy dependency definitions
COPY package*.json ./

# Install dependencies
RUN yarn install

# Copy the project files
COPY . .

# Build the RedwoodJS app
RUN yarn rw build

# Use Nginx to serve the static files
FROM nginx:stable-alpine
COPY --from=builder /app/web/dist /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
7.6 Deploying the Application
Press the Deploy button in Back4app after finalizing your configuration.
Monitor the deployment process:
Back4app will fetch your code, build the project, and deploy it in a containerized environment.
Retrieve your application URL:
Once deployed, a URL will be provided where your RedwoodJS application is hosted.
7.7 Validate Your Deployment
Open the provided URL in your browser to confirm that the site loads.
Test application functionality:
Ensure that all pages, routes, and assets load correctly.
Troubleshoot if necessary:
Utilize browser developer tools and Back4app deployment logs for any required debugging.
﻿
Step 8 – Final Thoughts and Future Directions
Congratulations on building your RedwoodJS-based CRUD application using Back4app! 
You have successfully set up a project titled Basic-CRUD-App-Redwood, created detailed database collections for items and users, and integrated a clean frontend with robust data management and security.
What’s Next?
Refine Your Frontend:
Enhance your RedwoodJS application with features like detailed item pages, search functionalities, and real-time updates.
Incorporate Advanced Features:
Consider adding serverless functions, third-party integrations, or more complex access controls.
Explore Additional Resources:
Dive deeper into the Back4app documentation and RedwoodJS guides for further improvements.
By following this tutorial, you now possess the know-how to develop a scalable CRUD backend and seamlessly integrate it with a modern RedwoodJS frontend using Back4app. Enjoy your coding journey!
Field	Data Type	Purpose
_id	ObjectId	Auto-generated unique identifier.
title	String	The name or title of the item.
description	String	A short summary describing the item.
created_at	Date	Record creation timestamp.
updated_at	Date	Timestamp of the latest update.
Field	Data Type	Purpose
_id	ObjectId	Auto-generated unique identifier.
username	String	Unique identifier for the user.
email	String	User's unique email address.
password_hash	String	Encrypted password for authentication.
created_at	Date	Account creation timestamp.
updated_at	Date	Timestamp of the latest update.
Updated 20 Feb 2025
Did this page help you?
How to Create a Basic CRUD Application with Blazor?
How to Develop a CRUD Application with Deno? A Comprehensive Guide