Quickstarters

How to Build CRUD App with JavaScript?

34min

Overview

In this tutorial, you'll learn how to construct a complete CRUD (create, read, update, delete) application using JavaScript.

We will utilize Back4app to manage your backend data effortlessly. This guide covers essential CRUD operations, from configuring a Back4app project to integrating your JavaScript application with the Parse JavaScript SDK or REST API.

Initially, you will set up a project on Back4app titled Basic-CRUD-App-JavaScript, which offers a robust backend solution.

You'll then define your data schema—either manually or with the help of Back4app's AI Agent—to fit your application’s requirements.

Next, you'll manage your backend through the user-friendly Back4app Admin App, enabling you to perform data operations via a simple drag and drop interface.

Finally, you'll connect your JavaScript application to Back4app, implementing secure user authentication and basic CRUD functionalities.

By the end of this guide, you will have built a production-ready JavaScript application capable of performing all fundamental CRUD operations with secure access control.

Key Points to Remember

  • Master how to develop a JavaScript-based CRUD app with a scalable backend.
  • Understand how to structure your backend and integrate it smoothly with your JavaScript code.
  • Learn to utilize Back4app’s Admin App for easy data manipulation and CRUD operations.
  • Explore deployment options, including containerization with Docker, to launch your JavaScript application.


Prerequisites

Before you begin, make sure you have:

  • A Back4app account with a configured project. Need help? Visit Getting Started with Back4app.
  • A JavaScript development setup. You can use Visual Studio Code or any other preferred editor along with Node.js (version 14 or later).
  • Basic knowledge of JavaScript, modern frameworks, and REST APIs. Refer to the JavaScript documentation if needed.


Step 1 – Initializing Your Project

Setting Up a New Back4app Project

  1. Log into your Back4app account.
  2. Click on the “New App” button from your dashboard.
  3. Enter the project name: Basic-CRUD-App-JavaScript and complete the setup process.
Create New Project
Create New Project


Once the project is created, it appears on your dashboard, laying the groundwork for your backend configuration.



Step 2 – Crafting Your Data Schema

Designing Data Structures

For our CRUD app, we will establish two primary classes (collections) on Back4app. These classes and their fields are essential for handling the necessary CRUD operations.

1. The Items Collection

This collection stores details for each item.

Field

Type

Details

_id

ObjectId

Auto-generated unique identifier.

title

String

The item’s name.

description

String

A brief summary of the item.

createdAt

Date

Timestamp of item creation.

updatedAt

Date

Timestamp of the latest update.

2. The Users Collection

This collection handles user credentials and authentication details.

Field

Type

Details

_id

ObjectId

Automatically generated unique ID.

username

String

Unique identifier for the user.

email

String

The user's unique email address.

passwordHash

String

Hashed password for secure authentication.

createdAt

Date

Account creation timestamp.

updatedAt

Date

Last account update timestamp.

You can create these classes and their fields directly in the Back4app dashboard.

Create New Class
Create New Class


You can add columns by selecting a type, naming the field, assigning default values, and setting mandatory options.

Create Column
Create Column


Using Back4app's AI Agent for Schema Generation

The Back4app AI Agent simplifies schema creation by auto-generating your data model based on your description. This feature accelerates project setup and ensures your schema aligns with your CRUD requirements.

How to Utilize the AI Agent:

  1. Open the AI Agent: Log into your Back4app dashboard and find the AI Agent in the project settings.
  2. Describe Your Schema: Input a detailed description of the collections and fields needed.
  3. Review and Confirm: After processing, the AI Agent will display a proposed schema. Review and confirm to apply it.

Sample Description

Text


This AI-assisted approach saves time and guarantees a well-structured data model for your app.



Step 3 – Enabling the Admin App & Performing CRUD Operations

Overview of the Admin App

The Back4app Admin App offers a code-free interface for efficient backend data management. With its intuitive drag and drop features, you can effortlessly perform CRUD operations like adding, viewing, modifying, and deleting records.

Activating the Admin App

  1. Go to the “More” section in your Back4app dashboard.
  2. Select “Admin App” and click on “Enable Admin App.”
  3. Configure your admin credentials by setting up the initial admin account. This also establishes roles like B4aAdminUser and system classes.
Enable Admin App
Enable Admin App


After activation, log into the Admin App to manage your application’s data.

Admin App Dashboard
Admin App Dashboard


Managing CRUD Operations via the Admin App

Inside the Admin App, you can:

  • Insert Records: Use the “Add Record” option to create new entries in a collection like Items.
  • View and Edit Records: Click on any record to see details or modify fields.
  • Delete Records: Remove any records that are no longer needed.

This simple interface streamlines data management and enhances overall usability.



Step 4 – Connecting Your JavaScript App with Back4app

With the backend set, the next step is to integrate your JavaScript application with Back4app.

Option A: Utilizing the Parse JavaScript SDK

  1. Include the Parse SDK: If you are using npm, install the SDK by running:

    Bash
    
  2. Initialize Parse in Your Application: Create an initialization file (e.g., parseConfig.js):

    JS
    



Text


Option B: Using REST or GraphQL

If you prefer not to use the Parse SDK, you can interact with Back4app through REST calls. For instance, to retrieve items using REST:

JS


Integrate these API calls within your JavaScript modules as needed.



Step 5 – Protecting Your Backend

Configuring Access Controls

Ensure your data is secure by setting up Access Control Lists (ACLs). For instance, to create an item accessible only by its creator:

JS


Adjusting Class-Level Permissions (CLPs)

Set default access rules for your collections via the Back4app dashboard, ensuring that only authenticated users can access sensitive data.



Step 6 – Implementing User Authentication

Setting Up User Accounts

Back4app uses the built-in Parse User class to handle authentication. In your JavaScript application, manage user registration and login as follows:

JS


This method can be extended for session management, password recovery, and more.



Step 7 – Deploying Your JavaScript Application

Back4app simplifies deployment. You can deploy your JavaScript app using methods like Docker containerization.

7.1 Building Your Application

  1. Bundle Your Application: Use your build tool (like webpack or a similar bundler) to compile your code.
  2. Verify the Build: Ensure that your bundled files contain all the necessary modules and assets.


7.2 Organizing Your Project Structure

A typical JavaScript project structure might look like:

Text


Example: parseConfig.js

JS


7.3 Dockerizing Your JavaScript App

If you choose containerization, include a Dockerfile in your project root:

Dockerfile


7.4 Deploying via Back4app Web Deployment

  1. Connect Your GitHub Repository: Make sure your JavaScript project is hosted on GitHub.
  2. Configure Deployment Settings: In the Back4app dashboard, use the Web Deployment option to link your repository (e.g., Basic-CRUD-App-JavaScript) and select the desired branch.
  3. Set Build and Output Commands: Specify your build command (such as npm run build) and the output directory.
  4. Deploy: Hit Deploy and watch the logs until your application goes live.


Step 8 – Final Thoughts and Future Enhancements

Congratulations! You have successfully developed a JavaScript-based CRUD application integrated with Back4app.

You set up a project called Basic-CRUD-App-JavaScript, structured your Items and Users collections, and managed your backend using the Back4app Admin App.

Additionally, you connected your JavaScript application via the Parse SDK (or REST API) and implemented robust security measures.

What to Explore Next:

  • Enhance Functionality: Consider adding features like search filters, detailed views, or real-time data updates.
  • Expand Backend Features: Look into cloud functions, integrating third-party APIs, or implementing advanced role-based access controls.
  • Deepen Your Expertise: Visit the Back4app documentation and explore additional tutorials to further optimize your app.

Happy coding, and enjoy building your advanced JavaScript CRUD application!