Quickstarters
How to Build a Remix Frontend and Connect It to a Backend?

22min
In this tutorial, you’ll build a To-Do List application using Remix and connect it to a managed backend service on Back4app. 
This step-by-step guide is designed to help you master essential CRUD operations and design a dynamic user interface using Remix.
Building a full-stack application involves setting up both a frontend and a backend. By using Back4app, you can leverage a scalable backend-as-a-service (BaaS), so you can focus on creating a compelling user experience without getting bogged down in server configuration.
Back4app provides a ready-to-use database, authentication, cloud functions, and SDKs for seamless integration. With these capabilities, you can quickly prototype, build, and deploy your Remix application.
Key Takeaways
By following this tutorial, you will:
Initialize a modern Remix project using industry-standard tools.
Connect your Remix frontend to a Back4app backend using the Parse SDK.
Implement CRUD operations to manage your To-Do List.
Containerize your Remix app and deploy it via Back4app Web Deployment.
Prerequisites
Before you begin, make sure you have the following:
Node.js and npm installed on your system. Verify by running node -v and npm -v in your terminal.
Basic Remix knowledge, including routing, loaders, and actions. Familiarity with React concepts is helpful since Remix builds on React.
A Back4app account to configure and manage your backend services. Sign up at Back4app if you haven’t already.
With these tools at hand, you’re set to create your Remix application and integrate it with a robust backend.
Project Setup
First, set up your local development environment and initialize your Remix project. This will ensure you have a clean and efficient foundation for your application.
Start by installing the Remix project using the following command. Replace todo-app with your desired project name:
Bash
npx create-remix@latest todo-app
npx create-remix@latest todo-app
﻿
Navigate into your new project directory:
Bash
cd todo-app
cd todo-app
﻿
Run the development server to verify everything is working:
Bash
npm run dev
npm run dev
﻿
Open the URL provided in your terminal to confirm that your Remix app is running successfully.
Setting Up the Todo Backend on Back4app
Back4app offers a powerful, managed backend powered by Parse. You’ll create a data model for your tasks, which will serve as the backbone for your To-Do List application.
Creating Your Backend Application
Log in to your Back4app dashboard and click "Create a New App."
Name your application (for example, TodoRemixApp) and select NodeJS/Parse as the backend type.
In the "Database" > "Browser" section, click "Create a Class" and choose "Custom." Name the class Task and set its Class Level Permissions to allow public read and write (you can refine these settings later).
Add the following fields to the Task class:
title (String) – The name of the task.
description (String) – Details about the task.
completed (Boolean) – Indicates if the task is done.
dueDate (Date) – Deadline for the task.
Click "Save" to finalize the schema.
Back4app Create Class page
﻿
Integrating Back4app with Remix
You’ll use the Parse JavaScript SDK to connect your Remix app with Back4app. Install the SDK by running:
Bash
npm install parse
npm install parse
﻿
Next, configure Parse within your Remix application. Open the file app/root.tsx and add the following initialization code at the top. Replace 'your-application-id' and 'your-javascript-key' with your credentials from the Back4app Dashboard (under App Settings > Security & Keys):
TypeScript
// app/root.tsx
import Parse from "parse";
import React from "react";
 
const PARSE_APP_ID = 'your-application-id';
const PARSE_JS_KEY = 'your-javascript-key';
const PARSE_SERVER_URL = 'https://parseapi.back4app.com/';
 
Parse.initialize(PARSE_APP_ID, PARSE_JS_KEY);
(Parse as any).serverURL = PARSE_SERVER_URL;
// app/root.tsx
import Parse from "parse";
import React from "react";
 
const PARSE_APP_ID = 'your-application-id';
const PARSE_JS_KEY = 'your-javascript-key';
const PARSE_SERVER_URL = 'https://parseapi.back4app.com/';
 
