Quickstarters
How to Build a Basic CRUD App with Solid?

34min
Overview
In this walkthrough, you’ll learn how to develop a complete CRUD (create, read, update, delete) application using SolidJS. 
We’ll use Back4app as our backend service, allowing you to manage data effortlessly. This guide walks you through establishing a Back4app project, crafting a flexible data schema, and coding CRUD operations within a SolidJS application.
Initially, you will set up a Back4app project called Basic-CRUD-App-SolidJS. This project provides a robust, schema-less data storage environment. You’ll define your data model by creating collections and fields either manually or with the assistance of Back4app’s AI Agent.
Next, you will handle your backend data using the user-friendly Back4app Admin App. Finally, you will integrate your SolidJS application with Back4app through the Parse JavaScript SDK (or via REST/GraphQL APIs as necessary) while enforcing secure access controls.
By the end of this tutorial, you will have a production-ready SolidJS application that performs essential CRUD functions along with secure user authentication and data management.
What You’ll Learn
How to create a SolidJS-based CRUD app with a modern, no-code backend.
Best practices for designing a scalable backend and connecting it with your SolidJS app.
How to navigate the Back4app Admin App for streamlined data operations.
Deployment strategies, including Docker containerization, to launch your SolidJS application seamlessly.
﻿
Prerequisites
Before you begin, make sure you have:
A Back4app account with an active project.
Need help? Visit Getting Started with Back4app.
A development environment set up for SolidJS.
We recommend using Visual Studio Code or any preferred editor, along with Node.js (v14 or higher).
Basic knowledge of SolidJS, modern JavaScript, and RESTful APIs.
Brush up with the SolidJS documentation if needed.
﻿
Step 1 – Project Initialization
Setting Up Your Back4app Project
Log in to your Back4app account.
Click the “New App” button on your dashboard.
Name your project: Basic-CRUD-App-SolidJS and follow the prompts to complete the setup.
Create New Project
﻿
After creating your project, it will appear on your dashboard, laying the foundation for your backend.
﻿
Step 2 – Crafting Your Data Schema
Designing the Data Structure
For this CRUD application, you will set up several collections in your Back4app project. Below are examples of the main collections and fields required.
1. Collection: Items
This collection stores information about each item.
Field
Type
Purpose
_id
ObjectId
Auto-generated unique identifier.
title
String
Name of the item.
description
String
Brief description of the item.
createdAt
Date
Timestamp when the item was added.
updatedAt
Date
Timestamp for the last update.
2. Collection: Users
This collection manages user credentials and authentication data.
Field
Type
Purpose
_id
ObjectId
Auto-generated unique identifier.
username
String
Unique user identifier.
email
String
Unique email address.
passwordHash
String
Encrypted password for secure access.
createdAt
Date
Account creation timestamp.
updatedAt
Date
Timestamp for last account update.
You can create these collections and add fields via the Back4app dashboard.
Create New Class
﻿
To add a new field, choose the appropriate data type, set the field name, assign a default value if needed, and mark it as required if necessary.
Create Column
﻿
Using the Back4app AI Assistant for Schema Creation
The integrated Back4app AI Assistant can automatically create your data schema based on your instructions, saving you time and ensuring consistency.
How to Use the AI Assistant:
Open the AI Assistant:
Access it via your project settings in the Back4app dashboard.
Detail Your Data Model:
Enter a detailed description of the collections and fields required.
Confirm the Setup:
Review the suggested schema and approve to finalize the configuration.
Example Prompt
Text
Create two 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 two 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 AI-powered method streamlines your schema creation process, ensuring an optimized data model.
﻿
Step 3 – Activating the Admin Dashboard & Managing Data Operations
Introduction to the Admin Dashboard
The Back4app Admin Dashboard provides a no-code interface for efficient backend management. Its drag-and-drop features make it easy to perform CRUD tasks such as adding, viewing, updating, and deleting records.
Enabling the Admin Dashboard
Go to the “More” menu in your Back4app dashboard.
Select “Admin App” and click “Enable Admin App.”
Set up your admin credentials by creating an initial administrator account. This will also establish necessary roles (like B4aAdminUser) and system collections.
Enable Admin App
﻿
After activation, log into the Admin Dashboard to manage your app’s data.
Admin App Dashboard
﻿
Handling CRUD Operations in the Admin Dashboard
Within the dashboard, you can:
Add Records: Use the “Add Record” feature in any collection (e.g., Items) to input new data.
View/Edit Records: Click on an entry to inspect or modify its details.
Delete Records: Remove obsolete or unwanted entries.
This interface simplifies data management, offering an efficient and intuitive experience.
﻿
Step 4 – Connecting Your SolidJS Application with Back4app
With the backend in place, the next step is to link your SolidJS application to Back4app.
Option A: Using the Parse JavaScript SDK
Install the Parse JavaScript SDK:
Run the following command in your project directory:
Bash
npm install parse
npm install parse
﻿
Configure Parse in Your Application:
Create a configuration file (e.g., parseConfig.js):
JS
// parseConfig.js
import Parse from 'parse';
Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// parseConfig.js
import Parse from 'parse';
Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
﻿
Text

