Quickstarters
How to Build a CRUD Application with Aurelia? A Comprehensive Tutorial

40min
Overview
In this guide, you will learn how to create simple CRUD (create, read, update, delete) application using the Aurelia framework. 
This tutorial explains how to build an application capable of handling essential data operations by integrating Aurelia with Back4app as your backend service.
Initially, you will set up a Back4app project titled Basic-CRUD-App-Aurelia to serve as your robust data management system. 
Next, you'll outline a scalable database structure by manually defining collections and fields—or by utilizing the Back4app AI Agent—to ensure reliable data operations.
Subsequently, you will take advantage of the Back4app Admin App, which offers a drag-and-drop interface for managing your data effortlessly. 
Finally, you will connect your Aurelia frontend with Back4app using REST/GraphQL calls (or the Parse SDK where applicable), and secure your backend with detailed access control.
By the end of this tutorial, you'll have a production-ready web application with complete CRUD functionality, user authentication, and secure data handling.
Main Insights
Master building CRUD applications with a reliable backend service.
Acquire practical skills for designing a scalable backend and linking it to an Aurelia frontend.
Explore a no-code admin interface (Back4app Admin App) for seamless data operations.
Learn how to deploy your application using modern techniques, including containerization.
﻿
Prerequisites
Before you begin, make sure you have the following:
A Back4app account with an active project.
Visit Getting Started with Back4app if you need guidance.
An Aurelia development setup.
Use the Aurelia CLI or a similar tool; ensure you have Node.js (version 14 or later) installed.
Basic proficiency in JavaScript, Aurelia, and REST APIs.
Consult the Aurelia documentation for more details if required.
﻿
Step 1 – Setting Up Your Project
Creating a New Back4app Project
Sign in to your Back4app account.
Press the “New App” button from your dashboard.
Enter the project name: Basic-CRUD-App-Aurelia and complete the setup steps.
Create New Project
﻿
After creation, your project will be visible on your dashboard, ready for backend configuration and data management.
﻿
Step 2 – Designing Your Database Schema
Crafting the Data Model
For this CRUD application, you'll define multiple collections. Below are examples of the collections required along with the fields and data types needed to support CRUD operations effectively.
1. Items Collection
Field
Data Type
Details
_id
ObjectId
Auto-generated primary key.
title
String
Name or title of the item.
description
String
A short description of the item.
created_at
Date
Timestamp when the item was created.
updated_at
Date
Timestamp when the item was last modified.
2. Users Collection
Field
Data Type
Details
_id
ObjectId
Auto-generated primary key.
username
String
Unique identifier for the user.
email
String
Unique email address for account validation.
password_hash
String
Encrypted password for user authentication.
created_at
Date
Account creation timestamp.
updated_at
Date
Timestamp of the last account update.
You can create these collections manually in the Back4app dashboard by adding a new class for each and defining the necessary columns.
Create New Class
﻿
Easily set up your database fields by choosing the correct data type, specifying field names, setting default values, and indicating if the field is mandatory.
Create Column
﻿
Employing the Back4app AI Agent for Schema Creation
The Back4app AI Agent simplifies schema generation by letting you describe your data model through prompts. This tool automatically creates collections and fields based on your requirements.
Steps to Use the AI Agent:
Launch the AI Agent:
Open your Back4app dashboard and locate the AI Agent under the project settings.
Describe Your Schema:
Input a detailed prompt that outlines the collections and fields you require.
Review and Confirm:
Examine the generated schema suggestions and apply them to your project.
Sample Prompt
Text
Create the following 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 the following 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 method accelerates the schema creation process and guarantees a consistent structure for your application.
﻿
Step 3 – Activating the Admin Interface & CRUD Functionality
Exploring the Admin Interface
The Back4app Admin App is a robust, no-code solution that enables you to manage your backend data through a user-friendly drag-and-drop interface. This tool simplifies the execution of CRUD operations.
Activating the Admin App
Open the “More” menu in your Back4app dashboard.
Select “Admin App” and then click “Enable Admin App.”
Set up your admin credentials by creating your initial admin account, which also establishes default roles (such as B4aAdminUser) and system collections.
Enable Admin App
﻿
After enabling, sign in to the Admin App to start managing your data.
Admin App Dashboard
﻿
Performing CRUD Operations with the Admin App
Within this interface you can:
Create Entries: Use the “Add Record” option in a collection (e.g., Items) to add new data.
View/Modify Entries: Click on any record to inspect its details or make changes.
Remove Entries: Select the delete option to eliminate data that is no longer needed.
This interface streamlines your data operations, enhancing user experience with its intuitive design.
﻿
Step 4 – Linking Aurelia with Back4app
With your backend configured and managed via the Admin App, it's time to connect your Aurelia frontend to Back4app.
Utilizing REST or GraphQL
You can use REST or GraphQL APIs. For instance, to fetch items via REST:
JS
// Example REST request 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('Items fetched:', data.results);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchItems();
// Example REST request 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('Items fetched:', data.results);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchItems();
﻿
Integrate these API calls within your Aurelia components as necessary.
﻿
Step 5 – Protecting Your Backend
Implementing Access Control Lists (ACLs)
Enhance security by assigning ACLs to your data objects. For instance, to create a private item:
JS
async function createSecureItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Configure ACL: restrict access to the owner only
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

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

  // Configure ACL: restrict access to the owner only
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Secure item created:', savedItem);
  } catch (error) {
    console.error('Error saving secure item:', error);
  }
}
﻿
Setting Class-Level Permissions (CLPs)
Within the Back4app dashboard, adjust the CLPs for each collection to enforce default security rules, ensuring only authenticated or authorized users can access sensitive information.
﻿
Step 6 – Managing User Authentication
Configuring User Accounts
Back4app uses Parse’s User class to handle authentication. In your Aurelia app, you can manage user registration and login as illustrated below:
JS
// src/resources/components/auth.js
import { observable } from 'aurelia-framework';
import Parse from '../../parse-config';

