Quickstarters
Building a Basic CRUD Application with Lit?

42min
Overview
In this guide, you will create a fully functioning CRUD (create, read, update, delete) application using Lit. 
We will demonstrate how to manage data dynamically by building an application that performs these essential operations. Initially, you'll set up a Back4app project called Basic-CRUD-App-Lit that serves as your robust backend.
After establishing 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 is crucial for ensuring that your system reliably handles CRUD operations.
Next, you'll utilize the Back4app Admin App—a user-friendly, drag-and-drop interface—to manage your collections efficiently. 
Finally, you'll integrate your Lit frontend with Back4app using REST/GraphQL , ensuring that your backend remains secure with proper access controls.
By the end of this tutorial, you'll have a production-ready web application that not only performs basic CRUD functions but also includes user authentication and secure data handling.
Key Points
Master the development of CRUD applications that effectively manage data with a dependable backend.
Learn to design a scalable database and seamlessly integrate it with a Lit-based frontend.
Utilize a drag-and-drop admin tool (the Back4app Admin App) to simplify CRUD operations.
Understand deployment strategies, including containerization with Docker, to launch your web application efficiently.
﻿
Prerequisites
Before starting, make sure you have:
A Back4app account with a new project.
For assistance, see Getting Started with Back4app.
A Lit development environment.
Set up your project using your preferred starter kit and ensure Node.js (v14 or later) is installed.
Basic knowledge of JavaScript, Lit, and REST APIs.
Consult the Lit documentation if needed.
﻿
Step 1 – Initializing Your Project
Establishing a New Back4app Project
Sign in to your Back4app account.
Select the “New App” option from your dashboard.
Name your project: Basic-CRUD-App-Lit and follow the instructions to create it.
Create New Project
﻿
Once your project is created, it will appear on the dashboard, providing you with the foundation for backend configuration and project management.
﻿
Step 2 – Crafting Your Database Schema
Constructing Your Data Model
For this CRUD application, you'll define several collections. Below are example collections with suggested fields and data types, which will help you set up an effective schema capable of handling CRUD operations.
1. Items Collection
Field
Data Type
Details
_id
ObjectId
Auto-generated primary key.
title
String
Name of the item.
description
String
Brief details about 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
User's unique email address.
password_hash
String
Hashed password for secure authentication.
created_at
Date
Timestamp for account creation.
updated_at
Date
Timestamp for the latest account update.
You can add these collections manually through the Back4app dashboard by creating new classes and defining the appropriate columns.
Create New Class
﻿
For each field, simply choose a data type, assign a name, set a default value if needed, and specify whether it’s mandatory.
Create Column
﻿
﻿
Utilizing the Back4app AI Agent for Schema Creation
The Back4app AI Agent, available from your dashboard, can automatically generate your schema based on a descriptive prompt. This feature streamlines project management by ensuring consistency in your backend setup.
How to Use the AI Agent:
Launch the AI Agent:
Navigate to the AI Agent from your Back4app dashboard or within project settings.
Detail Your Data Model:
Paste a comprehensive prompt describing the collections and fields you require.
Review and Apply:
Inspect the generated suggestions and confirm them to update your project.
Sample Prompt
Text
Create the following collections in my Back4app application:

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 the following collections in my Back4app application:

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)
﻿
Using this AI feature saves valuable time while ensuring that your database is structured optimally.
﻿
Step 3 – Activating the Admin App & CRUD Functionalities
Introduction to the Admin App
The Back4app Admin App offers a no-code interface for effortless backend data management. Its intuitive drag-and-drop functionality allows you to execute CRUD operations—create, read, update, and delete records—with ease.
How to Enable the Admin App
Access the “More” section on your Back4app dashboard.
Select “Admin App” and click “Enable Admin App.”
Set up your admin credentials by creating an initial admin user, which will configure roles (such as B4aAdminUser) and system collections.
Enable Admin App
﻿
After activation, log into the Admin App to manage your collections.
Admin App Dashboard
﻿
Performing CRUD Operations via the Admin App
Inside the Admin App, you can:
Create Entries:
Click the “Add Record” button within a collection (e.g., Items) to generate new entries.
Read/Modify Records:
Click on a record to inspect its details or modify its fields.
Remove Records:
Use the delete function to eliminate entries that are no longer needed.
This straightforward interface significantly improves the user experience by streamlining data management.
﻿
Step 4 – Connecting Lit with Back4app
Now that your backend is configured and managed, it's time to integrate your Lit frontend with Back4app.
Option A: Using the Parse SDK (When Applicable)
Install the Parse SDK:
Bash
npm install parse
npm install parse
﻿
Set Up Parse in Your Lit App:
Create a configuration file (e.g., src/parseConfig.js):
JS
// src/parseConfig.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;
// src/parseConfig.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;
﻿
Implement Parse in a Lit Component:
Create a Lit component that retrieves and displays items:
JS
// src/components/ItemsList.js
import { LitElement, html, css } from 'lit';
import Parse from '../parseConfig';

