Quickstarters
How to a Basic CRUD App with Alpine.js?

41min
Overview
In this guide, you'll learn to construct a CRUD (create, read, update, delete) application using Alpine.js. 
This tutorial walks you through the core operations needed to manage data dynamically, leveraging Back4app as your robust backend service. 
We’ll begin by setting up a new Back4app project dubbed Basic-CRUD-App-AlpineJS. This project will serve as your backend for managing data.
After initializing your project, you'll design a flexible database schema by defining collections and fields—either manually or with the help of the Back4app AI Agent. This step ensures your backend is structured for reliable CRUD operations.
Next, you will use the Back4app Admin App, a user-friendly drag and drop tool, to administer your collections effortlessly. This interface streamlines data management tasks.
Finally, you will connect your Alpine.js frontend to Back4app using REST or GraphQL APIs, and secure your backend with robust access controls.
By the conclusion of this tutorial, you'll have a production-ready web app that supports basic CRUD operations along with user authentication and secure data updates.
What You Will Learn
How to construct CRUD applications with an efficient backend service.
Methods for designing a scalable data model and linking it to an Alpine.js frontend.
Tips on using a drag and drop admin tool for managing collections.
Strategies for deploying your application using containerization and web deployment techniques.
﻿
Prerequisites
Before diving in, make sure you have:
A Back4app account with a new project ready.
Refer to Getting Started with Back4app for help.
An Alpine.js development environment.
Include Alpine.js via CDN or npm as per your project setup.
Familiarity with JavaScript, Alpine.js, and REST API principles.
Consult the Alpine.js documentation for more details.
﻿
Step 1 – Initiating Your Project
Setting Up a New Back4app Project
Log into your Back4app dashboard.
Click on the “New App” button.
Provide the project name: Basic-CRUD-App-AlpineJS and follow the prompts.
Create New Project
﻿
After creation, your project appears on the dashboard, ready for backend configuration.
﻿
Step 2 – Crafting Your Database Schema
Mapping Out Your Data Model
For our CRUD app, you’ll set up a couple of key collections. Below are sample collections with fields and data types to guide your schema setup. These collections facilitate essential CRUD actions.
1. Items Collection
This collection holds details for each item.
Field
Type
Purpose
_id
ObjectId
Auto-generated primary identifier.
title
String
Name or title of the item.
description
String
Brief summary about the item.
created_at
Date
Timestamp for item creation.
updated_at
Date
Timestamp for last update.
2. Users Collection
This collection stores user credentials and details.
Field
Type
Purpose
_id
ObjectId
Auto-generated primary identifier.
username
String
Unique user identifier.
email
String
User’s unique email address.
password_hash
String
Securely stored hashed password.
created_at
Date
Account creation timestamp.
updated_at
Date
Timestamp for the last account update.
You can manually create these collections in the Back4app dashboard by adding a new class for each and defining the columns accordingly.
Create New Class
﻿
You can set fields by selecting a type, naming them, adding default values, and marking them as required.
Create Column
﻿
﻿
Leveraging the Back4app AI Agent for Schema Creation
The Back4app AI Agent helps automate schema generation. It creates your collections based on a prompt describing your desired fields.
How to Use the AI Agent:
Open the AI Agent from your Back4app dashboard.
Input a detailed description of the collections and fields needed.
Review the suggested schema and apply it to your project.
Sample Prompt
Text
Create the following collections:

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 the following collections:

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 saves time and ensures a consistent, optimized schema.
﻿
Step 3 – Activating the Admin Interface & CRUD Features
Introducing the Admin App
The Back4app Admin App offers a no-code interface for managing your backend data. Its drag and drop features make CRUD tasks simple and efficient.
How to Enable the Admin App
Go to the “More” section in your Back4app dashboard.
Select Admin App and then click Enable Admin App.
Set up your first admin credentials to configure roles and system collections.
Enable Admin App
﻿
Once activated, sign in to the Admin App to manage your data.
Admin App Dashboard
﻿
Performing CRUD Actions with the Admin App
Inside the Admin App, you can:
Create Records: Click the “Add Record” button in a collection like Items.
Read and Update Records: Select a record to view details or make edits.
Delete Records: Remove unwanted entries using the delete function.
This interface simplifies data management with an intuitive drag and drop design.
﻿
Step 4 – Connecting Alpine.js to Back4app
With your backend ready, it's time to link your Alpine.js frontend to Back4app.
Using REST/GraphQL APIs
You'll use REST or GraphQL to interact with your backend.
Example: Fetching Items via REST
JS
// Sample REST API call using fetch
async function loadItems() {
  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('Items loaded:', data.results);
  } catch (error) {
    console.error('Error loading items:', error);
  }
}
loadItems();
// Sample REST API call using fetch
async function loadItems() {
  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('Items loaded:', data.results);
  } catch (error) {
    console.error('Error loading items:', error);
  }
}
loadItems();
﻿
Integrate these API calls within your Alpine.js components to perform CRUD operations.
﻿
Step 5 – Protecting Your Backend
Setting Up Access Control Lists (ACLs)
Secure your data by applying ACLs to your records. For instance, to create a private item:
JS
async function addPrivateItem(data, owner) {
  const itemData = {
    title: data.title,
    description: data.description
  };

  // Define ACL settings: only the owner has read/write privileges
  const aclSettings = {
    "*": { "read": false, "write": false },
    [owner]: { "read": true, "write": true }
  };

  try {
    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({ ...itemData, ACL: aclSettings })
    });
    const result = await response.json();
    console.log('Private item added:', result);
  } catch (error) {
    console.error('Error adding private item:', error);
  }
}
async function addPrivateItem(data, owner) {
  const itemData = {
    title: data.title,
    description: data.description
  };

  // Define ACL settings: only the owner has read/write privileges
  const aclSettings = {
    "*": { "read": false, "write": false },
    [owner]: { "read": true, "write": true }
  };

  try {
    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({ ...itemData, ACL: aclSettings })
    });
    const result = await response.json();
    console.log('Private item added:', result);
  } catch (error) {
    console.error('Error adding private item:', error);
  }
}
﻿
Configuring Class-Level Permissions (CLPs)
Within the Back4app dashboard, set CLPs for each collection to enforce default access policies, ensuring only authorized users can access sensitive data.
﻿
Step 6 – Implementing User Authentication
Creating User Accounts
Back4app utilizes Parse’s User class for managing authentication. In your Alpine.js project, handle user registration and login via API calls.
Example: User Signup with Alpine.js
HTML
<!–– Example Alpine.js user signup form ––>
<div x-data="{ username: '', password: '', email: '' }">
  <form @submit.prevent="signUpUser()">
    <input type="text" placeholder="Username" x-model="username" />
    <input type="password" placeholder="Password" x-model="password" />
    <input type="email" placeholder="Email" x-model="email" />
    <button type="submit">Sign Up</button>
  </form>

  <script>
    function signUpUser() {
      const userData = {
        username: document.querySelector('[x-model="username"]').value,
        password: document.querySelector('[x-model="password"]').value,
        email: document.querySelector('[x-model="email"]').value
      };

      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(userData)
      })
      .then(response => response.json())
      .then(data => {
        alert('Signup successful!');
        console.log('User data:', data);
      })
      .catch(error => {
        alert('Signup error: ' + error.message);
      });
    }
  </script>