Parse.initialize(PARSE_APP_ID, PARSE_JS_KEY);
(Parse as any).serverURL = PARSE_SERVER_URL;
﻿
To ensure that Parse is fully initialized when your loader function runs, especially on the server side.
Add this code to your layout function in the root.tsx file.
TypeScript
// app/root.tsx
export function Layout({ children }: { children: React.ReactNode }) {
  React.useEffect(() => {
    if (typeof window !== 'undefined') {
      Parse.initialize(PARSE_APP_ID, PARSE_JS_KEY);
      (Parse as any).serverURL = "https://parseapi.back4app.com/";
    }
  }, []);
  
  // Rest of the layout function
}
// app/root.tsx
export function Layout({ children }: { children: React.ReactNode }) {
  React.useEffect(() => {
    if (typeof window !== 'undefined') {
      Parse.initialize(PARSE_APP_ID, PARSE_JS_KEY);
      (Parse as any).serverURL = "https://parseapi.back4app.com/";
    }
  }, []);
  
  // Rest of the layout function
}
﻿
This setup allows your Remix routes and actions to interact with your Back4app backend seamlessly.
Building the Frontend with Remix
With your backend configured, you’ll now build the To-Do List interface using Remix. This involves creating routes, loaders, and actions to handle data fetching and mutations.
Structuring Your Routes
In Remix, every route corresponds to a file under the app/routes directory. Open app/routes/_index.tsx and add the following code to define the page’s structure and data operations:
TypeScript
// app/routes/_index.tsx
import { json, redirect } from "@remix-run/node";
import { useLoaderData, Form } from "@remix-run/react";
import * as Parse from "parse";
 
export const loader = async () => {
  if (typeof window === "undefined") {
    try {
      const response = await fetch(
        "https://parseapi.back4app.com/classes/Task",
        {
          headers: {
            "X-Parse-Application-Id":
              "your-application-id",
            "X-Parse-JavaScript-Key":
              "your-javascript-key",
          },
        }
      );
      const data = await response.json();
      return json({
        tasks: data.results.map((task) => ({ id: task.objectId, ...task })),
      });
    } catch (error) {
      console.error("Error fetching tasks:", error);
      return json({ tasks: [] });
    }
  } else {
    try {
      const Task = Parse.Object.extend("Task");
      const query = new Parse.Query(Task);
      const results = await query.find();
      const tasks = results.map((task) => ({ id: task.id, ...task.toJSON() }));
      return json({ tasks });
    } catch (error) {
      console.error("Error fetching tasks:", error);
      return json({ tasks: [] });
    }
  }
};
 
export const action = async ({ request }) => {
  const formData = await request.formData();
  const actionType = formData.get("actionType");
  // Parse server details
  const parseServerUrl = "https://parseapi.back4app.com";
  const headers = {
    "X-Parse-Application-Id": "your-application-id",
    "X-Parse-JavaScript-Key": "your-javascript-key",
    "Content-Type": "application/json",
  };
  try {
    if (actionType === "add") {
      const title = formData.get("title");
      const description = formData.get("description");
      // Create task using REST API
      const response = await fetch(`${parseServerUrl}/classes/Task`, {
        method: "POST",
        headers,
        body: JSON.stringify({
          title,
          description,
          completed: false,
        }),
      });
      if (!response.ok) {
        throw new Error(`Failed to add task: ${response.status}`);
      }
    } else if (actionType === "toggle") {
      const id = formData.get("id");
      // First get the current task to check its completed status
      const getResponse = await fetch(`${parseServerUrl}/classes/Task/${id}`, {
        headers,
      });
      if (!getResponse.ok) {
        throw new Error(`Failed to get task: ${getResponse.status}`);
      }
      const task = await getResponse.json();
      const updateResponse = await fetch(
        `${parseServerUrl}/classes/Task/${id}`,
        {
          method: "PUT",
          headers,
          body: JSON.stringify({
            completed: !task.completed,
          }),
        }
      );
      if (!updateResponse.ok) {
        throw new Error(`Failed to update task: ${updateResponse.status}`);
      }
    } else if (actionType === "delete") {
      const id = formData.get("id");

      const deleteResponse = await fetch(
        `${parseServerUrl}/classes/Task/${id}`,
        {
          method: "DELETE",
          headers,
        }
      );
      if (!deleteResponse.ok) {
        throw new Error(`Failed to delete task: ${deleteResponse.status}`);
      }
    }
    return redirect("/");
  } catch (error) {
    console.error("Error processing action:", error);
    return json({ error: error.message }, { status: 400 });
  }
};
 
