Quickstarters
How to Build a Solid.js Frontend and Connect It to a Backend

33min
In this guide, you’ll build a To-Do List application using Solid.js and connect it to a robust backend powered by Back4app.
This tutorial is designed as an ideal starting point because it covers fundamental CRUD (Create, Read, Update, Delete) operations and guides you through designing a clear and functional user interface. 
By the end, you’ll have a fully operational app that demonstrates how to integrate a managed backend service while leveraging Solid.js for a responsive frontend.
Developing a full-stack application can be challenging due to the complexities of setting up a backend, managing a database, handling authentication, and deploying infrastructure. 
To simplify this process, we use Back4app, which offers a scalable backend-as-a-service (BaaS) solution, letting you concentrate on crafting your frontend while it manages hosting, databases, and APIs.
Back4app provides comprehensive backend services, including a ready-to-use database, authentication, Cloud Code for server-side logic, and SDKs for smooth integration. It also supports containerized deployments, making it a flexible choice for hosting full-stack applications.
With these tools, you can quickly develop and deploy applications without worrying about server maintenance.
Key Takeaways
By following this tutorial you will learn to:
Initialize a modern Solid.js project using Vite.
Seamlessly integrate a backend service to handle your application’s data.
Implement essential CRUD operations for a dynamic and interactive user interface.
Deploy a fully functional To-Do List application using containerized workflows on Back4app.
Prerequisites
Ensure you have these tools and skills before you begin:
Node.js and npm: Install Node.js (LTS recommended) from nodejs.org and verify by running node -v and npm -v in your terminal.
Basic Solid.js knowledge: Familiarity with components, reactive signals (using createSignal), and JSX syntax is required. If you’re new to Solid.js, consider reviewing its fundamentals first.
A Back4app account: Sign up at Back4app to set up and manage your backend services.
With these prerequisites in place, you’re ready to set up your project and start building.
Project Setup
Begin by setting up your local development environment and initializing your Solid.js project using Vite for a rapid development experience.
Verify that Node.js (LTS version) is installed on your machine. If needed, download and install it from nodejs.org. Confirm the installation:
Bash
node -v
npm -v
node -v
npm -v
﻿
Initialize your Solid.js project using Vite. Run the following command in your terminal (replace todo-app with your desired project name):
Bash
npm create vite@latest todo-app --template solid
npm create vite@latest todo-app --template solid
﻿
Change to your project directory:
Bash
cd todo-app
cd todo-app
﻿
Install all necessary dependencies:
Bash
npm install
npm install
﻿
Start the development server to confirm your setup:
Bash
npm run dev
npm run dev
﻿
Your Solid.js application should now be running locally. Open the displayed URL in your browser to verify. Next, you’ll set up your backend on Back4app to manage data storage and API interactions.
Creating the Todo Backend
Back4app offers a fully managed backend service powered by Parse, delivering a NoSQL database, authentication, Cloud Code, and auto-generated APIs right out of the box.
This section guides you through creating a Task data model to store your to-do list items and linking it with your Solid.js frontend.
Setting Up Your Backend Application
Log in to your Back4app dashboard and click on "Create a New App."
Name your application (e.g., TodoSolidApp) and choose NodeJS/Parse as the backend type.
Once the app is created, navigate to "Database" > "Browser". Click "Create a Class" and select "Custom". Name the class Task and set the Class Level Permissions to allow public read and write (you can tighten these settings later).
In the Task class, add the following fields:
title (String) – The task title.
description (String) – Details of the task.
completed (Boolean) – Status indicating if the task is finished.
dueDate (Date) – Deadline for the task.
Click "Save" to finalize your schema.
Back4app Create Class page
﻿
Integrating Back4app with Solid.js
Integrate Back4app into your Solid.js project using the Parse JavaScript SDK to communicate with your backend. Install the SDK via npm:
Bash
npm install parse
npm install parse
﻿
Configure the SDK by initializing it with your Application ID and JavaScript Key. Retrieve these from your Back4app Dashboard under App Settings > Security & Keys.
In your src/index.jsx (or equivalent entry file), import and configure Parse as follows:
JS
import { render } from "solid-js/web";
import './index.css'
import App from "./App";
import Parse from "parse/dist/parse.min.js";

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.serverURL = PARSE_SERVER_URL;

render(() => <App />, document.getElementById("root"));
import { render } from "solid-js/web";
import './index.css'
import App from "./App";
import Parse from "parse/dist/parse.min.js";

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.serverURL = PARSE_SERVER_URL;