</div>
<!–– Example Alpine.js user signup form ––>
<div x-data="{ username: '', password: '', email: '' }">
  <form @submit.prevent="signUpUser()">
    <input type="text" placeholder="Username" x-model="username" />
    <input type="password" placeholder="Password" x-model="password" />
    <input type="email" placeholder="Email" x-model="email" />
    <button type="submit">Sign Up</button>
  </form>

  <script>
    function signUpUser() {
      const userData = {
        username: document.querySelector('[x-model="username"]').value,
        password: document.querySelector('[x-model="password"]').value,
        email: document.querySelector('[x-model="email"]').value
      };

      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(userData)
      })
      .then(response => response.json())
      .then(data => {
        alert('Signup successful!');
        console.log('User data:', data);
      })
      .catch(error => {
        alert('Signup error: ' + error.message);
      });
    }
  </script>
</div>
﻿
A similar method can be implemented for user login and session handling.
﻿
Step 7 – Deploying Your Alpine.js Frontend with Web Deployment
Back4app’s Web Deployment feature lets you host your Alpine.js frontend easily. In this segment, you will prepare your production build, commit your code to GitHub, connect your repository to Web Deployment, and launch your app.
7.1 Build Your Production Assets
Open your project directory in a terminal.
Run your build command (if using a build process for Alpine.js):
Bash
npm run build
npm run build
﻿
This generates a folder (typically dist or build) with optimized static files.
Confirm that your build folder contains an index.html along with the necessary assets.
﻿
7.2 Organize and Upload Your Source Files
Your GitHub repository should hold all the source files for your Alpine.js project. A common structure might be:
Text
Basic-CRUD-App-AlpineJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── main.js
│   └── components/
│       ├── itemsList.js
│       └── auth.js
├── package.json
└── README.md
Basic-CRUD-App-AlpineJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── main.js
│   └── components/
│       ├── itemsList.js
│       └── auth.js
├── package.json
└── README.md
﻿
Sample File: src/main.js
JS
document.addEventListener('alpine:init', () => {
  Alpine.data('itemsApp', () => ({
    items: [],
    newItemTitle: '',
    newItemDescription: '',

    async loadItems() {
      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();
        this.items = data.results;
      } catch (error) {
        console.error('Failed to load items:', error);
      }
    },

    async addItem() {
      const payload = {
        title: this.newItemTitle,
        description: this.newItemDescription
      };
      try {
        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(payload)
        });
        this.newItemTitle = '';
        this.newItemDescription = '';
        this.loadItems();
      } catch (error) {
        console.error('Error adding item:', error);
      }
    }
  }));
});
document.addEventListener('alpine:init', () => {
  Alpine.data('itemsApp', () => ({
    items: [],
    newItemTitle: '',
    newItemDescription: '',

    async loadItems() {
      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();
        this.items = data.results;
      } catch (error) {
        console.error('Failed to load items:', error);
      }
    },

    async addItem() {
      const payload = {
        title: this.newItemTitle,
        description: this.newItemDescription
      };
      try {
        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(payload)
        });
        this.newItemTitle = '';
        this.newItemDescription = '';
        this.loadItems();
      } catch (error) {
        console.error('Error adding item:', error);
      }
    }
  }));
});
﻿
Committing Your Code to GitHub
Initialize a Git repository in your project folder:
Bash
git init
git init
﻿
Stage your files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial commit of Alpine.js frontend"
git commit -m "Initial commit of Alpine.js frontend"
﻿
Create a new repository on GitHub (e.g., Basic-CRUD-App-AlpineJS-Frontend).
Push your code:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-AlpineJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-AlpineJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 Linking Your GitHub Repository to Web Deployment
Sign in to your Back4app dashboard and select your project (Basic-CRUD-App-AlpineJS).
Open the Web Deployment section.
Connect your GitHub account and choose your repository and branch containing your Alpine.js code.
﻿
7.4 Configuring the Deployment Settings
Build Command: If your project lacks a pre-built folder, specify a command (e.g., npm run build).
Output Directory: Set it to the folder with your static files (e.g., build or dist).
Environment Variables: Add any needed variables such as API keys.
﻿
7.5 Dockerizing Your Alpine.js Application (Optional)
If you wish to deploy using Docker, include a Dockerfile like:
Dockerfile
# Use an official Node image for building
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

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

