Quickstarters
How to Create a CRUD Application with Svelte?

33min
Overview
In this walkthrough, you'll learn how to build a complete CRUD (create, read, update, delete) app using Svelte. 
We’ll utilize Back4app as our backend platform, which offers a robust low-code backend  to manage your app’s data. 
This guide explains how to set up a Back4app project, design a versatile data schema, and implement CRUD operations within a Svelte application.
Initially, you will create a Back4app project titled Basic-CRUD-App-Svelte. This project forms the basis of your backend setup, where you'll define your data schema either manually or with the help of Back4app’s integrated AI Agent.
Next, you'll explore the Back4app Admin App—a user-friendly interface for data management—allowing you to easily perform CRUD operations. 
Finally, you will connect your Svelte application to Back4app, making use of either the Parse JavaScript SDK or direct REST/GraphQL API calls, while ensuring secure data handling.
By the end of this tutorial, you’ll have a fully functional Svelte application that performs basic CRUD tasks along with secure user authentication.
What You Will Learn
How to set up a Svelte-based CRUD application with a flexible backend. 
Methods to organize your backend and connect it to your Svelte app.
How to leverage the Back4app Admin App for seamless data operations.
Strategies for deploying your Svelte application, including Docker containerization.
﻿
Prerequisites
Before you begin, ensure you have:
A Back4app account with an active project.
Need help? Visit Back4app Getting Started for guidance.
A Svelte development setup.
You can use a code editor like VSCode and ensure Node.js is installed.
Basic familiarity with Svelte, JavaScript, and REST APIs.
Review the Svelte documentation if needed.
﻿
Step 1 – Setting Up Your Project
Launching a New Back4app Project
Log into your Back4app account.
Hit the “New App” button on your dashboard.
Name your project: Basic-CRUD-App-Svelte and follow the on-screen instructions to complete the setup.
Create New Project
﻿
After creating your project, you’ll see it on your dashboard, which serves as the foundation for configuring your backend.
﻿
Step 2 – Crafting the Data Schema
Structuring Your Data
For this CRUD application, you need to define a few collections in your Back4app project. Below are examples of the key collections and fields necessary to support your Svelte CRUD operations.
1. Items Collection
This collection stores information for each item.
Field
Type
Details
_id
ObjectId
Auto-generated unique identifier.
title
String
Name or title of the item.
description
String
Brief description of the item.
createdAt
Date
Timestamp when the item was created.
updatedAt
Date
Timestamp for the last update to the item.
2. Users Collection
This collection manages user credentials and authentication details.
Field
Type
Details
_id
ObjectId
Auto-generated unique identifier.
username
String
Unique username for each user.
email
String
User’s email address.
passwordHash
String
Encrypted password for authentication.
createdAt
Date
Account creation timestamp.
updatedAt
Date
Timestamp for the last account update.
You can create these collections and define fields directly from your Back4app dashboard.
Create New Class
﻿
You can add fields by choosing the appropriate type, naming the field, setting default values, and marking it as required.
Create Column
﻿
Using the Back4app AI Agent for Quick Schema Generation
The integrated AI Agent in Back4app can automatically set up your data schema based on a simple description. This tool streamlines the setup process and ensures that your schema is optimized for CRUD operations.
How to Utilize the AI Agent:
Open the AI Agent:
In your project settings on the Back4app dashboard, find the AI Agent.
Detail Your Schema Requirements:
Provide a clear prompt that outlines the collections and fields you need.
Review and Confirm:
Check the proposed schema and confirm to apply it.
Example Prompt
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
This method saves time and ensures your backend schema is perfectly aligned with your app’s needs.
﻿
Step 3 – Managing Data with the Admin App
Overview of the Admin App
The Back4app Admin App offers a no-code environment for managing your backend data. With its drag-and-drop interface, you can easily perform operations like adding, editing, and deleting records.
Activating the Admin App
Go to the “More” menu in your Back4app dashboard.
Select “Admin App” and then click on “Enable Admin App.”
Set up your admin account by following the prompts to establish your credentials. This process will also set up roles (like B4aAdminUser) and other system configurations.
Enable Admin App
﻿
Once enabled, log in to the Admin App to manage your project’s data effectively.
Admin App Dashboard
﻿
How to Use the Admin App
Insert New Records:
Use the “Add Record” feature in a collection (like Items) to introduce new data.
Examine or Edit Records:
Click on a record to view its details or modify its fields.
Delete Records:
Remove outdated or unnecessary data entries.
This intuitive interface makes managing your backend data straightforward and efficient.
﻿
Step 4 – Connecting Your Svelte App to Back4app
Now that your backend is set up, it’s time to link your Svelte application to Back4app.
Option A: Using the Parse JavaScript SDK
Install the SDK:
Use npm or yarn to install the Parse JavaScript SDK:
Bash
npm install parse
npm install parse
﻿
Initialize Parse in Your Svelte App:
In your main JavaScript file (e.g., src/main.js), initialize Parse:
JS
// src/main.js
import Parse from 'parse';

Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';