export default function TodoRoute() {
  const { tasks } = useLoaderData();
  return (
    <div className="container">
      <h1>To-Do List</h1>
      <Form method="post" className="form">
        <input type="hidden" name="actionType" value="add" />
        <input type="text" name="title" placeholder="Task Title" required />
        <input type="text" name="description" placeholder="Description" required />
        <button type="submit">Add Task</button>
      </Form>
      <div className="tasks">
        {tasks.length === 0 ? (
          <p>No tasks available</p>
        ) : (
          tasks.map(task => (
            <div key={task.id} className={`task-item ${task.completed ? "completed" : ""}`}>
              <h3>{task.title}</h3>
              <p>{task.description}</p>
              <Form method="post">
                <input type="hidden" name="actionType" value="toggle" />
                <input type="hidden" name="id" value={task.id} />
                <button type="submit">{task.completed ? "Undo" : "Complete"}</button>
              </Form>
              <Form method="post">
                <input type="hidden" name="actionType" value="delete" />
                <input type="hidden" name="id" value={task.id} />
                <button type="submit">Delete</button>
              </Form>
            </div>
          ))
        )}
      </div>
    </div>
  );
}
// app/routes/_index.tsx
import { json, redirect } from "@remix-run/node";
import { useLoaderData, Form } from "@remix-run/react";
import * as Parse from "parse";
 
export const loader = async () => {
  if (typeof window === "undefined") {
    try {
      const response = await fetch(
        "https://parseapi.back4app.com/classes/Task",
        {
          headers: {
            "X-Parse-Application-Id":
              "your-application-id",
            "X-Parse-JavaScript-Key":
              "your-javascript-key",
          },
        }
      );
      const data = await response.json();
      return json({
        tasks: data.results.map((task) => ({ id: task.objectId, ...task })),
      });
    } catch (error) {
      console.error("Error fetching tasks:", error);
      return json({ tasks: [] });
    }
  } else {
    try {
      const Task = Parse.Object.extend("Task");
      const query = new Parse.Query(Task);
      const results = await query.find();
      const tasks = results.map((task) => ({ id: task.id, ...task.toJSON() }));
      return json({ tasks });
    } catch (error) {
      console.error("Error fetching tasks:", error);
      return json({ tasks: [] });
    }
  }
};
 
export const action = async ({ request }) => {
  const formData = await request.formData();
  const actionType = formData.get("actionType");
  // Parse server details
  const parseServerUrl = "https://parseapi.back4app.com";
  const headers = {
    "X-Parse-Application-Id": "your-application-id",
    "X-Parse-JavaScript-Key": "your-javascript-key",
    "Content-Type": "application/json",
  };
  try {
    if (actionType === "add") {
      const title = formData.get("title");
      const description = formData.get("description");
      // Create task using REST API
      const response = await fetch(`${parseServerUrl}/classes/Task`, {
        method: "POST",
        headers,
        body: JSON.stringify({
          title,
          description,
          completed: false,
        }),
      });
      if (!response.ok) {
        throw new Error(`Failed to add task: ${response.status}`);
      }
    } else if (actionType === "toggle") {
      const id = formData.get("id");
      // First get the current task to check its completed status
      const getResponse = await fetch(`${parseServerUrl}/classes/Task/${id}`, {
        headers,
      });
      if (!getResponse.ok) {
        throw new Error(`Failed to get task: ${getResponse.status}`);
      }
      const task = await getResponse.json();
      const updateResponse = await fetch(
        `${parseServerUrl}/classes/Task/${id}`,
        {
          method: "PUT",
          headers,
          body: JSON.stringify({
            completed: !task.completed,
          }),
        }
      );
      if (!updateResponse.ok) {
        throw new Error(`Failed to update task: ${updateResponse.status}`);
      }
    } else if (actionType === "delete") {
      const id = formData.get("id");

      const deleteResponse = await fetch(
        `${parseServerUrl}/classes/Task/${id}`,
        {
          method: "DELETE",
          headers,
        }
      );
      if (!deleteResponse.ok) {
        throw new Error(`Failed to delete task: ${deleteResponse.status}`);
      }
    }
    return redirect("/");
  } catch (error) {
    console.error("Error processing action:", error);
    return json({ error: error.message }, { status: 400 });
  }
};
 