# Copy source and build app
COPY . .
RUN npm run build

# Use Nginx to serve the static 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
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

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

# Copy source and build app
COPY . .
RUN npm run build

# Use Nginx to serve the static files
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 configuration if desired.
﻿
7.6 Launching Your Application
Click the Deploy button in Back4app.
Monitor the deployment process as Back4app pulls your code, builds it, and deploys it.
Once deployed, you will receive a URL where your Alpine.js application is hosted.
﻿
7.7 Testing Your Deployment
Visit the provided URL in your browser.
Verify that your app loads correctly, routes function as expected, and assets are served properly.
Troubleshoot any issues by checking browser console logs and Back4app deployment logs.
﻿
Step 8 – Final Thoughts and Future Enhancements
Congratulations! You have built a complete CRUD application using Alpine.js and Back4app. 
You set up the Basic-CRUD-App-AlpineJS project, created detailed database collections, and utilized a no-code admin tool for data management. 
Additionally, you connected your Alpine.js frontend to your backend using REST APIs and ensured secure data handling.
Next Steps:
Enhance Your UI: Expand your Alpine.js components with advanced features like detailed item views or real-time updates.
Add More Functionality: Explore incorporating additional backend logic, third-party APIs, or complex access controls.
Further Learning: Visit the Back4app documentation and additional resources to deepen your understanding of advanced integrations.
Happy coding and enjoy building your next project!
Field	Type	Purpose
_id	ObjectId	Auto-generated primary identifier.
title	String	Name or title of the item.
description	String	Brief summary about the item.
created_at	Date	Timestamp for item creation.
updated_at	Date	Timestamp for last update.
Field	Type	Purpose
_id	ObjectId	Auto-generated primary identifier.
username	String	Unique user identifier.
email	String	User’s unique email address.
password_hash	String	Securely stored hashed password.
created_at	Date	Account creation timestamp.
updated_at	Date	Timestamp for the last account update.
Updated 23 Feb 2025
Did this page help you?
How to Create a CRUD Application with Koa.js?
How to Build a Basic CRUD App with Meteor? A Step-by-Step Guide