Quickstarters
How to Build a CRUD App with SvelteKit? A Comprehensive Tutorial

41min
Overview
In this guide, you'll create a simple CRUD (create, read, update, delete) application using SvelteKit. 
We will demonstrate how to perform standard data operations and manage your web app's backend with Back4app. The tutorial begins with setting up a Back4app project titled Basic-CRUD-App-SvelteKit, which serves as your robust backend.
You'll then design an adaptable database schema by manually creating collections and fields, or by leveraging the Back4app AI Agent. This ensures that your data model is optimized for efficient CRUD operations.
Next, you will use the Back4app Admin App—a no-code, drag-and-drop tool—to manage your collections, streamlining your data management process.
Finally, you'll integrate your SvelteKit frontend with Back4app using REST APIs. Advanced security measures, such as access controls, will also be configured to safeguard your backend.
By the conclusion of this tutorial, you'll have a production-ready web application that supports CRUD operations along with user authentication and dynamic data updates.
Main Points
Master the creation of CRUD applications that effectively handle data with a dependable backend.
Understand how to structure a scalable database and connect it with a SvelteKit frontend.
Learn how to utilize a visual admin tool (Back4app Admin App) to perform data operations seamlessly.
Explore deployment strategies, including Docker containerization, to quickly launch your application.
﻿
Prerequisites
Before you start, ensure you have:
A Back4app account with a new project ready.
Refer to Getting Started with Back4app for guidance.
A SvelteKit development environment.
Install SvelteKit following the official documentation.
A basic grasp of JavaScript, SvelteKit, and REST APIs.
Check out the SvelteKit documentation for more details.
﻿
Step 1 – Project Initialization
Setting Up a New Back4app Project
Log into your Back4app dashboard.
Click the “New App” button on your dashboard.
Input the project name: Basic-CRUD-App-SvelteKit and follow the on-screen prompts to create your project.
Create New Project
﻿
After creation, your new project appears on your dashboard, providing a stable platform for backend configuration.
﻿
Step 2 – Crafting the Database Schema
Formulating Your Data Model
For our CRUD app, we need to create multiple collections. Here are examples outlining the required collections and their fields to set up your database schema for performing CRUD operations.
1. Items Collection
This collection holds details about each item.
Field
Data Type
Description
_id
ObjectId
Auto-generated primary key.
title
String
Item's title.
description
String
Brief overview of the item.
created_at
Date
Timestamp when the item was created.
updated_at
Date
Timestamp for the latest update.
2. Users Collection
This collection stores user credentials and profile details.
Field
Data Type
Description
_id
ObjectId
Auto-generated primary key.
username
String
Unique identifier for the user.
email
String
Unique user email address.
password_hash
String
Encrypted password for authentication.
created_at
Date
Account creation timestamp.
updated_at
Date
Timestamp for the latest profile update.
You can manually create these collections in the Back4app dashboard by establishing a new class for each and adding the respective columns.
Create New Class
﻿
Define each field by selecting the appropriate data type, naming it, setting default values, and marking it as required if necessary.
Create Column
﻿
Automating Schema Creation with the Back4app AI Agent
The Back4app AI Agent simplifies the schema setup process directly from your dashboard. By inputting a prompt that describes your collections and fields, you can automatically generate your database structure.
How to Use the AI Agent:
Access the AI Agent:
Open your Back4app dashboard and navigate to the AI Agent within your project settings.
Describe Your Model:
Paste a detailed prompt outlining the collections and fields you require.
Review and Confirm:
After submission, review the generated collections and field definitions, then 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 approach saves time and ensures your schema is both consistent and optimized.
﻿
Step 3 – Activating the Admin App & Executing CRUD Operations
Introducing the Admin App
The Back4app Admin App offers a visual interface to manage your backend effortlessly. With its drag-and-drop features, performing CRUD operations becomes straightforward.
Activating the Admin App
Go to the “More” section in your Back4app dashboard.
Select “Admin App” then click “Enable Admin App.”
Set Up Admin Credentials:
Create an initial admin user to establish roles (e.g., B4aAdminUser) and system collections.
Enable Admin App
﻿
After activation, sign into the Admin App to begin managing your data.
Admin App Dashboard
﻿
Managing CRUD Operations with the Admin App
Inside the Admin App you can:
Add Records:
Click the “Add Record” button in any collection (e.g., Items) to create new entries.
View and Edit Records:
Select a record to see its details or modify its fields.
Remove Records:
Use the delete option to eliminate entries that are no longer required.
This intuitive interface streamlines your data management process significantly.
﻿
Step 4 – Connecting SvelteKit with Back4app
With your backend configured via the Admin App, it's time to link your SvelteKit frontend to Back4app.
Leveraging REST APIs in SvelteKit
You will perform CRUD operations using REST API calls.
Fetching Data Example
Create a SvelteKit endpoint or component that retrieves items from Back4app:
Text
<!-- src/routes/Items.svelte -->
<script>
  import { onMount } from 'svelte';
  let items = [];

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

  onMount(loadItems);
