Quickstarters
How to Create a Basic CRUD Application with Blazor?

40min
Overview
This guide will walk you through building a complete CRUD (create, read, update, delete) application using Blazor. 
In this tutorial, you'll configure a Back4app project, design your database schema, and integrate your Blazor frontend with Back4app via REST APIs. 
This process will help you establish a robust backend while ensuring your web application can efficiently manage data.
Initially, you'll set up a Back4app project titled Basic-CRUD-App-Blazor, which will serve as the backbone of your data management system. 
Next, you'll craft a scalable database design by establishing detailed collections and fields, either manually or with the assistance of the Back4app AI Agent.
After that, you'll harness the power of the Back4app Admin App—a user-friendly, drag and drop interface—to manage your collections effortlessly. 
Finally, you will connect your Blazor frontend to Back4app using REST APIs and secure your backend with proper access control.
By the end of this tutorial, you will have a production-ready web application that supports essential CRUD operations along with user authentication and secure data updates.
Key Learning Points
Build CRUD applications that handle data operations seamlessly using a reliable backend.
Acquire insights into creating a scalable backend and integrating it with a Blazor frontend.
Utilize the drag and drop capabilities of the Back4app Admin App to simplify data management.
Learn deployment techniques, including Docker containerization, to rapidly launch your application.
﻿
Prerequisites
Before starting, make sure you have:
A Back4app account and a new project set up.
Visit Getting Started with Back4app if you need assistance.
A Blazor development environment.
Use Visual Studio or Visual Studio Code with the latest .NET SDK (version 6 or above).
Basic knowledge of C#, Blazor, and RESTful APIs.
Check out the Blazor documentation if required.
﻿
Step 1 – Initial Project Setup
Establishing a New Back4app Project
Sign into your Back4app account.
Select the “New App” button from your dashboard.
Input the project title: Basic-CRUD-App-Blazor and follow the on-screen instructions to complete the creation process.
Create New Project
﻿
After setup, your new project will display on your dashboard, providing a sturdy foundation for configuring your backend.
﻿
Step 2 – Designing Your Database Schema
Crafting Your Data Model
For this basic CRUD application, you'll need to create several collections. Below are examples of the collections along with the required fields and data types to set up your database efficiently.
1. Items Collection
Field
Data Type
Purpose
_id
ObjectId
Auto-generated unique identifier.
title
String
The name or title of the item.
description
String
A short summary of the item.
created_at
Date
The timestamp when the item was created.
updated_at
Date
The timestamp when the item was last modified.
2. Users Collection
Field
Data Type
Purpose
_id
ObjectId
Auto-generated unique identifier.
username
String
Unique identifier for the user.
email
String
User’s email address.
password_hash
String
Encrypted password for secure login.
created_at
Date
Timestamp of account creation.
updated_at
Date
Timestamp of the last account update.
You can create these collections manually in the Back4app dashboard by establishing a new class for each collection and adding the necessary columns.
Create New Class
﻿
You can define columns by choosing a data type, naming the field, setting default values, and determining if the field is mandatory.
Create Column
﻿
Employing the Back4app AI Agent for Schema Creation
The Back4app AI Agent streamlines schema creation directly from your dashboard. By entering a prompt detailing your collections and fields, the AI Agent automatically generates the necessary database schema.
How to Utilize the AI Agent:
Access the AI Agent:
Log in to your Back4app dashboard and locate the AI Agent in the settings or main menu.
Define Your Data Model:
Paste a descriptive prompt that lists the collections and their fields.
Review and Confirm:
Check the suggested schema and apply it 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)
﻿
Using this AI Agent not only saves time but also ensures a consistent and efficient schema setup.
﻿
Step 3 – Activating the Admin App & Managing CRUD Operations
Introduction to the Admin App
The Back4app Admin App provides a no-code, drag and drop interface to manage your backend data. This intuitive tool enables you to perform CRUD operations with ease.
Activating the Admin App
Navigate to the “More” menu on your Back4app dashboard.
Click on “Admin App” and then select “Enable Admin App.”
Set up your admin credentials by creating an initial admin user, which will also establish default roles and system collections.
Enable Admin App
﻿
After enabling, log in to the Admin App to manage your collections and data.
Admin App Dashboard
﻿
Performing CRUD Operations with the Admin App
Inside the Admin App you can:
Create Records: Click the “Add Record” button within a collection (for example, Items) to add new entries.
Read/Update Records: Click on a record to inspect its details or modify its fields.
Delete Records: Remove entries that are no longer necessary.
This simple, drag and drop interface significantly enhances the data management experience.
﻿
Step 4 – Connecting Blazor with Back4app
Now that your backend is configured, it’s time to integrate your Blazor frontend with Back4app.
Using REST APIs in Blazor
Since the Parse SDK is not applicable to Blazor, you will leverage REST APIs to perform CRUD operations. In your Blazor application, use the HttpClient to interact with Back4app’s REST endpoints.
Example: Fetching Items via REST
Create a service in your Blazor project to fetch items. For example:
C#
// Services/ItemService.cs
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text.Json;
using System.Threading.Tasks;
using System.Collections.Generic;