// Your Svelte app initialization code follows...
// src/main.js
import Parse from 'parse';

Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';

// Your Svelte app initialization code follows...
﻿
Implement CRUD Functions:
Create a module (for example, src/services/items.js) to handle CRUD operations:
JS
// src/services/items.js
import Parse from 'parse';

export async function fetchItems() {
  const query = new Parse.Query("Items");
  try {
    const results = await query.find();
    return results;
  } catch (error) {
    console.error("Error fetching items:", error);
    return [];
  }
}

export async function addItem(title, description) {
  const Item = Parse.Object.extend("Items");
  const item = new Item();
  item.set("title", title);
  item.set("description", description);

  try {
    await item.save();
    console.log("Item successfully created!");
  } catch (error) {
    console.error("Error creating item:", error);
  }
}

export async function updateItem(objectId, newTitle, newDescription) {
  const query = new Parse.Query("Items");
  try {
    const item = await query.get(objectId);
    item.set("title", newTitle);
    item.set("description", newDescription);
    await item.save();
    console.log("Item updated successfully!");
  } catch (error) {
    console.error("Error updating item:", error);
  }
}

export async function removeItem(objectId) {
  const query = new Parse.Query("Items");
  try {
    const item = await query.get(objectId);
    await item.destroy();
    console.log("Item deleted successfully!");
  } catch (error) {
    console.error("Error deleting item:", error);
  }
}
// src/services/items.js
import Parse from 'parse';

export async function fetchItems() {
  const query = new Parse.Query("Items");
  try {
    const results = await query.find();
    return results;
  } catch (error) {
    console.error("Error fetching items:", error);
    return [];
  }
}

export async function addItem(title, description) {
  const Item = Parse.Object.extend("Items");
  const item = new Item();
  item.set("title", title);
  item.set("description", description);

  try {
    await item.save();
    console.log("Item successfully created!");
  } catch (error) {
    console.error("Error creating item:", error);
  }
}

export async function updateItem(objectId, newTitle, newDescription) {
  const query = new Parse.Query("Items");
  try {
    const item = await query.get(objectId);
    item.set("title", newTitle);
    item.set("description", newDescription);
    await item.save();
    console.log("Item updated successfully!");
  } catch (error) {
    console.error("Error updating item:", error);
  }
}

export async function removeItem(objectId) {
  const query = new Parse.Query("Items");
  try {
    const item = await query.get(objectId);
    await item.destroy();
    console.log("Item deleted successfully!");
  } catch (error) {
    console.error("Error deleting item:", error);
  }
}
﻿
Option B: Using REST/GraphQL APIs
If the Parse SDK is not ideal for your use case, you can directly invoke Back4app’s REST or GraphQL endpoints. For instance, to retrieve items via REST:
JS
export async function getItemsREST() {
  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();
    return data.results;
  } catch (error) {
    console.error("REST error fetching items:", error);
    return [];
  }
}
export async function getItemsREST() {
  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();
    return data.results;
  } catch (error) {
    console.error("REST error fetching items:", error);
    return [];
  }
}
﻿
Integrate these API calls within your Svelte components as needed.
﻿
Step 5 – Securing Your Backend
Using Access Control Lists (ACLs)
Enhance the security of your data by setting up ACLs on your objects. For example, to create an item visible only to its owner:
JS
import Parse from 'parse';

export async function createPrivateItem(title, description, owner) {
  const Item = Parse.Object.extend("Items");
  const item = new Item();
  item.set("title", title);
  item.set("description", description);

  const acl = new Parse.ACL();
  acl.setReadAccess(owner, true);
  acl.setWriteAccess(owner, true);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    await item.save();
    console.log("Private item successfully created!");
  } catch (error) {
    console.error("Error saving private item:", error);
  }
}
import Parse from 'parse';

export async function createPrivateItem(title, description, owner) {
  const Item = Parse.Object.extend("Items");
  const item = new Item();
  item.set("title", title);
  item.set("description", description);

  const acl = new Parse.ACL();
  acl.setReadAccess(owner, true);
  acl.setWriteAccess(owner, true);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    await item.save();
    console.log("Private item successfully created!");
  } catch (error) {
    console.error("Error saving private item:", error);
  }
}
﻿
Setting Class-Level Permissions (CLPs)
Configure CLPs directly in your Back4app dashboard to restrict access so that only authenticated users can interact with certain collections.
﻿
Step 6 – Implementing User Authentication in Svelte
Setting Up User Accounts
Back4app leverages Parse’s built-in User collection for managing authentication. In your Svelte app, implement registration and login functions similar to the examples below:
JS
import Parse from 'parse';