export class Auth {
  @observable username = '';
  @observable password = '';
  @observable email = '';

  async signUp(event) {
    event.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('Registration successful!');
    } catch (error) {
      alert('Registration error: ' + error.message);
    }
  }
}
// src/resources/components/auth.js
import { observable } from 'aurelia-framework';
import Parse from '../../parse-config';

export class Auth {
  @observable username = '';
  @observable password = '';
  @observable email = '';

  async signUp(event) {
    event.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('Registration successful!');
    } catch (error) {
      alert('Registration error: ' + error.message);
    }
  }
}
﻿
A similar pattern can be implemented for login and session management. Additional functionalities, like social login integration, email verification, and password reset, can be configured through the Back4app dashboard.
﻿
Step 7 – Deploying Your Aurelia Frontend via Web Deployment
Back4app’s Web Deployment feature allows you to host your Aurelia application efficiently by deploying code from a GitHub repository. 
In this section, you will prepare your production build, commit your code to GitHub, connect your repository with Web Deployment, and deploy your site.
7.1 Create Your Production Build
Open your project directory in the terminal.
Execute the build command:
Bash
au build --env production
au build --env production
﻿
This command generates a dist folder containing your optimized static assets.
Confirm the Build:
Ensure that the dist folder includes an index.html and the necessary subdirectories for JavaScript, CSS, and images.
﻿
7.2 Organize and Upload Your Project Code
Your GitHub repository should house all source files for your Aurelia frontend. An example structure might be:
Text
Basic-CRUD-App-Aurelia-Frontend/
|-- node_modules/
|-- public/
|   `-- index.html
|-- src/
|   |-- app.js
|   |-- parse-config.js
|   `-- resources/
|       |-- components/
|       |   |-- items-list.js
|       |   `-- auth.js
|-- package.json
`-- README.md
Basic-CRUD-App-Aurelia-Frontend/
|-- node_modules/
|-- public/
|   `-- index.html
|-- src/
|   |-- app.js
|   |-- parse-config.js
|   `-- resources/
|       |-- components/
|       |   |-- items-list.js
|       |   `-- auth.js
|-- package.json
`-- README.md
﻿
Example Files
src/parse-config.js
JS
import Parse from 'parse';

// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
import Parse from 'parse';

// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
src/app.js
JS
import { Aurelia } from 'aurelia-framework';
import environment from './environment';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  aurelia.start().then(() => aurelia.setRoot());
}
import { Aurelia } from 'aurelia-framework';
import environment from './environment';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  aurelia.start().then(() => aurelia.setRoot());
}
﻿
Committing Your Code to GitHub
Initialize Git in your project folder (if not already done):
Bash
git init
git init
﻿
Stage your files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial commit of Aurelia frontend source"
git commit -m "Initial commit of Aurelia frontend source"
﻿
Create a repository on GitHub (e.g., Basic-CRUD-App-Aurelia-Frontend).
Push your code to GitHub:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Aurelia-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Aurelia-Frontend.git
git push -u origin main
﻿
﻿
7.3 Linking Your GitHub Repository with Web Deployment
Access Web Deployment:
Log in to your Back4app dashboard, navigate to your project (Basic-CRUD-App-Aurelia), and select the Web Deployment option.
Connect to GitHub:
Follow the prompts to integrate your GitHub account, granting Back4app access to your repository.
Choose Your Repository and Branch:
Select the repository (e.g., Basic-CRUD-App-Aurelia-Frontend) and the branch (e.g., main) containing your code.
﻿
7.4 Deployment Configuration
Set the following configuration details:
Build Command:
If the dist folder isn't pre-built, specify a command (e.g., au build --env production) for Back4app to execute.
Output Directory:
Set this to dist so Back4app knows where your static files are located.
Environment Variables:
Add any required environment variables (like API keys) in the configuration settings.
﻿
7.5 Containerizing Your Aurelia Application (Docker)
If you prefer Docker deployment, include a Dockerfile in your repository similar to the following:
Dockerfile
# Use an official Node image as the build environment
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

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

# Copy remaining files and build the app
COPY . .
RUN au build --env production

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

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

# Set working directory
WORKDIR /app

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

# Copy remaining files and build the app
COPY . .
RUN au build --env production

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Configure the Docker deployment option in Web Deployment accordingly.
﻿
7.6 Deploying Your Application
Press the Deploy Button:
After configuring deployment, click Deploy.
Monitor the Build Process:
Back4app will fetch your code from GitHub, execute the build command if needed, and deploy your application in a container.
Retrieve Your URL:
Once deployment is complete, Back4app will provide the URL where your Aurelia application is hosted.
﻿
7.7 Verifying Your Deployment
Open the Provided URL:
Visit the URL in your browser to see your live site.
Test the Application:
Ensure that your application loads correctly, routes function as intended, and all assets (CSS, JavaScript, images) are served.
Troubleshoot if Necessary:
Use browser developer tools to diagnose any issues, and review Back4app deployment logs if needed.
﻿
Step 8 – Wrap-Up and Future Directions
Congratulations! You have successfully built a complete CRUD application using Aurelia and Back4app. 
You have set up a project named Basic-CRUD-App-Aurelia, defined comprehensive database schemas for Items and Users, and managed your data using the Back4app Admin App. 
You’ve also integrated your Aurelia frontend with the backend and implemented robust security measures.
Next Steps:
Enhance Your UI:
Expand your Aurelia application with detailed views, search functionalities, and real-time data updates.
Add Advanced Features:
Consider incorporating cloud functions, third-party APIs, or role-based permissions.
Explore Further:
Check out the Back4app documentation and additional Aurelia resources for more in-depth guidance on optimization and customization.
Happy coding and best of luck on your development journey!
Field	Data Type	Details
_id	ObjectId	Auto-generated primary key.
title	String	Name or title of the item.
description	String	A short description of the item.
created_at	Date	Timestamp when the item was created.
updated_at	Date	Timestamp when the item was last modified.
Field	Data Type	Details
_id	ObjectId	Auto-generated primary key.
username	String	Unique identifier for the user.
email	String	Unique email address for account validation.
password_hash	String	Encrypted password for user authentication.
created_at	Date	Account creation timestamp.
updated_at	Date	Timestamp of the last account update.
Updated 22 Feb 2025
Did this page help you?
Back4app Tutorials
How to Create a Basic CRUD App with StencilJS? A Comprehensive Tutorial