class ItemsList extends LitElement {
  static properties = { items: { type: Array } };

  constructor() {
    super();
    this.items = [];
  }

  connectedCallback() {
    super.connectedCallback();
    this.fetchItems();
  }

  async fetchItems() {
    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);
    }
  }

  render() {
    return html`
      <h2>Items</h2>
      <ul>
        ${this.items.map(
          (item) => html`
            <li>${item.get("title")} — ${item.get("description")}</li>
          `
        )}
      </ul>
    `;
  }
}

customElements.define('items-list', ItemsList);
export default ItemsList;
// src/components/ItemsList.js
import { LitElement, html, css } from 'lit';
import Parse from '../parseConfig';

class ItemsList extends LitElement {
  static properties = { items: { type: Array } };

  constructor() {
    super();
    this.items = [];
  }

  connectedCallback() {
    super.connectedCallback();
    this.fetchItems();
  }

  async fetchItems() {
    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);
    }
  }

  render() {
    return html`
      <h2>Items</h2>
      <ul>
        ${this.items.map(
          (item) => html`
            <li>${item.get("title")} — ${item.get("description")}</li>
          `
        )}
      </ul>
    `;
  }
}

customElements.define('items-list', ItemsList);
export default ItemsList;
﻿
Option B: Utilizing REST or GraphQL
If the Parse SDK isn’t suitable for your project, perform CRUD operations using REST or GraphQL. For instance, to retrieve items via REST:
JS
// Example REST request to get 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 fetching items:', error);
  }
};
fetchItems();
// Example REST request to get 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 fetching items:', error);
  }
};
fetchItems();
﻿
Integrate these API calls within your Lit components as needed.
﻿
Step 5 – Protecting Your Backend
Implementing Access Control Lists (ACLs)
Secure your objects by setting ACLs. For example, to create a private item:
JS
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL so only the owner has access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

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

  // Set ACL so only the owner has access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
﻿
Configuring Class-Level Permissions (CLPs)
Within the Back4app dashboard, adjust the CLPs for each collection to enforce default access rules. This ensures that only authenticated or authorized users can access sensitive information.
﻿
Step 6 – Implementing User Authentication
Creating User Accounts
Back4app utilizes Parse’s User class to manage authentication. In your Lit application, implement user registration and login as demonstrated below:
JS
// src/components/Auth.js
import { LitElement, html, css } from 'lit';
import Parse from '../parseConfig';

class SignUpForm extends LitElement {
  static properties = { username: { type: String }, password: { type: String }, email: { type: String } };

  constructor() {
    super();
    this.username = '';
    this.password = '';
    this.email = '';
  }

  async handleSignUp(e) {
    e.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 registration successful!');
    } catch (error) {
      alert('Registration error: ' + error.message);
    }
  }

  render() {
    return html`
      <form @submit="${this.handleSignUp}">
        <input type="text" placeholder="Username" .value="${this.username}" @input="${e => this.username = e.target.value}" />
        <input type="password" placeholder="Password" .value="${this.password}" @input="${e => this.password = e.target.value}" />
        <input type="email" placeholder="Email" .value="${this.email}" @input="${e => this.email = e.target.value}" />
        <button type="submit">Register</button>
      </form>
    `;
  }
}

