Quickstarters
How to Create a Basic CRUD App with StencilJS? A Comprehensive Tutorial

42min
Overview
In this guide, you'll learn how to construct a basic CRUD (create, read, update, and delete) application using StencilJS. 
This tutorial walks you through building a web app that executes essential operations to manage data effectively. We'll start by launching a Back4app project dubbed Basic-CRUD-App-StencilJS, which will serve as your robust backend.
Afterward, you'll design a scalable database by defining collections and fields—either manually or with assistance from the Back4app AI Agent. This step ensures that your database is tailored to support all CRUD operations reliably.
Next, you'll utilize the Back4app Admin App, an intuitive drag and drop interface, to manage your collections seamlessly. This no-code tool simplifies the handling of CRUD actions.
Finally, you'll connect your StencilJS frontend to Back4app via REST/GraphQL APIs. While the Parse SDK is available, we'll focus on API integrations which suit StencilJS perfectly, ensuring your backend remains secure through advanced access controls.
By the end of this tutorial, you'll have a production-ready web application that supports essential CRUD functions along with user authentication and robust data management.
Essential Insights
Master the process of building CRUD apps with a dependable backend system.
Understand how to design a scalable backend and connect it with a StencilJS frontend.
Learn to use a no-code admin tool (the Back4app Admin App) for efficient data operations.
Discover deployment strategies, including Docker containerization, for launching your web application swiftly.
﻿
Prerequisites
Before you get started, make sure you have:
A Back4app account with an active project.
Need assistance? Check out Getting Started with Back4app.
A StencilJS development setup.
Use the official StencilJS documentation to set up your environment. Ensure Node.js (v14 or later) is installed.
Basic knowledge of JavaScript, web components, and REST APIs.
Brush up on StencilJS concepts if necessary.
﻿
Step 1 – Initiate Your Project
Launching a New Back4app Project
Sign in to your Back4app account.
Select the “New App” option from your dashboard.
Name your project: Basic-CRUD-App-StencilJS and follow the on-screen instructions to complete the setup.
Create New Project
﻿
Once set up, your project will be visible on the dashboard, providing a solid base for your backend configuration.
﻿
Step 2 – Crafting Your Database Schema
Defining the Data Model
For this CRUD application, you'll need to set up multiple collections. Below are sample collections along with their fields and data types to help you structure your database for efficient CRUD operations.
1. Collection: Items
This collection holds details for each item.
Field
Data Type
Details
_id
ObjectId
Auto-generated primary key.
title
String
Name or title of the item.
description
String
Brief description of the item.
created_at
Date
Timestamp when the item was created.
updated_at
Date
Timestamp for the last update.
2. Collection: Users
This collection manages user profiles and authentication.
Field
Data Type
Details
_id
ObjectId
Auto-generated unique identifier.
username
String
Unique identifier for the user.
email
String
Unique email address.
password_hash
String
Encrypted password for authentication.
created_at
Date
Account creation timestamp.
updated_at
Date
Last updated timestamp for the user account.
You can add these collections manually in the Back4app dashboard by creating a new class for each and adding columns with appropriate data types.
Create New Class
﻿
Follow the prompts to select a data type, specify a field name, set default values, and mark whether the field is mandatory.
Create Column
﻿
Utilizing the Back4app AI Agent for Schema Creation
The Back4app AI Agent is an innovative tool available within your dashboard that automates the generation of your database schema based on a simple prompt. This feature speeds up project setup and ensures your schema is aligned with your application needs.
How to Leverage the AI Agent:
Access the AI Agent:
Open your Back4app dashboard and find the AI Agent within the menu or under project settings.
Input Your Schema Requirements:
Provide a detailed prompt describing the collections and fields you require.
Review and Confirm:
Once the AI Agent processes your prompt, review 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)
  - 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 method ensures your schema is both consistent and optimized.