render(() => <App />, document.getElementById("root"));
﻿
With the backend configured, you’re set to build the To-Do List UI in Solid.js and implement CRUD operations.
Developing the Frontend with Solid.js
Now that your backend is connected, build the user interface for your To-Do List application using Solid.js. You’ll create components to add, display, update, and delete tasks while managing state with reactive signals.
Organizing Your Components
Your application will consist of these key components:
TaskForm.jsx – Manages adding new tasks.
TaskList.jsx – Displays all tasks and offers controls to complete or remove them.
TaskItem.jsx – Represents an individual task with actions to mark as complete or delete.
Create a components folder inside src and add these files:
Bash
mkdir src/components
touch src/components/TaskForm.jsx src/components/TaskList.jsx src/components/TaskItem.jsx
mkdir src/components
touch src/components/TaskForm.jsx src/components/TaskList.jsx src/components/TaskItem.jsx
﻿
Managing State with Solid.js
Utilize Solid.js’s createSignal and createEffect for state management and side effects. Begin by setting up state in App.jsx:
JS
import { createSignal, onMount } from "solid-js";
import TaskForm from "./components/TaskForm";
import TaskList from "./components/TaskList";
import Parse from "parse/dist/parse.min.js";

function App() {
  const [tasks, setTasks] = createSignal([]);

  const fetchTasks = async () => {
    try {
      const Task = Parse.Object.extend("Task");
      const query = new Parse.Query(Task);
      const results = await query.find();
      setTasks(results.map(task => ({ id: task.id, ...task.toJSON() })));
    } catch (error) {
      console.error("Error fetching tasks:", error);
    }
  };

  onMount(fetchTasks);

  return (
    <div class="container">
      <h1>To-Do List</h1>
      <TaskForm fetchTasks={fetchTasks} />
      <TaskList tasks={tasks()} fetchTasks={fetchTasks} />
    </div>
  );
}

export default App;
import { createSignal, onMount } from "solid-js";
import TaskForm from "./components/TaskForm";
import TaskList from "./components/TaskList";
import Parse from "parse/dist/parse.min.js";

function App() {
  const [tasks, setTasks] = createSignal([]);

  const fetchTasks = async () => {
    try {
      const Task = Parse.Object.extend("Task");
      const query = new Parse.Query(Task);
      const results = await query.find();
      setTasks(results.map(task => ({ id: task.id, ...task.toJSON() })));
    } catch (error) {
      console.error("Error fetching tasks:", error);
    }
  };

  onMount(fetchTasks);

  return (
    <div class="container">
      <h1>To-Do List</h1>
      <TaskForm fetchTasks={fetchTasks} />
      <TaskList tasks={tasks()} fetchTasks={fetchTasks} />
    </div>
  );
}

export default App;
﻿
Building the Task Form Component
In TaskForm.jsx, create a controlled form to add tasks. Manage input values with createSignal and submit data to Back4app:
JS
import { createSignal } from "solid-js";
import Parse from "parse/dist/parse.min.js";