</script>

<h2>Items</h2>
<ul>
  {#each items as item (item.objectId)}
    <li>{item.title} – {item.description}</li>
  {/each}
</ul>
<!-- src/routes/Items.svelte -->
<script>
  import { onMount } from 'svelte';
  let items = [];

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

  onMount(loadItems);
</script>

<h2>Items</h2>
<ul>
  {#each items as item (item.objectId)}
    <li>{item.title} – {item.description}</li>
  {/each}
</ul>
﻿
Integrate similar API calls within your SvelteKit components for create, update, and delete operations.
﻿
Step 5 – Securing Your Backend
Configuring Access Control Lists (ACLs)
Protect your data by setting ACLs for each object. For instance, to create a private item:
JS
async function createPrivateItem(itemData, ownerId) {
  const response = await fetch('https://parseapi.back4app.com/classes/Items', {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: itemData.title,
      description: itemData.description,
      ACL: {
        [ownerId]: { read: true, write: true },
        "*": { read: false, write: false }
      }
    })
  });
  const result = await response.json();
  console.log('Created private item:', result);
}
async function createPrivateItem(itemData, ownerId) {
  const response = await fetch('https://parseapi.back4app.com/classes/Items', {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
      'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: itemData.title,
      description: itemData.description,
      ACL: {
        [ownerId]: { read: true, write: true },
        "*": { read: false, write: false }
      }
    })
  });
  const result = await response.json();
  console.log('Created private item:', result);
}
﻿
Setting Class-Level Permissions (CLPs)
In the Back4app dashboard, configure CLPs for each collection so that only authorized users can access sensitive data.
﻿
Step 6 – Implementing User Authentication
Managing User Accounts
Back4app employs Parse’s User class for authentication. In your SvelteKit app, set up registration and login forms that interact with Back4app via REST API calls.
Example: User Registration
Text
<!-- src/routes/SignUp.svelte -->
<script>
  let username = '';
  let email = '';
  let password = '';

  const handleSignUp = async () => {
    try {
      const response = await fetch('https://parseapi.back4app.com/users', {
        method: 'POST',
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username, email, password })
      });
      const data = await response.json();
      if (data.objectId) {
        alert('Registration successful!');
      } else {
        alert('Sign up failed: ' + data.error);
      }
    } catch (error) {
      console.error('Error during sign up:', error);
    }
  };
</script>

<form on:submit|preventDefault={handleSignUp}>
  <input type="text" placeholder="Username" bind:value={username} />
  <input type="email" placeholder="Email" bind:value={email} />
  <input type="password" placeholder="Password" bind:value={password} />
  <button type="submit">Register</button>
</form>
<!-- src/routes/SignUp.svelte -->
<script>
  let username = '';
  let email = '';
  let password = '';

  const handleSignUp = async () => {
    try {
      const response = await fetch('https://parseapi.back4app.com/users', {
        method: 'POST',
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username, email, password })
      });
      const data = await response.json();
      if (data.objectId) {
        alert('Registration successful!');
      } else {
        alert('Sign up failed: ' + data.error);
      }
    } catch (error) {
      console.error('Error during sign up:', error);
    }
  };
</script>

<form on:submit|preventDefault={handleSignUp}>
  <input type="text" placeholder="Username" bind:value={username} />
  <input type="email" placeholder="Email" bind:value={email} />
  <input type="password" placeholder="Password" bind:value={password} />
  <button type="submit">Register</button>