﻿
Step 3 – Activating the Admin App & CRUD Functions
Introduction to the Admin App
The Back4app Admin App offers a no-code interface that makes it simple to manage backend data. Its intuitive drag and drop system allows you to perform all CRUD operations—create, read, update, and delete—with ease.
Enabling the Admin App
Open the “More” menu on your Back4app dashboard.
Select “Admin App” and then click on “Enable Admin App.”
Set up your admin credentials by creating an admin user. This process also configures default roles like B4aAdminUser and system collections.
Enable Admin App
﻿
Once activated, sign in to the Admin App to start managing your data.
Admin App Dashboard
﻿
Managing CRUD Actions via the Admin App
Within this interface you can:
Add Records: Click the “Add Record” option within any collection (e.g., Items) to create new entries.
View and Edit Records: Select a record to inspect or modify its fields.
Remove Records: Utilize the delete function to eliminate obsolete records.
This streamlined tool enhances the user experience by simplifying data management tasks.
﻿
Step 4 – Linking StencilJS with Back4app
With your backend configured and managed through the Admin App, the next step is to connect your StencilJS frontend to Back4app.
Option A: Employing REST or GraphQL APIs
For StencilJS we'll focus on API integrations to keep things simple.
Example: Fetching Data via REST
JS
// Example REST API call to retrieve items
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();
    console.log('Items retrieved:', data.results);
  } catch (error) {
    console.error('Error retrieving items:', error);
  }
};
fetchItems();
// Example REST API call to retrieve items
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();
    console.log('Items retrieved:', data.results);
  } catch (error) {
    console.error('Error retrieving items:', error);
  }
};
fetchItems();
﻿
Integrate these API calls into your StencilJS components as needed.
Option B: Utilizing the Parse SDK (if desired)
If you prefer to use the Parse SDK, you can still integrate it within your StencilJS project since it’s a JavaScript library. However, our example here focuses on API calls.
﻿
Step 5 – Fortifying Your Backend
Implementing Access Control Lists (ACLs)
Ensure data security by setting ACLs on your objects. For example, 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);

  // Define ACL: restrict read/write access to the owner
  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 creating 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);

  // Define ACL: restrict read/write access to the owner
  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 creating item:', error);
  }
}
﻿
Configuring Class-Level Permissions (CLPs)
Within the Back4app dashboard, set CLPs for each collection to ensure that only authorized users can access sensitive data.
﻿
Step 6 – Managing User Authentication
Establishing User Accounts
Back4app uses Parse’s User class for managing authentication. In your StencilJS project, implement user registration and login as follows:
JS
// Example component for user signup
import { Component, h, State } from '@stencil/core';
import Parse from './parseConfig';

@Component({
  tag: 'app-auth',
  styleUrl: 'app-auth.css',
  shadow: true,
})
export class AppAuth {
  @State() username: string = '';
  @State() password: string = '';
  @State() email: string = '';

  async handleSignUp(event: 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('User registered successfully!');
    } catch (error) {
      alert('Registration error: ' + error.message);
    }
  }

  render() {
    return (
      <form onSubmit={(e) => this.handleSignUp(e)}>
        <input type="text" placeholder="Username" value={this.username} onInput={(e: any) => this.username = e.target.value} />
        <input type="password" placeholder="Password" value={this.password} onInput={(e: any) => this.password = e.target.value} />
        <input type="email" placeholder="Email" value={this.email} onInput={(e: any) => this.email = e.target.value} />
        <button type="submit">Register</button>
      </form>
    );
  }
}
// Example component for user signup
import { Component, h, State } from '@stencil/core';
import Parse from './parseConfig';

@Component({
  tag: 'app-auth',
  styleUrl: 'app-auth.css',
  shadow: true,
})
export class AppAuth {
  @State() username: string = '';
  @State() password: string = '';
  @State() email: string = '';

  async handleSignUp(event: 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('User registered successfully!');
    } catch (error) {
      alert('Registration error: ' + error.message);
    }
  }

  render() {
    return (
      <form onSubmit={(e) => this.handleSignUp(e)}>
        <input type="text" placeholder="Username" value={this.username} onInput={(e: any) => this.username = e.target.value} />
        <input type="password" placeholder="Password" value={this.password} onInput={(e: any) => this.password = e.target.value} />
        <input type="email" placeholder="Email" value={this.email} onInput={(e: any) => this.email = e.target.value} />
        <button type="submit">Register</button>
      </form>
    );
  }
}
﻿
A similar structure can be applied for login and session management. You can also enable features like social logins, email verification, and password resets directly from the Back4app dashboard.
﻿
Step 7 – Launching Your StencilJS Frontend with Web Deployment
Back4app’s Web Deployment feature allows you to host your StencilJS application by deploying code directly from a GitHub repository.
7.1 Building Your Production Bundle
Open your project directory in a terminal.
Execute the build command:
Bash
npm run build
npm run build
﻿
This produces a www folder containing optimized static assets.
Confirm the Build:
Ensure the www folder includes an index.html along with necessary CSS, JS, and image files.
﻿
7.2 Organizing and Uploading Your Source Code
Your repository should encompass all the source files for your StencilJS application. An example structure might be:
Text
Basic-CRUD-App-StencilJS-Frontend/
├── node_modules/
├── www/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── app-auth.tsx
│   │   └── app-items.tsx
│   ├── global/
│   └── parseConfig.ts
├── stencil.config.ts
├── package.json
└── README.md
Basic-CRUD-App-StencilJS-Frontend/
├── node_modules/
├── www/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── app-auth.tsx
│   │   └── app-items.tsx
│   ├── global/
│   └── parseConfig.ts
├── stencil.config.ts
├── package.json
└── README.md
﻿
Example Source File: src/parseConfig.ts
TypeScript
// src/parseConfig.ts
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/parseConfig.ts
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;
﻿
Example Source File: src/components/app-items.tsx
Text
import { Component, h, State } from '@stencil/core';
import Parse from '../parseConfig';