function TaskForm(props) {
  const [title, setTitle] = createSignal("");
  const [description, setDescription] = createSignal("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const Task = Parse.Object.extend("Task");
      const task = new Task();
      task.set("title", title());
      task.set("description", description());
      task.set("completed", false);
      await task.save();
      props.fetchTasks();
      setTitle("");
      setDescription("");
    } catch (error) {
      console.error("Error adding task:", error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Task Title"
        value={title()}
        onInput={(e) => setTitle(e.target.value)}
        required
      />
      <input
        type="text"
        placeholder="Description"
        value={description()}
        onInput={(e) => setDescription(e.target.value)}
        required
      />
      <button type="submit">Add Task</button>
    </form>
  );
}

export default TaskForm;
import { createSignal } from "solid-js";
import Parse from "parse/dist/parse.min.js";

function TaskForm(props) {
  const [title, setTitle] = createSignal("");
  const [description, setDescription] = createSignal("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const Task = Parse.Object.extend("Task");
      const task = new Task();
      task.set("title", title());
      task.set("description", description());
      task.set("completed", false);
      await task.save();
      props.fetchTasks();
      setTitle("");
      setDescription("");
    } catch (error) {
      console.error("Error adding task:", error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Task Title"
        value={title()}
        onInput={(e) => setTitle(e.target.value)}
        required
      />
      <input
        type="text"
        placeholder="Description"
        value={description()}
        onInput={(e) => setDescription(e.target.value)}
        required
      />
      <button type="submit">Add Task</button>
    </form>
  );
}

export default TaskForm;
﻿
Displaying the Task List
In TaskList.jsx, render the list of tasks using the TaskItem component for each entry:
JS
import TaskItem from "./TaskItem";

function TaskList(props) {
  return (
    <div>
      {props.tasks.length === 0 ? (
        <p>No tasks available</p>
      ) : (
        props.tasks.map(task => (
          <TaskItem key={task.id} task={task} fetchTasks={props.fetchTasks} />
        ))
      )}
    </div>
  );
}

export default TaskList;
import TaskItem from "./TaskItem";

function TaskList(props) {
  return (
    <div>
      {props.tasks.length === 0 ? (
        <p>No tasks available</p>
      ) : (
        props.tasks.map(task => (
          <TaskItem key={task.id} task={task} fetchTasks={props.fetchTasks} />
        ))
      )}
    </div>
  );
}

export default TaskList;
﻿
Creating the Task Item Component
In TaskItem.jsx, set up actions to mark a task as complete or delete it:
JS
import Parse from "parse/dist/parse.min.js";

function TaskItem(props) {
  const handleComplete = async () => {
    try {
      const query = new Parse.Query("Task");
      const taskToUpdate = await query.get(props.task.id);
      taskToUpdate.set("completed", !props.task.completed);
      await taskToUpdate.save();
      props.fetchTasks();
    } catch (error) {
      console.error("Error updating task:", error);
    }
  };

  const handleDelete = async () => {
    try {
      const query = new Parse.Query("Task");
      const taskToDelete = await query.get(props.task.id);
      await taskToDelete.destroy();
      props.fetchTasks();
    } catch (error) {
      console.error("Error deleting task:", error);
    }
  };

  return (
    <div class={`task-item ${props.task.completed ? "completed" : ""}`}>
      <h3>{props.task.title}</h3>
      <p>{props.task.description}</p>
      <button onClick={handleComplete}>
        {props.task.completed ? "Undo" : "Complete"}
      </button>
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
}

export default TaskItem;
import Parse from "parse/dist/parse.min.js";

function TaskItem(props) {
  const handleComplete = async () => {
    try {
      const query = new Parse.Query("Task");
      const taskToUpdate = await query.get(props.task.id);
      taskToUpdate.set("completed", !props.task.completed);
      await taskToUpdate.save();
      props.fetchTasks();
    } catch (error) {
      console.error("Error updating task:", error);
    }
  };

  const handleDelete = async () => {
    try {
      const query = new Parse.Query("Task");
      const taskToDelete = await query.get(props.task.id);
      await taskToDelete.destroy();
      props.fetchTasks();
    } catch (error) {
      console.error("Error deleting task:", error);
    }
  };

  return (
    <div class={`task-item ${props.task.completed ? "completed" : ""}`}>
      <h3>{props.task.title}</h3>
      <p>{props.task.description}</p>
      <button onClick={handleComplete}>
        {props.task.completed ? "Undo" : "Complete"}
      </button>
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
}

export default TaskItem;
﻿
Styling Your Application
Add the followig styles in the index.css file in the src folder:
CSS
/* Center the content and add spacing */
.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;
  box-sizing: border-box;
  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;
}

.container p {
  font-size: 1rem;
}

.task-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: 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;
  }
}
/* Center the content and add spacing */
.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;
  box-sizing: border-box;
  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;
}

.container p {
  font-size: 1rem;
}

.task-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: 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 src/index.jsx:
JS
import "./index.css";
import "./index.css";
﻿
Finalizing the UI
Your Solid.js To-Do List application now features a dynamic frontend integrated with Back4app and custom styling. The app lets you add, display, update, and delete tasks while maintaining efficient frontend-backend communication.
Todo List App
﻿
Next, you’ll deploy your Solid.js app using Back4app’s Web Deployment platform.
Deploying the Frontend on Back4app Web Deployment
Back4app Web Deployment offers a fully managed, containerized environment to deploy your applications. With Docker-based deployments, you can package your Solid.js frontend and deploy it effortlessly.
Configuring Vite for Production
Solid.js applications built with Vite run in development mode by default. For production, build a static version and serve it with a lightweight web server like Nginx.
Update your vite.config.js to set the proper base path:
JS
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
  base: './', // Ensures correct asset paths in containerized environments
});
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
  base: './', // Ensures correct asset paths in containerized environments
});
﻿
Generate production-ready files:
Bash
npm run build
npm run build
﻿
Creating a Dockerfile for Your App
Create a Dockerfile in the project root to define how your app is containerized:
Dockerfile
# Use an official lightweight Node.js image to build the app
FROM node:18-alpine AS build

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm install

