Quickstarters
How to Build a CRUD App with Astro?

38min
Overview
In this guide, you'll learn how to create a CRUD (create, read, update, and delete) web application using Astro. 
This tutorial walks you through setting up a Back4app project—our robust backend—and designing a data structure that supports fundamental operations. 
We will then build an Astro frontend that communicates with Back4app via REST/GraphQL APIs, ensuring secure and efficient data management.
By the end of this guide, you’ll have a production-ready web application complete with user authentication and secure data handling.
What You'll Learn
How to structure a CRUD application with Astro and Back4app.
Designing a scalable backend with custom collections.
Using a drag-and-drop admin interface for effortless data management.
Integrating your Astro frontend with Back4app using REST or GraphQL.
Deploying your Astro project and containerizing it with Docker if needed.
﻿
Prerequisites
Before you get started, please confirm you have:
A Back4app account with a new project ready.
Check out Getting Started with Back4app for guidance.
An Astro development environment set up.
Use the official Astro documentation to get started. Ensure Node.js (version 14+) is installed.
Basic familiarity with JavaScript, Astro, and REST APIs.
Visit the Astro docs if you need a refresher.
﻿
Step 1 – Initializing Your Project
Starting a New Back4app Project
Sign in to your Back4app account.
Click “New App” from your dashboard.
Name your project: Basic-CRUD-App-Astro and follow the instructions to complete the setup.
Create New Project
﻿
After creation, your project will appear on your Back4app dashboard—your foundation for backend configuration.
﻿
Step 2 – Crafting Your Database Schema
Structuring Your Data Model
For our CRUD application, you'll define several collections. Below are sample collections with fields and types to help you configure your database schema effectively. This structure supports efficient CRUD operations.
1. Items Collection
Field
Type
Purpose
_id
ObjectId
Auto-generated primary key.
title
String
Name or title of the item.
description
String
A brief overview of the item.
created_at
Date
Timestamp of creation.
updated_at
Date
Timestamp for last modification.
2. Users Collection
Field
Type
Purpose
_id
ObjectId
Auto-generated primary key.
username
String
Unique identifier for the user.
email
String
User's email address.
password_hash
String
Encrypted password for authentication.
created_at
Date
When the account was created.
updated_at
Date
Last update time for the account.
You can manually configure these collections in your Back4app dashboard by creating new classes and adding appropriate columns.
Create New Class
﻿
To add a field, select a data type, provide a field name, define a default if needed, and mark whether the field is required.
Create Column
﻿
Leveraging the Back4app AI Agent for Schema Setup
The integrated AI Agent in Back4app can auto-generate your schema. Describe your desired collections and fields in the AI Agent interface, review its recommendations, and apply them 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-created)
  - 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-created)
  - 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 setup while ensuring your schema meets application requirements.
﻿
Step 3 – Activating the Admin Interface & CRUD Actions
Exploring the Admin Interface
The Back4app Admin App is a no-code tool that provides a visual interface to manage your backend data. Its drag-and-drop design lets you easily perform CRUD operations.
Activating the Admin Interface
Open the “More” menu in your Back4app dashboard.
Select “Admin App” and click “Enable Admin App.”
Set up your admin credentials by creating the initial admin user. This will also configure default roles (e.g., B4aAdminUser) and system collections.
Enable Admin App
﻿
After activation, log in to the Admin App to manage your collections.
Admin App Dashboard
﻿
Managing Data with the Admin Interface
Inside the Admin App you can:
Add Records: Click “Add Record” in a collection (like Items) to create new entries.
View/Edit Records: Click on a record to inspect or modify its fields.
Remove Records: Delete obsolete entries effortlessly.
This tool simplifies CRUD operations with an intuitive interface.
﻿
Step 4 – Connecting Astro with Back4app
With your backend configured, it’s time to integrate your Astro frontend.
Utilizing REST/GraphQL APIs
Since Astro is a static site generator optimized for performance, we’ll interact with Back4app using REST or GraphQL APIs. This approach avoids the need for the Parse SDK.
Example: Fetching Items via REST
Below is an example of a REST API call within an Astro component:
Text
// src/components/ItemsList.astro
---
import { useState, useEffect } from 'react';

const [items, setItems] = useState([]);

useEffect(() => {
  const fetchItems = async () => {
    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();
      setItems(data.results);
    } catch (error) {
      console.error('Failed to fetch items:', error);
    }
  };
  fetchItems();
}, []);

