How to Build a Basic CRUD App with Solid?

overview in this walkthrough, you’ll learn how to develop a complete crud (create, read, update, delete) application using solidjs we’ll use back4app as our backend service, allowing you to manage data effortlessly this guide walks you through establishing a back4app project, crafting a flexible data schema, and coding crud operations within a solidjs application initially, you will set up a back4app project called basic crud app solidjs this project provides a robust, schema less data storage environment you’ll define your data model by creating collections and fields either manually or with the assistance of back4app’s ai agent next, you will handle your backend data using the user friendly back4app admin app finally, you will integrate your solidjs application with back4app through the parse javascript sdk (or via rest/graphql apis as necessary) while enforcing secure access controls by the end of this tutorial, you will have a production ready solidjs application that performs essential crud functions along with secure user authentication and data management what you’ll learn how to create a solidjs based crud app with a modern, no code backend best practices for designing a scalable backend and connecting it with your solidjs app how to navigate the back4app admin app for streamlined data operations deployment strategies, including docker containerization, to launch your solidjs application seamlessly prerequisites before you begin, make sure you have a back4app account with an active project need help? visit getting started with back4app https //www back4app com/docs/get started/new parse app a development environment set up for solidjs we recommend using visual studio code or any preferred editor, along with node js (v14 or higher) basic knowledge of solidjs, modern javascript, and restful apis brush up with the solidjs documentation https //www solidjs com/docs if needed step 1 – project initialization setting up your back4app project log in to your back4app account click the “new app” button on your dashboard name your project basic crud app solidjs and follow the prompts to complete the setup create new project after creating your project, it will appear on your dashboard, laying the foundation for your backend step 2 – crafting your data schema designing the data structure for this crud application, you will set up several collections in your back4app project below are examples of the main collections and fields required 1\ collection items this collection stores information about each item field type purpose id objectid auto generated unique identifier title string name of the item description string brief description of the item createdat date timestamp when the item was added updatedat date timestamp for the last update 2\ collection users this collection manages user credentials and authentication data field type purpose id objectid auto generated unique identifier username string unique user identifier email string unique email address passwordhash string encrypted password for secure access createdat date account creation timestamp updatedat date timestamp for last account update you can create these collections and add fields via the back4app dashboard create new class to add a new field, choose the appropriate data type, set the field name, assign a default value if needed, and mark it as required if necessary create column using the back4app ai assistant for schema creation the integrated back4app ai assistant can automatically create your data schema based on your instructions, saving you time and ensuring consistency how to use the ai assistant open the ai assistant access it via your project settings in the back4app dashboard detail your data model enter a detailed description of the collections and fields required confirm the setup review the suggested schema and approve to finalize the configuration example prompt create two collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) this ai powered method streamlines your schema creation process, ensuring an optimized data model step 3 – activating the admin dashboard & managing data operations introduction to the admin dashboard the back4app admin dashboard provides a no code interface for efficient backend management its drag and drop features make it easy to perform crud tasks such as adding, viewing, updating, and deleting records enabling the admin dashboard go to the “more” menu in your back4app dashboard select “admin app” and click “enable admin app ” set up your admin credentials by creating an initial administrator account this will also establish necessary roles (like b4aadminuser ) and system collections enable admin app after activation, log into the admin dashboard to manage your app’s data admin app dashboard handling crud operations in the admin dashboard within the dashboard, you can add records use the “add record” feature in any collection (e g , items) to input new data view/edit records click on an entry to inspect or modify its details delete records remove obsolete or unwanted entries this interface simplifies data management, offering an efficient and intuitive experience step 4 – connecting your solidjs application with back4app with the backend in place, the next step is to link your solidjs application to back4app option a using the parse javascript sdk install the parse javascript sdk run the following command in your project directory npm install parse configure parse in your application create a configuration file (e g , parseconfig js ) // parseconfig js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; export default parse; 3\ implement crud operations in solidjs here’s an example solidjs service for managing items ```javascript // itemsservice js import parse from ' /parseconfig'; export const fetchitems = async () => { try { const items = parse object extend("items"); const query = new parse query(items); const results = await query find(); return results; } catch (error) { console error("error retrieving items ", error); } }; export const additem = async (title, description) => { const items = parse object extend("items"); const item = new items(); item set("title", title); item set("description", description); try { await item save(); console log("item added successfully "); } catch (error) { console error("error adding item ", error); } }; export const updateitem = async (objectid, newtitle, newdescription) => { const items = parse object extend("items"); const query = new parse query(items); try { const item = await query get(objectid); item set("title", newtitle); item set("description", newdescription); await item save(); console log("item updated successfully "); } catch (error) { console error("error updating item ", error); } }; export const deleteitem = async (objectid) => { const items = parse object extend("items"); const query = new parse query(items); try { const item = await query get(objectid); await item destroy(); console log("item deleted successfully "); } catch (error) { console error("error deleting item ", error); } }; option b utilizing rest or graphql apis if you prefer not to use the parse sdk, you can execute crud operations via rest for instance, here’s how to fetch items using the rest api export const fetchitemsrest = async () => { try { const response = await fetch("https //parseapi back4app com/classes/items", { method "get", headers { "x parse application id" "your application id", "x parse rest api key" "your rest api key", }, }); const data = await response json(); return data results; } catch (error) { console error("error fetching items via rest ", error); } }; integrate these api calls into your solidjs components as needed step 5 – enhancing backend security configuring access control lists (acls) protect your data by setting up acls for each object for example, to restrict an item so that only its owner can access it import parse from ' /parseconfig'; export const addprivateitem = async (title, description, owner) => { const items = parse object extend("items"); const item = new items(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item added "); } catch (error) { console error("error saving private item ", error); } }; setting class level permissions (clps) configure clps in your back4app dashboard to enforce default access restrictions, ensuring only authorized users can interact with certain collections step 6 – implementing user authentication managing user accounts back4app uses the built in parse user collection for authentication in your solidjs app, handle user registration and login as follows import parse from ' /parseconfig'; export const registeruser = async (username, password, email) => { const user = new parse user(); user set("username", username); user set("password", password); user set("email", email); try { await user signup(); console log("user registered successfully!"); } catch (error) { console error("registration error ", error); } }; export const loginuser = async (username, password) => { try { const user = await parse user login(username, password); console log("logged in as ", user get("username")); } catch (error) { console error("login error ", error); } }; a similar strategy can be adopted for session management, password resets, and other authentication features step 7 – deploying your solidjs application back4app streamlines the deployment process you can deploy your solidjs application through various methods, including docker 7 1 preparing your application build your application use your package manager to compile your solidjs app for example npm run build check the build output ensure the build folder contains all the necessary files 7 2 organizing your project structure a typical project structure might look like basic crud app solidjs/ \| public/ \| | index html \| src/ \| | components/ \| | | app jsx \| | services/ \| | | parseconfig js \| | | itemsservice js \| | | authservice js \| | index jsx \| package json \| readme md 7 3 dockerizing your application if you wish to containerize your app, create a dockerfile in the project’s root \# use a lightweight node image from node 16 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the application code copy \# build the application run npm run build \# expose the port (adjust if needed) expose 3000 \# serve the built application cmd \["npx", "serve", "build"] 7 4 deploying with back4app web deployment connect your git repository ensure your solidjs project is hosted on github configure deployment in your back4app dashboard, choose web deployment , link your repository (e g , basic crud app solidjs ), and select the appropriate branch set build commands define the build command (e g , npm run build ) and specify the output directory deploy your application click deploy and monitor the logs until your app is live step 8 – final thoughts and future enhancements great job! you’ve successfully created a solidjs crud application integrated with back4app you set up a project named basic crud app solidjs , defined your items and users collections, and managed data through the back4app admin dashboard additionally, you connected your solidjs app using the parse javascript sdk (or rest/graphql) and applied solid security measures next steps expand the application add advanced features like search filters, detailed item views, or real time data updates enhance the backend experiment with cloud functions, third party api integrations, or role based access management learn more dive into the back4app documentation https //www back4app com/docs and additional solidjs tutorials to further refine your application happy coding and best of luck with your solidjs crud project!