@Component({
  tag: 'app-items',
  styleUrl: 'app-items.css',
  shadow: true,
})
export class AppItems {
  @State() items: any[] = [];
  @State() newTitle: string = '';
  @State() newDescription: string = '';
  @State() editingId: string | null = null;
  @State() editingTitle: string = '';
  @State() editingDescription: string = '';

  async componentWillLoad() {
    await this.loadItems();
  }

  async loadItems() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      this.items = results;
    } catch (error) {
      console.error('Error fetching items:', error);
    }
  }

  async addItem() {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", this.newTitle);
    item.set("description", this.newDescription);

    try {
      await item.save();
      this.newTitle = '';
      this.newDescription = '';
      this.loadItems();
    } catch (error) {
      console.error('Error adding item:', error);
    }
  }

  async deleteItem(id: string) {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      this.loadItems();
    } catch (error) {
      console.error('Error deleting item:', error);
    }
  }

  startEdit(item: any) {
    this.editingId = item.id;
    this.editingTitle = item.get("title");
    this.editingDescription = item.get("description");
  }

  async updateItem() {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = this.editingId!;
      item.set("title", this.editingTitle);
      item.set("description", this.editingDescription);
      await item.save();
      this.editingId = null;
      this.editingTitle = '';
      this.editingDescription = '';
      this.loadItems();
    } catch (error) {
      console.error('Error updating item:', error);
    }
  }

  render() {
    return (
      <div style={{ padding: '2rem' }}>
        <h1>Items</h1>
        <div>
          <h2>Add New Item</h2>
          <input type="text" placeholder="Title" value={this.newTitle} onInput={(e: any) => this.newTitle = e.target.value} />
          <input type="text" placeholder="Description" value={this.newDescription} onInput={(e: any) => this.newDescription = e.target.value} />
          <button onClick={() => this.addItem()}>Add Item</button>
        </div>
        <ul>
          {this.items.map(item =>
            <li key={item.id}>
              {this.editingId === item.id ? (
                <div>
                  <input type="text" value={this.editingTitle} onInput={(e: any) => this.editingTitle = e.target.value} />
                  <input type="text" value={this.editingDescription} onInput={(e: any) => this.editingDescription = e.target.value} />
                  <button onClick={() => this.updateItem()}>Save</button>
                  <button onClick={() => this.editingId = null}>Cancel</button>
                </div>
              ) : (
                <div>
                  <strong>{item.get("title")}</strong> - {item.get("description")}
                  <button onClick={() => this.startEdit(item)}>Edit</button>
                  <button onClick={() => this.deleteItem(item.id)}>Delete</button>
                </div>
              )}
            </li>
          )}
        </ul>
      </div>
    );
  }
}
import { Component, h, State } from '@stencil/core';
import Parse from '../parseConfig';

@Component({
  tag: 'app-items',
  styleUrl: 'app-items.css',
  shadow: true,
})
export class AppItems {
  @State() items: any[] = [];
  @State() newTitle: string = '';
  @State() newDescription: string = '';
  @State() editingId: string | null = null;
  @State() editingTitle: string = '';
  @State() editingDescription: string = '';

  async componentWillLoad() {
    await this.loadItems();
  }