public class Item
{
    public string id { get; set; }
    public string title { get; set; }
    public string description { get; set; }
}

public class ItemService
{
    private readonly HttpClient _httpClient;
    private const string BaseUrl = "https://parseapi.back4app.com/classes/Items";

    public ItemService(HttpClient httpClient)
    {
        _httpClient = httpClient;
        _httpClient.DefaultRequestHeaders.Add("X-Parse-Application-Id", "YOUR_APPLICATION_ID");
        _httpClient.DefaultRequestHeaders.Add("X-Parse-REST-API-Key", "YOUR_REST_API_KEY");
    }

    public async Task<List<Item>> GetItemsAsync()
    {
        var response = await _httpClient.GetAsync(BaseUrl);
        response.EnsureSuccessStatusCode();
        var json = await response.Content.ReadAsStringAsync();
        var itemsData = JsonSerializer.Deserialize<ItemsResponse>(json);
        return itemsData.results;
    }
}

public class ItemsResponse
{
    public List<Item> results { get; set; }
}
// Services/ItemService.cs
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text.Json;
using System.Threading.Tasks;
using System.Collections.Generic;

public class Item
{
    public string id { get; set; }
    public string title { get; set; }
    public string description { get; set; }
}

public class ItemService
{
    private readonly HttpClient _httpClient;
    private const string BaseUrl = "https://parseapi.back4app.com/classes/Items";

    public ItemService(HttpClient httpClient)
    {
        _httpClient = httpClient;
        _httpClient.DefaultRequestHeaders.Add("X-Parse-Application-Id", "YOUR_APPLICATION_ID");
        _httpClient.DefaultRequestHeaders.Add("X-Parse-REST-API-Key", "YOUR_REST_API_KEY");
    }

    public async Task<List<Item>> GetItemsAsync()
    {
        var response = await _httpClient.GetAsync(BaseUrl);
        response.EnsureSuccessStatusCode();
        var json = await response.Content.ReadAsStringAsync();
        var itemsData = JsonSerializer.Deserialize<ItemsResponse>(json);
        return itemsData.results;
    }
}

public class ItemsResponse
{
    public List<Item> results { get; set; }
}
﻿
Integrate such API calls within your Blazor components to manage CRUD operations.
﻿
Step 5 – Securing Your Backend
Implementing Access Control Lists (ACLs)
Protect your data by setting ACLs on your objects. For instance, to create a private item:
C#
public async Task CreatePrivateItemAsync(Item newItem, string ownerId)
{
    // Prepare your item data with proper access controls
    // In your REST call, include ACL information as required by your backend
    // This is a conceptual example; refer to Back4app documentation for ACL details
}
public async Task CreatePrivateItemAsync(Item newItem, string ownerId)
{
    // Prepare your item data with proper access controls
    // In your REST call, include ACL information as required by your backend
    // This is a conceptual example; refer to Back4app documentation for ACL details
}
﻿
Configuring Class-Level Permissions (CLPs)
Within the Back4app dashboard, adjust the CLPs for each collection to ensure only authorized users can access or modify sensitive data.
﻿
Step 6 – Managing User Authentication
Setting Up User Accounts in Blazor
Back4app utilizes Parse’s User class to handle authentication. In your Blazor app, manage user sign-up and sign-in via REST calls. For example:
C#
// Services/AuthService.cs
using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;