</form>
﻿
A similar method can be implemented for user login and session management.
﻿
Step 7 – Deploying Your SvelteKit Frontend
Back4app’s Web Deployment feature enables you to host your SvelteKit frontend by linking it to a GitHub repository. This section covers how to build your production files, push your source code, and deploy your site.
7.1 Creating a Production Build
Open your terminal in the project directory.
Run the build command:
Bash
npm run build
npm run build
﻿
This generates a build (or output) folder with optimized static assets.
Verify the Build:
Ensure the build folder contains an index.html and all necessary asset directories.
﻿
7.2 Structuring and Uploading Your Code
Your repository should have the complete SvelteKit source code. A typical structure might be:
Text
Basic-CRUD-App-SvelteKit/
├── node_modules/
├── static/
│   └── global.css
├── src/
│   ├── routes/
│   │   ├── Items.svelte
│   │   └── SignUp.svelte
│   └── lib/
│       └── api.js
├── package.json
└── README.md
Basic-CRUD-App-SvelteKit/
├── node_modules/
├── static/
│   └── global.css
├── src/
│   ├── routes/
│   │   ├── Items.svelte
│   │   └── SignUp.svelte
│   └── lib/
│       └── api.js
├── package.json
└── README.md
﻿
Sample API File: src/lib/api.js
JS
export const fetchItems = async () => {
  const res = 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 res.json();
  return data.results;
};
export const fetchItems = async () => {
  const res = 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 res.json();
  return data.results;
};
﻿
Committing to GitHub
Initialize Git (if not done):
Bash
git init
git init
﻿
Add your files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial commit for SvelteKit frontend"
git commit -m "Initial commit for SvelteKit frontend"
﻿
Create a GitHub repository:
Name it, for example, Basic-CRUD-App-SvelteKit.
Push your code:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-SvelteKit.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-SvelteKit.git
git push -u origin main
﻿
﻿
7.3 Linking Your GitHub Repo with Web Deployment
Open Web Deployment:
Log into Back4app, navigate to your project (Basic-CRUD-App-SvelteKit), and select the Web Deployment option.
Connect to GitHub:
Follow the prompts to link your GitHub account so that Back4app can access your repository.
Choose Your Repository and Branch:
Select your SvelteKit repo (e.g., Basic-CRUD-App-SvelteKit) and the branch containing your code (usually main).
﻿
7.4 Setting Up Your Deployment
Provide these additional settings:
Build Command:
If there’s no pre-built folder, set the command (e.g., npm run build).
Output Directory:
Specify the folder (typically build or output) that holds your static files.
Environment Variables:
Add any necessary variables such as API keys.
﻿
7.5 Dockerizing Your SvelteKit Application
If Docker is your deployment choice, include a Dockerfile in your repository:
Dockerfile
# Use a Node image for building the app
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

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

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

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

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

# Set working directory
WORKDIR /app

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

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

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Configure Web Deployment to use Docker if preferred.
﻿
7.6 Deploying Your Application
Click the Deploy Button:
Once configuration is complete, hit the Deploy button.
Monitor Deployment:
Back4app will retrieve your code, execute the build, and deploy your app in a container.
Get Your URL:
Upon successful deployment, Back4app provides a URL for your hosted SvelteKit app.
﻿
7.7 Validating Your Deployment
Visit the URL:
Open the provided URL in your browser.
Test Functionality:
Confirm that your app loads correctly, routes work, and all assets are properly served.
Debug if Needed:
Use browser developer tools to inspect errors, and review Back4app logs for troubleshooting.
﻿
Step 8 – Wrap-Up and Future Directions
Kudos on building a complete CRUD application with SvelteKit and Back4app! 
You set up a project called Basic-CRUD-App-SvelteKit, crafted detailed collections for Items and Users, and managed your backend via the Admin App. 
Additionally, you integrated your SvelteKit frontend through REST APIs and applied stringent access controls.
Future Enhancements:
Expand Your Frontend:
Enhance your SvelteKit app with detailed views, search capabilities, and real-time notifications.
Add Advanced Features:
Implement server-side logic (e.g., Cloud Functions), integrate third-party APIs, or enable role-based permissions.
Deepen Your Knowledge:
Visit the Back4app documentation and explore more tutorials for performance improvements and custom integrations.
This tutorial has equipped you with the skills needed to create a scalable CRUD backend for your SvelteKit application using Back4app. Enjoy coding and happy building!
Field	Data Type	Description
_id	ObjectId	Auto-generated primary key.
title	String	Item's title.
description	String	Brief overview of the item.
created_at	Date	Timestamp when the item was created.
updated_at	Date	Timestamp for the latest update.
Field	Data Type	Description
_id	ObjectId	Auto-generated primary key.
username	String	Unique identifier for the user.
email	String	Unique user email address.
password_hash	String	Encrypted password for authentication.
created_at	Date	Account creation timestamp.
updated_at	Date	Timestamp for the latest profile update.
Updated 21 Feb 2025
Did this page help you?
How to Develop a Basic CRUD Mobile App with NativeScript?
How to Create a Basic CRUD Application with Blazor?