3. **Implement CRUD Operations in SolidJS:**  
Here’s an example SolidJS service for managing items:

```javascript
// itemsService.js
import Parse from './parseConfig';

export const fetchItems = async () => {
try {
 const Items = Parse.Object.extend("Items");
 const query = new Parse.Query(Items);
 const results = await query.find();
 return results;
} catch (error) {
 console.error("Error retrieving items:", error);
}
};

export const addItem = async (title, description) => {
const Items = Parse.Object.extend("Items");
const item = new Items();
item.set("title", title);
item.set("description", description);
try {
 await item.save();
 console.log("Item added successfully.");
} catch (error) {
 console.error("Error adding item:", error);
}
};

export const updateItem = async (objectId, newTitle, newDescription) => {
const Items = Parse.Object.extend("Items");
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 const deleteItem = async (objectId) => {
const Items = Parse.Object.extend("Items");
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);
}
};

3. **Implement CRUD Operations in SolidJS:**  
Here’s an example SolidJS service for managing items:

```javascript
// itemsService.js
import Parse from './parseConfig';

export const fetchItems = async () => {
try {
 const Items = Parse.Object.extend("Items");
 const query = new Parse.Query(Items);
 const results = await query.find();
 return results;
} catch (error) {
 console.error("Error retrieving items:", error);
}
};

export const addItem = async (title, description) => {
const Items = Parse.Object.extend("Items");
const item = new Items();
item.set("title", title);
item.set("description", description);
try {
 await item.save();
 console.log("Item added successfully.");
} catch (error) {
 console.error("Error adding item:", error);
}
};