export default function TodoRoute() {
  const { tasks } = useLoaderData();
  return (
    <div className="container">
      <h1>To-Do List</h1>
      <Form method="post" className="form">
        <input type="hidden" name="actionType" value="add" />
        <input type="text" name="title" placeholder="Task Title" required />
        <input type="text" name="description" placeholder="Description" required />
        <button type="submit">Add Task</button>
      </Form>
      <div className="tasks">
        {tasks.length === 0 ? (
          <p>No tasks available</p>
        ) : (
          tasks.map(task => (
            <div key={task.id} className={`task-item ${task.completed ? "completed" : ""}`}>
              <h3>{task.title}</h3>
              <p>{task.description}</p>
              <Form method="post">
                <input type="hidden" name="actionType" value="toggle" />
                <input type="hidden" name="id" value={task.id} />
                <button type="submit">{task.completed ? "Undo" : "Complete"}</button>
              </Form>
              <Form method="post">
                <input type="hidden" name="actionType" value="delete" />
                <input type="hidden" name="id" value={task.id} />
                <button type="submit">Delete</button>
              </Form>
            </div>
          ))
        )}
      </div>
    </div>
  );
}
﻿
This route uses Remix’s loaders and actions to fetch tasks from Back4app and handle user interactions like adding, toggling, and deleting tasks.
Styling Your Remix App
Create a CSS file at app/global.css to define the basic look and feel of your application:
CSS
/* app/global.css */
.container {
  max-width: 600px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
  font-family: sans-serif;
}
 
.container h1 {
  margin-bottom: 20px;
}
 
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
 
.form input[type="text"] {
  width: 80%;
  max-width: 400px;
  padding: 8px;
  font-size: 1rem;
}
 
.form button {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 1rem;
  border: none;
  background-color: #eaeaea;
  transition: background-color 0.2s ease;
}
 
.form button:hover {
  background-color: #ccc;
}
 
.tasks p {
  font-size: 1rem;
}
 
.task-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 15px;
  margin: 10px 0;
  background-color: #fafafa;
  text-align: center;
  transition: background-color 0.2s ease;
}
 
.task-item.completed h3,
.task-item.completed p {
  text-decoration: line-through;
  color: #888;
}
 
.task-item h3 {
  margin: 0;
  font-size: 1.1rem;
}
 
.task-item p {
  margin: 0;
  font-size: 1rem;
}
 
.task-item button {
  padding: 6px 12px;
  border: none;
  background-color: #eaeaea;
  cursor: pointer;
  font-size: 0.9rem;
}
 
.task-item button:hover {
  background-color: #ccc;
}
 
@media (min-width: 600px) {
  .task-item {
    flex-direction: row;
  }
}
/* app/global.css */
.container {
  max-width: 600px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
  font-family: sans-serif;
}
 
.container h1 {
  margin-bottom: 20px;
}
 
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
 
.form input[type="text"] {
  width: 80%;
  max-width: 400px;
  padding: 8px;
  font-size: 1rem;
}
 
.form button {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 1rem;
  border: none;
  background-color: #eaeaea;
  transition: background-color 0.2s ease;
}
 
.form button:hover {
  background-color: #ccc;
}
 
.tasks p {
  font-size: 1rem;
}
 
.task-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 15px;
  margin: 10px 0;
  background-color: #fafafa;
  text-align: center;
  transition: background-color 0.2s ease;
}
 
.task-item.completed h3,
.task-item.completed p {
  text-decoration: line-through;
  color: #888;
}
 
.task-item h3 {
  margin: 0;
  font-size: 1.1rem;
}
 
.task-item p {
  margin: 0;
  font-size: 1rem;
}
 
.task-item button {
  padding: 6px 12px;
  border: none;
  background-color: #eaeaea;
  cursor: pointer;
  font-size: 0.9rem;
}
 
.task-item button:hover {
  background-color: #ccc;
}
 