  async loadItems() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      this.items = results;
    } catch (error) {
      console.error('Error fetching items:', error);
    }
  }

  async addItem() {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", this.newTitle);
    item.set("description", this.newDescription);

    try {
      await item.save();
      this.newTitle = '';
      this.newDescription = '';
      this.loadItems();
    } catch (error) {
      console.error('Error adding item:', error);
    }
  }

  async deleteItem(id: string) {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      this.loadItems();
    } catch (error) {
      console.error('Error deleting item:', error);
    }
  }

  startEdit(item: any) {
    this.editingId = item.id;
    this.editingTitle = item.get("title");
    this.editingDescription = item.get("description");
  }

  async updateItem() {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = this.editingId!;
      item.set("title", this.editingTitle);
      item.set("description", this.editingDescription);
      await item.save();
      this.editingId = null;
      this.editingTitle = '';
      this.editingDescription = '';
      this.loadItems();
    } catch (error) {
      console.error('Error updating item:', error);
    }
  }

  render() {
    return (
      <div style={{ padding: '2rem' }}>
        <h1>Items</h1>
        <div>
          <h2>Add New Item</h2>
          <input type="text" placeholder="Title" value={this.newTitle} onInput={(e: any) => this.newTitle = e.target.value} />
          <input type="text" placeholder="Description" value={this.newDescription} onInput={(e: any) => this.newDescription = e.target.value} />
          <button onClick={() => this.addItem()}>Add Item</button>
        </div>
        <ul>
          {this.items.map(item =>
            <li key={item.id}>
              {this.editingId === item.id ? (
                <div>
                  <input type="text" value={this.editingTitle} onInput={(e: any) => this.editingTitle = e.target.value} />
                  <input type="text" value={this.editingDescription} onInput={(e: any) => this.editingDescription = e.target.value} />
                  <button onClick={() => this.updateItem()}>Save</button>
                  <button onClick={() => this.editingId = null}>Cancel</button>
                </div>
              ) : (
                <div>
                  <strong>{item.get("title")}</strong> - {item.get("description")}
                  <button onClick={() => this.startEdit(item)}>Edit</button>
                  <button onClick={() => this.deleteItem(item.id)}>Delete</button>
                </div>
              )}
            </li>
          )}
        </ul>
      </div>
    );
  }
}
﻿
Committing Your Code to GitHub
Initialize a Git repository in your project directory (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 StencilJS frontend code"
git commit -m "Initial commit of StencilJS frontend code"
﻿
Create a new GitHub repository:
Name it something like Basic-CRUD-App-StencilJS-Frontend.
Push your code to GitHub:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-StencilJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-StencilJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 Connecting Your Repository via Web Deployment
Access Web Deployment:
Log into your Back4app dashboard, select your project (Basic-CRUD-App-StencilJS), and click on the Web Deployment section.
Integrate GitHub:
Connect your GitHub account following the provided instructions. This will enable Back4app to access your repository.
Select the Repository and Branch:
Choose your repository (e.g., Basic-CRUD-App-StencilJS-Frontend) and pick the appropriate branch (e.g., main).
﻿
7.4 Setting Up Your Deployment
Enter additional deployment details:
Build Command:
If your repository doesn’t include a pre-built www folder, specify a build command (e.g., npm run build). Back4app will execute this during deployment.
Output Directory:
Set the output directory to www so that Back4app knows where to locate your static files.
Environment Variables:
Add any required environment variables (e.g., API keys) in the deployment settings.
﻿
7.5 Containerizing Your StencilJS Project with Docker
If you favor Docker for deployment, include a Dockerfile in your repository similar to:
Dockerfile
# Use an official Node image to build the app
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

# Copy dependency files
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy source code
COPY . .

# Build the app
RUN npm run build

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

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

# Set working directory
WORKDIR /app

# Copy dependency files
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy source code
COPY . .

# Build the app
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Include this file in your repo and choose Docker deployment in Back4app.
﻿
7.6 Deploying Your Application
Initiate Deployment:
Click the Deploy button after configuring your settings.
Watch the Build Process:
Back4app will fetch your code from GitHub, run the build command (if set), and deploy your containerized application.
Access Your Application:
Once deployed, Back4app will provide a URL where your StencilJS app is live.
﻿
7.7 Validating Your Deployment
Visit the URL:
Open the provided URL in your web browser.
Test Functionality:
Ensure the application loads properly, routes work correctly, and all assets (CSS, JS, images) are served without issues.
Debug if Necessary:
Use browser developer tools to inspect any errors. Check Back4app logs and verify GitHub and build configurations if issues occur.
﻿
Step 8 – Summary and Future Directions
Well done! You have successfully built a complete CRUD application using StencilJS and Back4app. 
You set up a project titled Basic-CRUD-App-StencilJS, designed collections for Items and Users, and managed data with the Admin App. 
Additionally, you connected your StencilJS frontend to your backend and implemented robust security measures.
Next Steps:
Enhance the Frontend:
Consider expanding your StencilJS app with advanced features such as detailed item views, search capabilities, and real-time notifications.
Add More Functionalities:
Integrate complex backend logic (e.g., Cloud Functions), third-party API integrations, or implement role-based permissions.
Deepen Your Knowledge:
Explore the Back4app documentation and other tutorials for further insights into performance tuning and custom integrations.
By following this tutorial, you've acquired the skills needed to create a robus
Field	Data Type	Details
_id	ObjectId	Auto-generated primary key.
title	String	Name or title of the item.
description	String	Brief description of the item.
created_at	Date	Timestamp when the item was created.
updated_at	Date	Timestamp for the last update.
Field	Data Type	Details
_id	ObjectId	Auto-generated unique identifier.
username	String	Unique identifier for the user.
email	String	Unique email address.
password_hash	String	Encrypted password for authentication.
created_at	Date	Account creation timestamp.
updated_at	Date	Last updated timestamp for the user account.
Updated 22 Feb 2025
Did this page help you?
How to Build a CRUD Application with Aurelia? A Comprehensive Tutorial
How to Create a Basic CRUD App with Preact?