export async function registerUser(username, password, email) {
  const user = new Parse.User();
  user.set("username", username);
  user.set("password", password);
  user.set("email", email);

  try {
    await user.signUp();
    console.log("User registered successfully!");
  } catch (error) {
    console.error("Registration error:", error);
  }
}

export async function loginUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log("User logged in:", user.get("username"));
  } catch (error) {
    console.error("Login failed:", error);
  }
}
import Parse from 'parse';

export async function registerUser(username, password, email) {
  const user = new Parse.User();
  user.set("username", username);
  user.set("password", password);
  user.set("email", email);

  try {
    await user.signUp();
    console.log("User registered successfully!");
  } catch (error) {
    console.error("Registration error:", error);
  }
}

export async function loginUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log("User logged in:", user.get("username"));
  } catch (error) {
    console.error("Login failed:", error);
  }
}
﻿
This approach can be extended to manage sessions, password resets, and additional authentication features.
﻿
Step 7 – Deploying Your Svelte Application
Back4app simplifies the deployment process. You can deploy your Svelte app using several methods, including Docker containerization.
7.1 Build Your Svelte Application
Compile Your App:
Run your Svelte build command, typically:
Bash
npm run build
npm run build
﻿
Review the Build:
Ensure that the generated files (usually in the public or build folder) include all necessary assets.
7.2 Project Structure Example
A typical Svelte project structure might look like:
Text
Basic-CRUD-App-Svelte/
|-- public/
|   |-- build/
|   |-- global.css
|   |-- index.html
|-- src/
|   |-- components/
|   |   |-- ItemList.svelte
|   |   |-- ItemForm.svelte
|   |-- services/
|   |   |-- items.js
|   |   |-- auth.js
|   |-- App.svelte
|   |-- main.js
|-- package.json
|-- README.md
Basic-CRUD-App-Svelte/
|-- public/
|   |-- build/
|   |-- global.css
|   |-- index.html
|-- src/
|   |-- components/
|   |   |-- ItemList.svelte
|   |   |-- ItemForm.svelte
|   |-- services/
|   |   |-- items.js
|   |   |-- auth.js
|   |-- App.svelte
|   |-- main.js
|-- package.json
|-- README.md
﻿
7.3 Dockerizing Your Svelte App
If you prefer containerized deployment, create a Dockerfile in your project’s root:
Dockerfile
# Use a Node.js image to build the app
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

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

# Copy the rest of the project files and build the app
COPY . .
RUN npm run build

# Use a lightweight server to serve the built files
FROM nginx:alpine
COPY --from=build /app/public /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use a Node.js image to build the app
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

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

# Copy the rest of the project files and build the app
COPY . .
RUN npm run build

# Use a lightweight server to serve the built files
FROM nginx:alpine
COPY --from=build /app/public /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
7.4 Deploying via Back4app Web Deployment
Link Your GitHub Repository:
Host your Svelte project on GitHub.
Set Up Deployment in Back4app:
In the Back4app dashboard, choose the Web Deployment option, connect your repository (e.g., Basic-CRUD-App-Svelte), and select your target branch.
Define Build Settings:
Specify your build command (like npm run build) and point to the build output directory.
Deploy Your Application:
Click Deploy and monitor the logs until your app is live.
﻿
Step 8 – Wrap-Up and Future Enhancements
Congratulations! You have built a Svelte-based CRUD application that connects to Back4app. 
You set up a project named Basic-CRUD-App-Svelte, configured collections for Items and Users, and managed your data through the Back4app Admin App. 
You then integrated your Svelte frontend using the Parse JavaScript SDK (or REST/GraphQL) and added robust security measures.
What’s Next?
Expand Functionality:
Add features like advanced search, detailed views, or real-time updates.
Enhance Backend Logic:
Experiment with cloud functions, third-party API integrations, or role-based access control.
Deepen Your Learning:
Explore further tutorials and the Back4app documentation to optimize your app.
Happy coding and enjoy building your Svelte CRUD application!
Field	Type	Details
_id	ObjectId	Auto-generated unique identifier.
title	String	Name or title of the item.
description	String	Brief description of the item.
createdAt	Date	Timestamp when the item was created.
updatedAt	Date	Timestamp for the last update to the item.
Field	Type	Details
_id	ObjectId	Auto-generated unique identifier.
username	String	Unique username for each user.
email	String	User’s email address.
passwordHash	String	Encrypted password for authentication.
createdAt	Date	Account creation timestamp.
updatedAt	Date	Timestamp for the last account update.
Updated 18 Feb 2025
Did this page help you?
New Doc Title Test Alysson
How to Create a CRUD App with jQuery?