---

<div>
  <h2>Items</h2>
  <ul>
    {items.map(item => (
      <li key={item.objectId}>
        {item.title} – {item.description}
      </li>
    ))}
  </ul>
</div>
// src/components/ItemsList.astro
---
import { useState, useEffect } from 'react';

const [items, setItems] = useState([]);

useEffect(() => {
  const fetchItems = async () => {
    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();
      setItems(data.results);
    } catch (error) {
      console.error('Failed to fetch items:', error);
    }
  };
  fetchItems();
}, []);

---

<div>
  <h2>Items</h2>
  <ul>
    {items.map(item => (
      <li key={item.objectId}>
        {item.title} – {item.description}
      </li>
    ))}
  </ul>
</div>
﻿
Integrate similar API calls for creating, updating, and deleting records within your Astro components.
﻿
Step 5 – Safeguarding Your Backend
Implementing Access Control Lists (ACLs)
Protect your data by setting ACLs on objects. For example, to create an item that only the owner can modify:
JS
async function createPrivateItem(data, owner) {
  const response = await fetch('https://parseapi.back4app.com/classes/Items', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    },
    body: JSON.stringify({
      title: data.title,
      description: data.description,
      ACL: {
        [owner.id]: { read: true, write: true },
        '*': { read: false, write: false }
      }
    })
  });
  const result = await response.json();
  console.log('Created private item:', result);
}
async function createPrivateItem(data, owner) {
  const response = await fetch('https://parseapi.back4app.com/classes/Items', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
    },
    body: JSON.stringify({
      title: data.title,
      description: data.description,
      ACL: {
        [owner.id]: { read: true, write: true },
        '*': { read: false, write: false }
      }
    })
  });
  const result = await response.json();
  console.log('Created private item:', result);
}
﻿
Configuring Class-Level Permissions (CLPs)
Within the Back4app dashboard, adjust the CLPs for each collection to define who can access and modify your data.
﻿
Step 6 – Adding User Authentication
Setting Up User Registration and Login
Back4app uses Parse’s User class for authentication. In your Astro project, create components for user sign-up and login by leveraging REST API calls.
Example: User Sign-Up
Text
// src/components/SignUp.astro
---
import { useState } from 'react';

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

const handleSignUp = async (event) => {
  event.preventDefault();
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify({
        username,
        password,
        email
      })
    });
    const result = await response.json();
    alert('Sign-up successful!');
  } catch (error) {
    alert('Error during sign-up: ' + error.message);
  }
};

---

<form on:submit={handleSignUp}>
  <input type="text" placeholder="Username" value={username} onInput={(e) => setUsername(e.target.value)} />
  <input type="password" placeholder="Password" value={password} onInput={(e) => setPassword(e.target.value)} />
  <input type="email" placeholder="Email" value={email} onInput={(e) => setEmail(e.target.value)} />
  <button type="submit">Register</button>
</form>
// src/components/SignUp.astro
---
import { useState } from 'react';

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

const handleSignUp = async (event) => {
  event.preventDefault();
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify({
        username,
        password,
        email
      })
    });
    const result = await response.json();
    alert('Sign-up successful!');
  } catch (error) {
    alert('Error during sign-up: ' + error.message);
  }
};

---

<form on:submit={handleSignUp}>
  <input type="text" placeholder="Username" value={username} onInput={(e) => setUsername(e.target.value)} />
  <input type="password" placeholder="Password" value={password} onInput={(e) => setPassword(e.target.value)} />
  <input type="email" placeholder="Email" value={email} onInput={(e) => setEmail(e.target.value)} />
  <button type="submit">Register</button>
</form>
﻿
You can build similar components for user login and session management.
﻿
Step 7 – Deploying Your Astro Frontend
Back4app's Web Deployment feature allows you to host your Astro project seamlessly by connecting your GitHub repository.
7.1 Building Your Production Version
Open a terminal in your project directory.
Run the build command:
Bash
npm run build
npm run build
﻿
This generates an optimized dist folder with your static assets.
Check the Build:
Ensure that the dist folder contains an index.html along with other asset directories.
﻿
7.2 Organizing Your Project Repository
Your repository should include the complete Astro source code. An example structure might be:
Text
Basic-CRUD-App-Astro/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── ItemsList.astro
│   │   └── SignUp.astro
│   └── pages/
│       └── index.astro
├── package.json
└── README.md
Basic-CRUD-App-Astro/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── ItemsList.astro
│   │   └── SignUp.astro
│   └── pages/
│       └── index.astro
├── package.json
└── README.md
﻿
Example File: src/components/ItemsList.astro
Text
// src/components/ItemsList.astro
---
import { useState, useEffect } from 'react';