@media (min-width: 600px) {
  .task-item {
    flex-direction: row;
  }
}
﻿
Import the CSS file in your app/root.tsx by adding:
TypeScript
// app/root.tsx
import "./global.css";
// app/root.tsx
import "./global.css";
﻿
Your Remix app now has a functional To-Do List interface that interacts with Back4app’s backend.
Containerizing and Deploying Your Remix App on Back4app
Back4app Web Deployment offers a containerized environment for your applications. You’ll package your Remix app into a Docker container and deploy it.
Configuring Remix for Production
Before containerizing, build your Remix app into a production-ready bundle:
Bash
npm run build
npm run build
﻿
Creating a Dockerfile
Create a Dockerfile in your project’s root with the following content:
Dockerfile
# Stage 1: Build the Remix app
FROM node:18-alpine AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
 
# Stage 2: Serve the app using a lightweight Node server
FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/build ./build
COPY --from=builder /app/package.json ./
RUN npm install --production
EXPOSE 3000
CMD ["npm", "run", "start"]
# Stage 1: Build the Remix app
FROM node:18-alpine AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
 
# Stage 2: Serve the app using a lightweight Node server
FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/build ./build
COPY --from=builder /app/package.json ./
RUN npm install --production
EXPOSE 3000
CMD ["npm", "run", "start"]
﻿
This Dockerfile builds your Remix project and prepares it for production using a minimal Node.js runtime.
Building and Testing Your Docker Container
Build your Docker image locally:
Bash
docker build -t todo-remix-frontend .
docker build -t todo-remix-frontend .
﻿
Run the container to test the deployment:
Bash
docker run -p 8080:3000 todo-remix-frontend
docker run -p 8080:3000 todo-remix-frontend
﻿
Visit http://localhost:8080 in your browser to verify that your Remix app is running correctly.
Deploying via Back4app Web Deployment
Push your project to GitHub:
Bash
git init
git add .
git commit -m "Initial commit for Back4app deployment"
git branch -M main
git remote add origin <your-github-repository-url>
git push -u origin main
git init
git add .
git commit -m "Initial commit for Back4app deployment"
git branch -M main
git remote add origin <your-github-repository-url>
git push -u origin main
﻿
Then, log in to Back4app Web Deployment and follow these steps:
Click "Create New App" and name your project.
Select GitHub Repository and authorize Back4app.
Choose your todo-remix repository.
Select Dockerfile Deployment and confirm the build settings.
Click "Deploy" to start your build.
After deployment, monitor your container via the Back4app Dashboard. You can view logs, manage builds, and configure custom domains.
Back4app Web Deployment Dashboard
﻿
Testing and Debugging Your Application
Once deployed, ensure your application functions as expected. Here’s how to verify frontend-backend integration:
API Connectivity: Open your browser’s developer console (F12) and check network requests when adding, toggling, or deleting tasks.
Data Persistence: Add tasks through the UI and refresh the page to confirm they’re saved. Verify changes in the Back4app Database Browser under the Task class.
CRUD Operations: Test toggling completion status and deleting tasks. If issues arise, inspect the console and API logs.
Edge Case Handling: Try submitting empty inputs to ensure your validations are effective.
Best Practices and Optimization Tips
Follow these recommendations to enhance security, performance, and scalability:
Optimize API Calls: Use batch requests and select only necessary fields in queries.
Environment Variables: Store sensitive keys (Application ID and JavaScript Key) in a .env file and reference them securely.
Access Control: Implement dynamic ACLs to restrict data modifications to authenticated users.
Cloud Code: Offload complex logic to Back4app Cloud Code for improved performance and security.
Conclusion
You have successfully built a full-stack To-Do List application with Remix and connected it to a Back4app backend. 
This tutorial guided you through initializing a Remix project, integrating a manage service for backend interactions, and containerizing your application for deployment.
Now that your app is live, consider expanding its features with advanced user management, real-time updates, or third-party integrations. 
For further guidance, explore the Back4app Documentation and Remix resources.
How to Build a Qwik Frontend and Connect It to a Backend?
How to Build an Astro Frontend and Connect It to a Backend?