customElements.define('sign-up-form', SignUpForm);
export default SignUpForm;
// src/components/Auth.js
import { LitElement, html, css } from 'lit';
import Parse from '../parseConfig';

class SignUpForm extends LitElement {
  static properties = { username: { type: String }, password: { type: String }, email: { type: String } };

  constructor() {
    super();
    this.username = '';
    this.password = '';
    this.email = '';
  }

  async handleSignUp(e) {
    e.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 registration successful!');
    } catch (error) {
      alert('Registration error: ' + error.message);
    }
  }

  render() {
    return html`
      <form @submit="${this.handleSignUp}">
        <input type="text" placeholder="Username" .value="${this.username}" @input="${e => this.username = e.target.value}" />
        <input type="password" placeholder="Password" .value="${this.password}" @input="${e => this.password = e.target.value}" />
        <input type="email" placeholder="Email" .value="${this.email}" @input="${e => this.email = e.target.value}" />
        <button type="submit">Register</button>
      </form>
    `;
  }
}

customElements.define('sign-up-form', SignUpForm);
export default SignUpForm;
﻿
You can similarly implement login and session management. Additional features like social authentication, email verification, and password resets can be set up via the Back4app dashboard.
﻿
Step 7 – Deploying Your Lit Frontend via Web Deployment
Back4app’s Web Deployment feature allows you to host your Lit application by deploying code from a GitHub repository. Follow these steps to prepare your production build, push your code to GitHub, and deploy your site.
7.1 Creating Your Production Build
Open your project directory in a terminal.
Run the build command:
Bash
npm run build
npm run build
﻿
This will create a build folder containing optimized static assets.
Check the Build:
Confirm that the build folder includes an index.html file along with necessary subdirectories.
﻿
7.2 Organizing and Uploading Your Code
Your GitHub repository should house the complete source code for your Lit frontend. A typical project structure might look like:
Text
Basic-CRUD-App-Lit-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
Basic-CRUD-App-Lit-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
﻿
Example Configuration File
src/parseConfig.js
JS
import Parse from 'parse';

// Insert your actual 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 actual Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Example Main Application File
src/App.js
JS
import { LitElement, html } from 'lit';
import Parse from './parseConfig';

class AppRoot extends LitElement {
  static properties = { items: { type: Array }, newTitle: { type: String }, newDescription: { type: String } };

  constructor() {
    super();
    this.items = [];
    this.newTitle = '';
    this.newDescription = '';
  }

  connectedCallback() {
    super.connectedCallback();
    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("Failed to load 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);
    }
  }

  render() {
    return html`
      <div style="padding: 2rem;">
        <h1>Items</h1>
        <div>
          <input type="text" placeholder="Title" .value="${this.newTitle}" @input="${e => this.newTitle = e.target.value}" />
          <input type="text" placeholder="Description" .value="${this.newDescription}" @input="${e => this.newDescription = e.target.value}" />
          <button @click="${this.addItem}">Add Item</button>
        </div>
        <ul>
          ${this.items.map(item => html`
            <li>
              <strong>${item.get("title")}</strong> - ${item.get("description")}
            </li>
          `)}
        </ul>
      </div>
    `;
  }
}

customElements.define('app-root', AppRoot);
export default AppRoot;
import { LitElement, html } from 'lit';
import Parse from './parseConfig';

class AppRoot extends LitElement {
  static properties = { items: { type: Array }, newTitle: { type: String }, newDescription: { type: String } };

  constructor() {
    super();
    this.items = [];
    this.newTitle = '';
    this.newDescription = '';
  }

  connectedCallback() {
    super.connectedCallback();
    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("Failed to load 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);
    }
  }