public class AuthService
{
    private readonly HttpClient _httpClient;
    private const string SignUpUrl = "https://parseapi.back4app.com/users";

    public AuthService(HttpClient httpClient)
    {
        _httpClient = httpClient;
        _httpClient.DefaultRequestHeaders.Add("X-Parse-Application-Id", "YOUR_APPLICATION_ID");
        _httpClient.DefaultRequestHeaders.Add("X-Parse-REST-API-Key", "YOUR_REST_API_KEY");
    }

    public async Task SignUpAsync(string username, string password, string email)
    {
        var user = new { username, password, email };
        var response = await _httpClient.PostAsJsonAsync(SignUpUrl, user);
        response.EnsureSuccessStatusCode();
        // Handle success, such as storing tokens or redirecting the user
    }
}
// Services/AuthService.cs
using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;

public class AuthService
{
    private readonly HttpClient _httpClient;
    private const string SignUpUrl = "https://parseapi.back4app.com/users";

    public AuthService(HttpClient httpClient)
    {
        _httpClient = httpClient;
        _httpClient.DefaultRequestHeaders.Add("X-Parse-Application-Id", "YOUR_APPLICATION_ID");
        _httpClient.DefaultRequestHeaders.Add("X-Parse-REST-API-Key", "YOUR_REST_API_KEY");
    }

    public async Task SignUpAsync(string username, string password, string email)
    {
        var user = new { username, password, email };
        var response = await _httpClient.PostAsJsonAsync(SignUpUrl, user);
        response.EnsureSuccessStatusCode();
        // Handle success, such as storing tokens or redirecting the user
    }
}
﻿
Similar methods can be implemented for login and session management. Additional functionalities like social logins, email verification, and password recovery can be set up via the Back4app dashboard.
﻿
Step 7 – Deploying Your Blazor Frontend
Back4app’s Web Deployment feature allows you to seamlessly host your Blazor application by deploying your code from a GitHub repository.
7.1 Creating Your Production Build
Open your project directory in a terminal.
Run the publish command:
Bash
dotnet publish -c Release
dotnet publish -c Release
﻿
This command generates a published folder with optimized static files for your Blazor app.
Verify the Build:
Confirm that the output folder contains the necessary files (e.g., index.html, JavaScript, CSS, etc.).
﻿
7.2 Organizing and Uploading Your Code
Your Git repository should encapsulate the complete source of your Blazor application. An example folder structure might be:
Text
Basic-CRUD-App-Blazor-Frontend/
|-- wwwroot/
|   |-- index.html
|-- Pages/
|   |-- Index.razor
|   |-- Items.razor
|   |-- Login.razor
|-- Services/
|   |-- ItemService.cs
|   |-- AuthService.cs
|-- Program.cs
|-- Basic-CRUD-App-Blazor.csproj
|-- README.md
Basic-CRUD-App-Blazor-Frontend/
|-- wwwroot/
|   |-- index.html
|-- Pages/
|   |-- Index.razor
|   |-- Items.razor
|   |-- Login.razor
|-- Services/
|   |-- ItemService.cs
|   |-- AuthService.cs
|-- Program.cs
|-- Basic-CRUD-App-Blazor.csproj
|-- README.md
﻿
Sample File: Program.cs
C#
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Basic_CRUD_App_Blazor;
using Basic_CRUD_App_Blazor.Services;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddScoped<ItemService>();
builder.Services.AddScoped<AuthService>();

await builder.Build().RunAsync();
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Basic_CRUD_App_Blazor;
using Basic_CRUD_App_Blazor.Services;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddScoped<ItemService>();
builder.Services.AddScoped<AuthService>();

