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

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 https //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 https //www back4app com/ 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 https //nodejs org/ confirm the installation 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) npm create vite\@latest todo app template solid change to your project directory cd todo app install all necessary dependencies npm install start the development server to confirm your setup 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 https //www back4app com/ 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 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 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 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 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 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 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 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 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 / 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 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 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 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 npm run build creating a dockerfile for your app create a dockerfile in the project root to define how your app is containerized \# 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 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 docker build t todo solid frontend run the container 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 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 https //www back4app com/containers 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 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 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 https //www back4app com/docs