const [items, setItems] = useState([]);

useEffect(() => {
  const getItems = async () => {
    try {
      const res = 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 json = await res.json();
      setItems(json.results);
    } catch (err) {
      console.error('Error retrieving items:', err);
    }
  };
  getItems();
}, []);

---

<div>
  <h2>Item List</h2>
  <ul>
    {items.map(item => (
      <li key={item.objectId}>
        {item.title} — {item.description}
      </li>
    ))}
  </ul>
</div>
// src/components/ItemsList.astro
---
import { useState, useEffect } from 'react';

const [items, setItems] = useState([]);

useEffect(() => {
  const getItems = async () => {
    try {
      const res = 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 json = await res.json();
      setItems(json.results);
    } catch (err) {
      console.error('Error retrieving items:', err);
    }
  };
  getItems();
}, []);

---

<div>
  <h2>Item List</h2>
  <ul>
    {items.map(item => (
      <li key={item.objectId}>
        {item.title} — {item.description}
      </li>
    ))}
  </ul>
</div>
﻿
7.3 Committing and Pushing Your Code to GitHub
Initialize a Git repository (if not done):
Bash
git init
git init
﻿
Add all files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial commit for Astro frontend"
git commit -m "Initial commit for Astro frontend"
﻿
Create a repository on GitHub (e.g., Basic-CRUD-App-Astro) and push:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Astro.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Astro.git
git push -u origin main
﻿
﻿
7.4 Linking GitHub with Back4app Web Deployment
Access Web Deployment:
Log in to your Back4app dashboard, navigate to your project (Basic-CRUD-App-Astro), and select the Web Deployment option.
Connect Your GitHub Account:
Follow the prompts to authorize Back4app to access your repository.
Choose Your Repository and Branch:
Select the repository (e.g., Basic-CRUD-App-Astro) and the branch (typically main).
﻿
7.5 Configuring Deployment Settings
Build Command:
Specify the build command (e.g., npm run build) if your repository lacks a pre-built output.
Output Directory:
Set it to dist so Back4app knows where to locate your static files.
Environment Variables:
Add any required variables, such as API keys.
﻿
7.6 Dockerizing Your Astro Application (Optional)
If you prefer containerized deployments, include a Dockerfile like:
Dockerfile
# Use an official Node image for building
FROM node:16-alpine as builder

# Set the working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy source files and build the project
COPY . .
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node image for building
FROM node:16-alpine as builder

# Set the working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy source files and build the project
COPY . .
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Integrate Docker settings in your Web Deployment configuration if desired.
﻿
7.7 Launching Your Application
Hit the Deploy button in the Web Deployment section.
Monitor the build process:
Back4app will retrieve your code, build it, and deploy your application.
Receive your URL:
Once deployed, Back4app will supply a URL where your site is live.
﻿
Step 8 – Wrapping Up and Future Enhancements
Great job! You’ve now created a complete CRUD application with Astro and Back4app. Your project includes a backend with detailed collections for Items and Users, and a frontend that performs all CRUD operations through REST/GraphQL APIs.
Next Steps:
Enhance the Frontend:
Add features such as detailed views, search capabilities, and real-time notifications.
Expand Backend Functionality:
Consider integrating cloud functions or additional API endpoints for more complex logic.
Dive Deeper:
Explore further resources in the Back4app documentation and the Astro docs for advanced topics.
By following this tutorial, you now possess the knowledge to build a robust and scalable CRUD application using Astro and Back4app. Enjoy coding and exploring new possibilities!
Field	Type	Purpose
_id	ObjectId	Auto-generated primary key.
title	String	Name or title of the item.
description	String	A brief overview of the item.
created_at	Date	Timestamp of creation.
updated_at	Date	Timestamp for last modification.
Field	Type	Purpose
_id	ObjectId	Auto-generated primary key.
username	String	Unique identifier for the user.
email	String	User's email address.
password_hash	String	Encrypted password for authentication.
created_at	Date	When the account was created.
updated_at	Date	Last update time for the account.
Updated 20 Feb 2025
Did this page help you?
How to Develop a CRUD Application with Deno? A Comprehensive Guide
How to Create a CRUD Application with Kotlin?