COPY . .
RUN npm run build

# Use Nginx to serve the static files
FROM nginx:alpine

# Copy custom nginx config for SPA routing
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copy built app from build stage
COPY --from=build /app/dist /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official lightweight Node.js image to build the app
FROM node:18-alpine AS build

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm install

COPY . .
RUN npm run build

# Use Nginx to serve the static files
FROM nginx:alpine

# Copy custom nginx config for SPA routing
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copy built app from build stage
COPY --from=build /app/dist /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
After creating your dockerfile, configure Nginx to properly route requests to your Solid.js application's root index.html file when you try to access routes directly. To do this, create a nginx.conf file in your project's root directory and paste the code block below.
Text
server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    # Gzip settings for better performance
    gzip on;
    gzip_vary on;
    gzip_min_length 10240;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/javascript;
    gzip_disable "MSIE [1-6]\.";

    # Handle static file requests
    location ~* \.(?:jpg|jpeg|gif|png|ico|svg|woff2|woff|eot|ttf|css|js)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
        try_files $uri =404;
    }

    # Redirect all requests to index.html for SPA routing
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Error pages
    error_page 404 /index.html;
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}
server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    # Gzip settings for better performance
    gzip on;
    gzip_vary on;
    gzip_min_length 10240;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/javascript;
    gzip_disable "MSIE [1-6]\.";

    # Handle static file requests
    location ~* \.(?:jpg|jpeg|gif|png|ico|svg|woff2|woff|eot|ttf|css|js)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
        try_files $uri =404;
    }

    # Redirect all requests to index.html for SPA routing
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Error pages
    error_page 404 /index.html;
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}
﻿
Testing the Container Locally
Before deployment, build and test your Docker container:
Bash
docker build -t todo-solid-frontend .
docker build -t todo-solid-frontend .
﻿
Run the container:
Bash
docker run -p 8080:80 todo-solid-frontend
docker run -p 8080:80 todo-solid-frontend
﻿
Visit http://localhost:8080 in your browser to confirm that your app is served correctly.
Pushing to GitHub and Deploying via Back4app
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, deploy using Back4app Web Deployment:
Log in to Back4app Web Deployment.
Click "Create New App", provide a name, and select GitHub Repository.
Authorize Back4app to access your repository and select the todo-solid repo.
Choose Dockerfile Deployment and confirm the build settings.
Click "Deploy" to start the build process.
Monitoring and Managing Deployments
After deployment, use the Back4app Dashboard to:
View logs for debugging.
Monitor container performance and resource usage.
Trigger redeployments with new commits.
Configure custom domains if desired.
Back4app Web Deployment Dashboard
﻿
Testing and Debugging Your Application
Once deployed, test your Solid.js app thoroughly:
Verify API Connectivity: Open the browser’s developer console (F12 → Network) to check for API calls during task operations.
Add and Retrieve Tasks: Use the UI to add tasks, then refresh and confirm data persistence in Back4app’s Database Browser.
CRUD Operations: Test marking tasks complete and deletion, ensuring updates reflect in the backend.
Handle Edge Cases: Validate form inputs and simulate slower network conditions using browser developer tools.
If issues arise, consult the Back4app logs or review your API configuration.
Best Practices for Using Back4app Services
Enhance your application’s performance and security by:
Optimizing API Calls: Use batch requests for multiple operations and select only necessary fields in queries.
Securing Environment Variables: Store sensitive credentials in environment variables. With Vite, create a .env file:
Text
VITE_PARSE_APP_ID=your-app-id
VITE_PARSE_JS_KEY=your-js-key
VITE_PARSE_APP_ID=your-app-id
VITE_PARSE_JS_KEY=your-js-key
﻿
Implementing Auto-Scaling: Enable auto-scaling in Back4app Web Deployment for high traffic scenarios.
Enhancing Security: Use Class Level Permissions (CLPs) to restrict data modifications and set up ACLs as needed.
Leveraging Cloud Code: Offload complex logic to Cloud Code for improved performance and reduced API exposure.
Conclusion
You have now built a full-stack To-Do List application using Solid.js for the frontend and Back4app’s robust backend services. 
This tutorial covered the journey from initializing a Solid.js project and integrating Parse SDK to deploying your app via containerized workflows on Back4app.
As you progress, consider adding features like advanced user authentication, real-time updates, and third-party integrations to further enhance your application. 
For more details and support, explore the Back4app Documentation.
How to Build a Preact Frontend and Connect It to a Backend?
How to Build an Angular Frontend and Connect it to a Backend?