  render() {
    return html`
      <div style="padding: 2rem;">
        <h1>Items</h1>
        <div>
          <input type="text" placeholder="Title" .value="${this.newTitle}" @input="${e => this.newTitle = e.target.value}" />
          <input type="text" placeholder="Description" .value="${this.newDescription}" @input="${e => this.newDescription = e.target.value}" />
          <button @click="${this.addItem}">Add Item</button>
        </div>
        <ul>
          ${this.items.map(item => html`
            <li>
              <strong>${item.get("title")}</strong> - ${item.get("description")}
            </li>
          `)}
        </ul>
      </div>
    `;
  }
}

customElements.define('app-root', AppRoot);
export default AppRoot;
﻿
Pushing Code to GitHub
Initialize Git in your project directory:
Bash
git init
git init
﻿
Add all your files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial Lit frontend commit"
git commit -m "Initial Lit frontend commit"
﻿
Create a new repository on GitHub (e.g., Basic-CRUD-App-Lit-Frontend).
Push your code:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Lit-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Lit-Frontend.git
git push -u origin main
﻿
﻿
7.3 Connecting Your GitHub Repository with Back4app Web Deployment
Access Web Deployment:
Log into your Back4app dashboard, choose your project (Basic-CRUD-App-Lit), and select the Web Deployment option.
Link Your GitHub Account:
Follow the prompts to connect your GitHub account, allowing Back4app to access your repository.
Choose Your Repository and Branch:
Select the repository (e.g., Basic-CRUD-App-Lit-Frontend) and the branch (e.g., main) containing your Lit code.
﻿
7.4 Configuring Deployment Settings
Specify your build settings:
Build Command:
If a pre-built build folder is missing, use a command like npm run build. Back4app will execute this command during deployment.
Output Directory:
Set this to build so Back4app can locate your static files.
Environment Variables:
Include any necessary API keys or other environment-specific values.
﻿
7.5 Containerizing Your Lit Application with Docker
If you prefer Docker, include a Dockerfile in your repository:
Dockerfile
# Use a lightweight Node image for building the app
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

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

# Copy remaining source code and build the app
COPY . .
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use a lightweight Node image for building the app
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

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

# Copy remaining source code and build the app
COPY . .
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
In your Back4app deployment settings, choose the Docker deployment option to containerize your app.
﻿
7.6 Launching Your Application
Initiate the Deployment:
Click the Deploy button after finalizing your settings.
Monitor the Process:
Back4app will fetch your GitHub code, run the build command, and deploy your container.
Get Your Live URL:
Once deployment finishes, a URL will be provided where your Lit application is hosted.
﻿
7.7 Validating Your Deployment
Visit the URL:
Open the provided link in your browser.
Test Functionality:
Ensure that the application loads properly, navigation works, and all assets are correctly served.
Debug if Necessary:
Use browser developer tools to inspect any issues. If problems arise, review the deployment logs in Back4app.
﻿
Step 8 – Final Thoughts and Future Enhancements
Great work! You have successfully developed a basic CRUD application using Lit and Back4app. 
You set up a project called Basic-CRUD-App-Lit, defined a detailed database schema for Items and Users, and managed your data with the Admin App. 
Furthermore, you integrated your Lit frontend with the backend and implemented robust security measures.
Next Steps:
Improve Your Frontend:
Add features like detailed item pages, search functionality, and real-time updates.
Expand Backend Capabilities:
Integrate advanced functionalities such as Cloud Functions, external API services, or role-based access controls.
Explore More Resources:
Visit the Back4app documentation and other tutorials for deeper insights into performance and customization.
By following this guide, you now possess the skills to create a scalable, secure CRUD backend for your Lit application using Back4app. Enjoy coding and keep innovating!
Field	Data Type	Details
_id	ObjectId	Auto-generated primary key.
title	String	Name of the item.
description	String	Brief details about 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	User's unique email address.
password_hash	String	Hashed password for secure authentication.
created_at	Date	Timestamp for account creation.
updated_at	Date	Timestamp for the latest account update.
Updated 25 Feb 2025
Did this page help you?
Building a CRUD Application with Qwik: A Comprehensive Tutorial
How to Create a CRUD Application with Koa.js?