Quickstarters
How to Build a CRUD App with ReactJS?

42min
Introduction
In this tutorial, you'll build a comprehensive CRUD (create, read, update, and delete) application using ReactJS. 
This guide is designed to perform the basic operations of a software application by demonstrating how to build CRUD apps that effectively manage and update data. 
You'll start by creating and configuring a Back4app project named Basic-CRUD-App-ReactJS, which acts as a robust backend system for your web application.
Next, you'll design a scalable database schema by defining detailed collections and fields—either manually or with the help of the Back4app AI Agent. 
Then, you'll leverage the Back4app Admin App—a user-friendly management tool with a drag and drop interface—to easily data manage your collections. 
This admin interface improves user experience and simplifies the user interface, enabling users to quickly perform CRUD operations.
Finally, you'll deploy your ReactJS frontend and integrate it with Back4app using REST/GraphQL (or the Parse SDK, where available), all while securing your backend with advanced access controls.
By the end of this guide, you'll have built a production-ready web application that not only supports basic CRUD operations but also includes user authentication and robust data update capabilities.
Key Takeaways
Learn how to build CRUD applications that efficiently manage data using a reliable database management system.
Gain practical insights into designing a scalable backend and integrating it with a ReactJS frontend to enhance user experience.
Discover how to use a drag and drop management tool (the Back4app Admin App) to simplify create, read, update, and delete operations.
Understand deployment techniques, including Docker containerization, to quickly launch your web application.
﻿
Prerequisites
Before you begin, ensure you have the following:
A Back4app account and a new project set up.
If you need help, refer to Getting Started with Back4app.
A ReactJS development environment.
Use Create React App or a similar tool. Make sure Node.js (version 14 or above) is installed.
Basic understanding of JavaScript, ReactJS, and REST APIs.
Review the ReactJS documentation if necessary.
﻿
Step 1 – Project Setup
Creating a New Back4app Project
Log in to your Back4app account.
Click the “New App” button in your dashboard.
Enter the project name: Basic-CRUD-App-ReactJS and follow the prompts to create your project.
Create New Project
﻿
Once created, your new project will appear on your Back4app dashboard, providing a solid foundation for your backend configuration and project management.
﻿
Step 2 – Database Schema Design
Designing Your Data Model
For the basic CRUD app, you will create several collections. 
Below are some examples of the collections you will need, outlining the necessary fields and data types to help you set up your database schema effectively. 
These collections are designed to perform the fundamental CRUD operations that enable users to create, read, update, and delete data.
1. Items Collection
This collection stores information about each item.
Field
Data Type
Description
_id
ObjectId
Automatically generated primary key.
title
String
The title of the item.
description
String
A brief description of the item.
created_at
Date
Timestamp when the item was created.
updated_at
Date
Timestamp when the item was last updated.
2. Users Collection
This collection stores user information and authentication details.
Field
Data Type
Description
_id
ObjectId
Automatically generated primary key.
username
String
Unique username for the user.
email
String
Unique email address.
password_hash
String
Hashed password for authentication.
created_at
Date
Timestamp when the user account was created.
updated_at
Date
Timestamp when the user account was updated.
You can set up these collections manually in the Back4app dashboard by creating a new class for each collection and adding columns to define the fields.
Create New Class
﻿
You can easily create fields for your database by selecting a data type, naming the field, setting a default value, and defining whether it's required.
Create Column
﻿
﻿
Using the Back4app AI Agent for Schema Generation
The Back4app AI Agent is a powerful tool available directly from your Back4app dashboard. 
It allows you to automatically generate your database schema based on a prompt that describes your desired collections and fields. 
This functionality is a significant time-saver for project management and helps ensure that your database management system is set up to perform the basic operations required by your web application.
How to Use the AI Agent:
Open the AI Agent:
Log in to your Back4app dashboard and locate the AI Agent in the menu or within your project settings.
Describe Your Data Model:
In the AI Agent interface, paste a detailed prompt that outlines the collections and fields you need.
Review and Apply:
Once submitted, the AI Agent will generate the collections and field definitions. Review these suggestions and apply them to your project.
Example Prompt
Text
Create the following collections in my Back4app application:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - 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 application:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
Using the AI Agent in this way saves time and ensures that your schema is consistent and optimized for your application's needs.
﻿
Step 3 – Enabling the Admin App & CRUD Operations
Overview of the Admin App
The Back4app Admin App is a powerful, no-code interface that allows you to manage your backend data. 
This management tool provides a drag and drop user interface that enables users to easily perform CRUD operations such as create, read, update, and delete records.
Enabling the Admin App
Navigate to the “More” menu in your Back4app dashboard.
Click on “Admin App” and then on “Enable Admin App.”
Configure your admin credentials by creating your first admin user. This process also sets up roles (e.g., B4aAdminUser) and system collections.
Enable Admin App
﻿
After enabling, log in to the Admin App to manage your data.
Admin App Dashboard
﻿
Using the Admin App for CRUD Operations
Within the Admin App you can:
Create Records: Click the “Add Record” button within a collection (e.g., Items) to create new entries.
Read/Update Records: Select any record to view its details or edit fields, ensuring smooth data update.
Delete Records: Use the delete option to remove records that are no longer needed.
This easy-to-use management tool improves the overall user experience by providing a simple drag and drop interface for CRUD functions.
﻿
Step 4 – Integrating ReactJS with Back4app
Now that your backend is set up and managed via the Admin App, it’s time to connect your ReactJS frontend to Back4app.
Option A: Using the Parse SDK
Install the Parse SDK:
Bash
npm install parse
npm install parse
﻿
Initialize Parse in Your React App:
Create a file (e.g., src/parseConfig.js):
JS
// src/parseConfig.js
import Parse from 'parse';
// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/parseConfig.js
import Parse from 'parse';
// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Use Parse in a React Component:
For example, create a component to fetch and display items:
JS
// src/components/ItemsList.js
import React, { useEffect, useState } from 'react';
import Parse from '../parseConfig';
const ItemsList = () => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const fetchItems = async () => {
      const Items = Parse.Object.extend("Items");
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error("Error fetching items:", error);
      }
    };
    fetchItems();
  }, []);
  return (
    <div>
      <h2>Items</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ItemsList;
// src/components/ItemsList.js
import React, { useEffect, useState } from 'react';
import Parse from '../parseConfig';
const ItemsList = () => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const fetchItems = async () => {
      const Items = Parse.Object.extend("Items");
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error("Error fetching items:", error);
      }
    };
    fetchItems();
  }, []);
  return (
    <div>
      <h2>Items</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ItemsList;
﻿
Option B: Using REST or GraphQL
If your environment does not support the Parse SDK, you can perform CRUD operations using REST or GraphQL. For example, to fetch items using REST:
JS
// Example REST call to fetch items
const fetchItems = 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();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
// Example REST call to fetch items
const fetchItems = 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();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
﻿
Integrate these API calls into your React components as needed.
﻿
Step 5 – Securing Your Backend
Access Control Lists (ACLs)
Secure your data by assigning ACLs to objects. For example, to create a private item:
JS
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL: only the owner can read and write
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL: only the owner can read and write
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
﻿
Class-Level Permissions (CLPs)
In the Back4app dashboard, configure CLPs for each collection to set default access rules. This ensures that only authenticated or authorized users can access sensitive data.
﻿
Step 6 – User Authentication
Setting Up User Accounts
Back4app leverages Parse’s User class for authentication. In your React app, handle user registration and login as follows:
JS
// src/components/Auth.js
import React, { useState } from 'react';
import Parse from '../parseConfig';

export const SignUp = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('User signed up successfully!');
    } catch (error) {
      alert('Error signing up: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};
// src/components/Auth.js
import React, { useState } from 'react';
import Parse from '../parseConfig';

export const SignUp = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('User signed up successfully!');
    } catch (error) {
      alert('Error signing up: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};
﻿
A similar approach can be used for login and session management. Additional features such as social logins, email verification, and password resets can be configured in the Back4app dashboard.
﻿
Step 7 – Deploying Your ReactJS Frontend with Web Deployment
Back4app’s Web Deployment feature allows you to host your ReactJS frontend seamlessly by deploying your code from a GitHub repository. 
In this section, you’ll learn how to prepare your production build, commit your source code to GitHub, integrate your repository with Web Deployment, and deploy your site.
7.1 Prepare Your Production Build
Open your project folder in a terminal.
Run the build command:
Bash
npm run build
npm run build
﻿
This command creates a build folder containing all the optimized static files (including index.html, JavaScript, CSS, and images).
Verify the Build:
Ensure that the build folder contains an index.html file along with necessary asset subdirectories.
﻿
7.2 Organize and Upload Your Source Code
Your repository should include the full source code for your ReactJS frontend. A typical file structure might look like this:
Text
Basic-CRUD-App-ReactJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
Basic-CRUD-App-ReactJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
﻿
Sample Source Code Files
src/parseConfig.js
JS
// src/parseConfig.js
import Parse from 'parse';

// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
// src/parseConfig.js
import Parse from 'parse';

// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
src/App.js
JS
// src/App.js
import React, { useEffect, useState } from 'react';
import Parse from './parseConfig';

function App() {
  const [items, setItems] = useState([]);
  const [newItemTitle, setNewItemTitle] = useState("");
  const [newItemDescription, setNewItemDescription] = useState("");
  const [editingItemId, setEditingItemId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [editingDescription, setEditingDescription] = useState("");

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

  useEffect(() => {
    fetchItems();
  }, []);

  const handleAddItem = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", newItemTitle);
    item.set("description", newItemDescription);

    try {
      await item.save();
      setNewItemTitle("");
      setNewItemDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error saving item:", error);
    }
  };

  const handleDeleteItem = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      fetchItems();
    } catch (error) {
      console.error("Error deleting item:", error);
    }
  };

  const startEditingItem = (item) => {
    setEditingItemId(item.id);
    setEditingTitle(item.get("title"));
    setEditingDescription(item.get("description"));
  };

  const handleUpdateItem = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = editingItemId;
      item.set("title", editingTitle);
      item.set("description", editingDescription);
      await item.save();
      setEditingItemId(null);
      setEditingTitle("");
      setEditingDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Items</h1>
      <div style={{ marginBottom: '1rem' }}>
        <h2>Add Item</h2>
        <input 
          type="text" 
          placeholder="Title" 
          value={newItemTitle}
          onChange={(e) => setNewItemTitle(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <input 
          type="text" 
          placeholder="Description" 
          value={newItemDescription}
          onChange={(e) => setNewItemDescription(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <button onClick={handleAddItem}>Add Item</button>
      </div>
      <h2>Item List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id} style={{ marginBottom: '1rem' }}>
            {editingItemId === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <input
                  type="text"
                  value={editingDescription}
                  onChange={(e) => setEditingDescription(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <button onClick={handleUpdateItem}>Save</button>
                <button onClick={() => setEditingItemId(null)} style={{ marginLeft: '0.5rem' }}>
                  Cancel
                </button>
              </div>
            ) : (
              <div>
                <strong>{item.get("title")}</strong> - {item.get("description")}
                <button onClick={() => startEditingItem(item)} style={{ marginLeft: '1rem' }}>
                  Edit
                </button>
                <button onClick={() => handleDeleteItem(item.id)} style={{ marginLeft: '0.5rem' }}>
                  Delete
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

#### Commit Your Code to GitHub
1. **Initialize a Git repository** in your project folder (if you haven’t already):
   ```bash
   git init
// src/App.js
import React, { useEffect, useState } from 'react';
import Parse from './parseConfig';

function App() {
  const [items, setItems] = useState([]);
  const [newItemTitle, setNewItemTitle] = useState("");
  const [newItemDescription, setNewItemDescription] = useState("");
  const [editingItemId, setEditingItemId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [editingDescription, setEditingDescription] = useState("");

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

  useEffect(() => {
    fetchItems();
  }, []);

  const handleAddItem = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", newItemTitle);
    item.set("description", newItemDescription);

    try {
      await item.save();
      setNewItemTitle("");
      setNewItemDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error saving item:", error);
    }
  };

  const handleDeleteItem = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      fetchItems();
    } catch (error) {
      console.error("Error deleting item:", error);
    }
  };

  const startEditingItem = (item) => {
    setEditingItemId(item.id);
    setEditingTitle(item.get("title"));
    setEditingDescription(item.get("description"));
  };

  const handleUpdateItem = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = editingItemId;
      item.set("title", editingTitle);
      item.set("description", editingDescription);
      await item.save();
      setEditingItemId(null);
      setEditingTitle("");
      setEditingDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Items</h1>
      <div style={{ marginBottom: '1rem' }}>
        <h2>Add Item</h2>
        <input 
          type="text" 
          placeholder="Title" 
          value={newItemTitle}
          onChange={(e) => setNewItemTitle(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <input 
          type="text" 
          placeholder="Description" 
          value={newItemDescription}
          onChange={(e) => setNewItemDescription(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <button onClick={handleAddItem}>Add Item</button>
      </div>
      <h2>Item List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id} style={{ marginBottom: '1rem' }}>
            {editingItemId === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <input
                  type="text"
                  value={editingDescription}
                  onChange={(e) => setEditingDescription(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <button onClick={handleUpdateItem}>Save</button>
                <button onClick={() => setEditingItemId(null)} style={{ marginLeft: '0.5rem' }}>
                  Cancel
                </button>
              </div>
            ) : (
              <div>
                <strong>{item.get("title")}</strong> - {item.get("description")}
                <button onClick={() => startEditingItem(item)} style={{ marginLeft: '1rem' }}>
                  Edit
                </button>
                <button onClick={() => handleDeleteItem(item.id)} style={{ marginLeft: '0.5rem' }}>
                  Delete
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

#### Commit Your Code to GitHub
1. **Initialize a Git repository** in your project folder (if you haven’t already):
   ```bash
   git init
﻿
Add your source files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial commit of ReactJS frontend source code"
git commit -m "Initial commit of ReactJS frontend source code"
﻿
Create a GitHub repository:
For example, create a repository named Basic-CRUD-App-ReactJS-Frontend on GitHub.
Push your code to GitHub:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-ReactJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-ReactJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 Integrate Your GitHub Repository with Web Deployment
Access Web Deployment:
Log in to your Back4app dashboard, navigate to your project (Basic-CRUD-App-ReactJS), and click on the Web Deployment feature.
Connect to GitHub:
If you haven’t already, integrate your GitHub account by following the on-screen prompts. This connection allows Back4app to access your repository.
Select Your Repository and Branch:
Choose the repository you created (e.g., Basic-CRUD-App-ReactJS-Frontend) and select the branch (e.g., main) that contains your ReactJS code.
﻿
7.4 Configure Your Deployment
Provide additional configuration details:
Build Command:
If your repository does not include a pre-built build folder, specify the build command (e.g., npm run build). Back4app will run this command during deployment.
Output Directory:
Set the output directory to build so that Back4app knows which folder contains your static site files.
Environment Variables:
If your application depends on any environment variables (e.g., API keys), add them in the configuration settings.
﻿
7.5 Dockerize Your ReactJS Application Project
If you prefer using Docker for deployment, you can containerize your ReactJS application. Include a Dockerfile in your repository with content similar to the following:
Dockerfile
# Use an official Node runtime as a parent image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the React app
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node runtime as a parent image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the React app
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Include this Dockerfile in your repository. Then, in your Web Deployment configuration, select the Docker deployment option to build and deploy your containerized application.
﻿
7.6 Deploy Your Application
Click the Deploy Button:
Once you have configured the deployment settings, click the Deploy button.
Monitor the Build Process:
Back4app will pull your code from GitHub, execute the build command (if configured), and deploy your app within a container.
Obtain Your URL:
After the deployment completes, Back4app will provide a URL where your ReactJS application is hosted.
﻿
7.7 Verify Your Deployment
Visit the Provided URL:
Open the URL in your web browser to view your deployed site.
Test the Application:
Verify that your application loads correctly, all routes work as expected, and all assets (CSS, JavaScript, images) are properly served.
Troubleshoot if Needed:
Use your browser’s developer tools to check for any errors. If issues arise, review the deployment logs in Back4app and verify your GitHub integration and build settings.
﻿
Step 8 – Conclusion and Next Steps
Congratulations! You have built a complete basic CRUD app using ReactJS and Back4app. 
You configured a project named Basic-CRUD-App-ReactJS, designed detailed database collections for Items and Users, and managed your data via the powerful Admin App. 
You also integrated your ReactJS frontend with your backend and secured your data with robust access controls.
Next Steps:
Enhance Your Frontend:
Extend your ReactJS app with features such as detailed item views, search functionality, and real-time notifications.
Integrate Additional Features:
Consider adding more advanced backend logic (e.g., Cloud Functions), third-party API integrations, or role-based access controls.
Explore Further Resources:
Review the Back4app documentation and additional tutorials for deeper dives into performance optimization and custom integrations.
By following this tutorial, you now have the skills to create a robust, scalable CRUD backend for your ReactJS application using Back4app. Happy coding!
Field	Data Type	Description
_id	ObjectId	Automatically generated primary key.
title	String	The title of the item.
description	String	A brief description of the item.
created_at	Date	Timestamp when the item was created.
updated_at	Date	Timestamp when the item was last updated.
Field	Data Type	Description
_id	ObjectId	Automatically generated primary key.
username	String	Unique username for the user.
email	String	Unique email address.
password_hash	String	Hashed password for authentication.
created_at	Date	Timestamp when the user account was created.
updated_at	Date	Timestamp when the user account was updated.
Updated 17 Feb 2025
Did this page help you?
How to Build a Basic CRUD App with Angular?
How to Build a Backend for Blazor?