await builder.Build().RunAsync();
﻿
Commit and Push to GitHub
Initialize Git in your project folder (if not already done):
Bash
git init
git init
﻿
Add your files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial commit of Blazor frontend source code"
git commit -m "Initial commit of Blazor frontend source code"
﻿
Create a GitHub repository:
Name it Basic-CRUD-App-Blazor-Frontend.
Push your repository:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Blazor-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Blazor-Frontend.git
git push -u origin main
﻿
﻿
7.3 Integrating Your Repository with Web Deployment
Access the Web Deployment option:
In your Back4app dashboard, open your project (Basic-CRUD-App-Blazor) and navigate to the Web Deployment section.
Connect Your GitHub Account:
Follow the prompts to link your GitHub account, allowing Back4app to access your repository.
Select the Repository and Branch:
Choose the repository (e.g., Basic-CRUD-App-Blazor-Frontend) and the branch (e.g., main) that holds your Blazor code.
﻿
7.4 Deployment Configuration
Provide additional details such as:
Build Command:
If the published folder isn’t pre-generated, specify a command like dotnet publish -c Release.
Output Directory:
Set the output path (for example, bin/Release/net6.0/wwwroot).
Environment Variables:
Add any required environment settings (such as API keys) in the configuration.
﻿
7.5 Containerizing Your Blazor Application with Docker
If you prefer Docker for deployment, include a Dockerfile in your repository. Here’s an example:
Dockerfile
# Use the official .NET SDK image for building the app
FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["Basic-CRUD-App-Blazor.csproj", "./"]
RUN dotnet restore "Basic-CRUD-App-Blazor.csproj"
COPY . .
RUN dotnet publish "Basic-CRUD-App-Blazor.csproj" -c Release -o /app/publish

# Use the official ASP.NET Core runtime image to run the app
FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS runtime
WORKDIR /app
COPY --from=build /app/publish .
EXPOSE 80
ENTRYPOINT ["dotnet", "Basic-CRUD-App-Blazor.dll"]
# Use the official .NET SDK image for building the app
FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["Basic-CRUD-App-Blazor.csproj", "./"]
RUN dotnet restore "Basic-CRUD-App-Blazor.csproj"
COPY . .
RUN dotnet publish "Basic-CRUD-App-Blazor.csproj" -c Release -o /app/publish

# Use the official ASP.NET Core runtime image to run the app
FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS runtime
WORKDIR /app
COPY --from=build /app/publish .
EXPOSE 80
ENTRYPOINT ["dotnet", "Basic-CRUD-App-Blazor.dll"]
﻿
Then, in your Web Deployment settings, select the Docker option to deploy your containerized application.
﻿
7.6 Launching Your Application
Initiate the Deployment:
Click the Deploy button in the Back4app dashboard.
Monitor the Build:
Back4app will fetch your code from GitHub, run the build command if necessary, and deploy your app in a container.
Get Your URL:
Once the deployment process is complete, Back4app will supply a URL for your hosted Blazor application.
﻿
7.7 Confirming the Deployment
Open the Provided URL:
Visit the URL in a browser to view your deployed app.
Test the Application:
Verify that all pages load correctly and that CRUD operations function as expected.
Troubleshoot if Necessary:
Use browser developer tools and review deployment logs on Back4app to diagnose any issues.
﻿
Step 8 – Summary and Further Exploration
Congratulations! You have successfully built a basic CRUD application using Blazor and Back4app. 
You set up a project titled Basic-CRUD-App-Blazor, designed collections for Items and Users, and utilized the Back4app Admin App for seamless data management. 
Additionally, you integrated your Blazor frontend with Back4app using REST APIs and applied robust security measures.
Future Steps:
Expand Your Frontend:
Enhance your Blazor app with more detailed views, search functionality, or live notifications.
Add Advanced Features:
Consider incorporating Cloud Functions, third-party integrations, or role-based permissions.
Consult Additional Resources:
Review the Back4app documentation and other advanced tutorials to further optimize and expand your application.
By following this guide, you now have the foundation to build a scalable and secure CRUD backend for your Blazor application using Back4app. Happy coding!
Field	Data Type	Purpose
_id	ObjectId	Auto-generated unique identifier.
title	String	The name or title of the item.
description	String	A short summary of the item.
created_at	Date	The timestamp when the item was created.
updated_at	Date	The timestamp when the item was last modified.
Field	Data Type	Purpose
_id	ObjectId	Auto-generated unique identifier.
username	String	Unique identifier for the user.
email	String	User’s email address.
password_hash	String	Encrypted password for secure login.
created_at	Date	Timestamp of account creation.
updated_at	Date	Timestamp of the last account update.
Updated 20 Feb 2025
Did this page help you?
How to Build a CRUD App with SvelteKit? A Comprehensive Tutorial
How to Build a Basic CRUD App with RedwoodJS? A Step-by-Step Guide