export const updateItem = async (objectId, newTitle, newDescription) => {
const Items = Parse.Object.extend("Items");
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 const deleteItem = async (objectId) => {
const Items = Parse.Object.extend("Items");
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: Utilizing REST or GraphQL APIs
If you prefer not to use the Parse SDK, you can execute CRUD operations via REST. For instance, here’s how to fetch items using the REST API:
JS
export const fetchItemsREST = async () => {
  try {
    const response = await fetch("https://parseapi.back4app.com/classes/Items", {
      method: "GET",
      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("Error fetching items via REST:", error);
  }
};
export const fetchItemsREST = async () => {
  try {
    const response = await fetch("https://parseapi.back4app.com/classes/Items", {
      method: "GET",
      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("Error fetching items via REST:", error);
  }
};
﻿
Integrate these API calls into your SolidJS components as needed.
﻿
Step 5 – Enhancing Backend Security
Configuring Access Control Lists (ACLs)
Protect your data by setting up ACLs for each object. For example, to restrict an item so that only its owner can access it:
JS
import Parse from './parseConfig';

export const addPrivateItem = async (title, description, owner) => {
  const Items = Parse.Object.extend("Items");
  const item = new Items();
  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 added.");
  } catch (error) {
    console.error("Error saving private item:", error);
  }
};
import Parse from './parseConfig';

export const addPrivateItem = async (title, description, owner) => {
  const Items = Parse.Object.extend("Items");
  const item = new Items();
  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 added.");
  } catch (error) {
    console.error("Error saving private item:", error);
  }
};
﻿
Setting Class-Level Permissions (CLPs)
Configure CLPs in your Back4app dashboard to enforce default access restrictions, ensuring only authorized users can interact with certain collections.
﻿
Step 6 – Implementing User Authentication
Managing User Accounts
Back4app uses the built-in Parse User collection for authentication. In your SolidJS app, handle user registration and login as follows:
JS
import Parse from './parseConfig';

export const registerUser = async (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 const loginUser = async (username, password) => {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log("Logged in as:", user.get("username"));
  } catch (error) {
    console.error("Login error:", error);
  }
};
import Parse from './parseConfig';

export const registerUser = async (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 const loginUser = async (username, password) => {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log("Logged in as:", user.get("username"));
  } catch (error) {
    console.error("Login error:", error);
  }
};
﻿
A similar strategy can be adopted for session management, password resets, and other authentication features.
﻿
Step 7 – Deploying Your SolidJS Application
Back4app streamlines the deployment process. You can deploy your SolidJS application through various methods, including Docker.
7.1 Preparing Your Application
Build Your Application:
Use your package manager to compile your SolidJS app. For example:
Bash
npm run build
npm run build
﻿
Check the Build Output:
Ensure the build folder contains all the necessary files.
﻿
7.2 Organizing Your Project Structure
A typical project structure might look like:
Text
Basic-CRUD-App-SolidJS/
|-- public/
|   |-- index.html
|-- src/
|   |-- components/
|   |   |-- App.jsx
|   |-- services/
|   |   |-- parseConfig.js
|   |   |-- itemsService.js
|   |   |-- authService.js
|   |-- index.jsx
|-- package.json
|-- README.md
Basic-CRUD-App-SolidJS/
|-- public/
|   |-- index.html
|-- src/
|   |-- components/
|   |   |-- App.jsx
|   |-- services/
|   |   |-- parseConfig.js
|   |   |-- itemsService.js
|   |   |-- authService.js
|   |-- index.jsx
|-- package.json
|-- README.md
﻿
7.3 Dockerizing Your Application
If you wish to containerize your app, create a Dockerfile in the project’s root:
Dockerfile
# Use a lightweight Node image
FROM node:16-alpine

# 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 application code
COPY . .

# Build the application
RUN npm run build

# Expose the port (adjust if needed)
EXPOSE 3000

# Serve the built application
CMD ["npx", "serve", "build"]
# Use a lightweight Node image
FROM node:16-alpine

# 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 application code
COPY . .

# Build the application
RUN npm run build

# Expose the port (adjust if needed)
EXPOSE 3000

# Serve the built application
CMD ["npx", "serve", "build"]
﻿
7.4 Deploying with Back4app Web Deployment
Connect Your Git Repository:
Ensure your SolidJS project is hosted on GitHub.
Configure Deployment:
In your Back4app dashboard, choose Web Deployment, link your repository (e.g., Basic-CRUD-App-SolidJS), and select the appropriate branch.
Set Build Commands:
Define the build command (e.g., npm run build) and specify the output directory.
Deploy Your Application:
Click Deploy and monitor the logs until your app is live.
﻿
Step 8 – Final Thoughts and Future Enhancements
Great job! You’ve successfully created a SolidJS CRUD application integrated with Back4app. 
You set up a project named Basic-CRUD-App-SolidJS, defined your Items and Users collections, and managed data through the Back4app Admin Dashboard. 
Additionally, you connected your SolidJS app using the Parse JavaScript SDK (or REST/GraphQL) and applied solid security measures.
Next Steps:
Expand the Application:
Add advanced features like search filters, detailed item views, or real-time data updates.
Enhance the Backend:
Experiment with cloud functions, third-party API integrations, or role-based access management.
Learn More:
Dive into the Back4app documentation and additional SolidJS tutorials to further refine your application.
Happy coding and best of luck with your SolidJS CRUD project!
Field	Type	Purpose
_id	ObjectId	Auto-generated unique identifier.
title	String	Name of the item.
description	String	Brief description of the item.
createdAt	Date	Timestamp when the item was added.
updatedAt	Date	Timestamp for the last update.
Field	Type	Purpose
_id	ObjectId	Auto-generated unique identifier.
username	String	Unique user identifier.
email	String	Unique email address.
passwordHash	String	Encrypted password for secure access.
createdAt	Date	Account creation timestamp.
updatedAt	Date	Timestamp for last account update.
Updated 18 Feb 2025
Did this page help you?
How to Create a CRUD Application with Ember.js?
How to Create a CRUD Application with Remix?