How to Build a Basic CRUD App with Riot.js: A Step-by-Step Guide

overview in this guide, you'll learn to create a crud (create, read, update, and delete) application using riot js we’ll walk through setting up a back4app project—named basic crud app riotjs —to serve as your backend, and then integrate it with a riot js frontend this tutorial covers everything from designing your database schema and managing data with the back4app admin app to integrating your frontend using either the sdk (if applicable) or rest/graphql api calls by the end, you'll have a fully operational, production ready web application featuring user authentication and secure data handling main benefits master crud operations using a scalable backend system gain insights on integrating a riot js frontend with back4app utilize the intuitive back4app admin app for effortless data management learn deployment strategies, including docker containerization prerequisites before you start, make sure you have a back4app account with a new project refer to getting started with back4app https //www back4app com/docs/get started/new parse app for guidance a development setup for riot js you can use the riot cli or include riot via a script tag ensure node js (v14 or later) is installed basic knowledge of javascript, riot js, and rest apis if needed, consult the riot js documentation https //riot js org/ for additional insights step 1 – project initialization creating a back4app project sign in to your back4app account click “new app” on your dashboard name your project basic crud app riotjs and follow the setup instructions create new project your project will now appear on your back4app dashboard, serving as the backbone for your application's data step 2 – designing your database schema crafting your data model for our crud application, you will define multiple collections below are sample collections and fields to help you structure your database for efficient crud operations 1\ items collection this collection holds details about each item field type description id objectid auto generated unique identifier title string item title description string brief item description created at date timestamp when the item was added updated at date timestamp when the item was modified 2\ users collection this collection contains user details and authentication info field type description id objectid auto generated unique identifier username string unique username email string unique email address password hash string encrypted password created at date account creation timestamp updated at date last account update timestamp you can configure these collections manually on the back4app dashboard by creating new classes and defining columns create new class you can add fields by selecting a data type, assigning a name, setting defaults, and marking if the field is mandatory create column leveraging the back4app ai agent for schema creation the back4app ai agent, accessible from your dashboard, can automatically generate your schema by processing a detailed prompt describing your required collections and fields using the ai agent open the ai agent find it in your project settings or menu input your data model paste a prompt outlining your collections and their fields review and confirm validate the generated schema and apply it to your project sample prompt create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) this tool expedites the process and ensures a consistent schema setup step 3 – activating the admin app & crud actions overview of the admin app the back4app admin app offers a no code, drag and drop interface for effortless backend management, letting you execute crud operations quickly activating the admin app open the “more” menu in your back4app dashboard select “admin app” and click “enable admin app ” set up your admin account by creating the initial admin user, which also establishes default roles enable admin app once enabled, log in to the admin app to manage your backend data admin app dashboard performing crud operations via the admin app within this interface, you can add records use the “add record” button within a collection (e g , items) to create new entries edit records click on any record to view and modify its details remove records delete any record that is no longer necessary this tool streamlines your workflow by offering a straightforward interface for managing data step 4 – connecting riot js with back4app now that your backend is set up, it’s time to connect your riot js frontend to back4app option a employing the parse sdk install the parse sdk npm install parse initialize parse in your riot js project create a file (e g , src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert 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 riot tag create a riot tag (e g , items riot ) to fetch and display items items { item get("title") } — { item get("description") } option b using rest or graphql apis if the parse sdk is unsuitable, execute crud operations via api calls for instance, to retrieve items using rest // rest api example to get items async function fetchitems() { 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 within your riot js tags as required step 5 – protecting your backend configuring access control lists (acls) secure your data by setting acls on your objects for instance, to create a private item 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); // define acl only the owner has read/write access 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); } } adjusting class level permissions (clps) within your back4app dashboard, configure clps for each collection to ensure that only authenticated or authorized users access sensitive data step 6 – user authentication configuring user accounts riot js applications can handle user registration and login using back4app’s built in parse user class below is an example riot tag for user signup sign up a similar strategy can be applied for login and session management additional features like social login, email verification, or password recovery can be set up in your back4app dashboard step 7 – deploying your riot js frontend back4app’s web deployment feature lets you host your riot js app by linking your github repository follow these steps to deploy your production build 7 1 build your production files open your project directory in a terminal run your build command npm run build this creates a build folder with optimized static files (html, js, css, images) confirm the build verify that the build folder includes an index html and required asset directories 7 2 organize and push your code to github your repository should contain the complete riot js frontend source a typical structure could be basic crud app riotjs frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── app riot \| ├── parseconfig js \| └── tags/ \| ├── items riot \| └── auth riot \| package json \| readme md example src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your actual back4app keys here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; example src/app riot riot js crud app commit and push your code initialize a git repo (if not done) git init add your files git add commit your changes git commit m "initial commit for riot js frontend" create a github repository (e g , basic crud app riotjs frontend ) and push your code git remote add origin https //github com/your username/basic crud app riotjs frontend git git push u origin main 7 3 integrate your github repo with back4app web deployment open web deployment sign in to your back4app dashboard, select your project ( basic crud app riotjs ), and click on web deployment connect to github follow the prompts to link your github account and repository choose your repo and branch select your repository (e g , basic crud app riotjs frontend ) and the appropriate branch (like main ) 7 4 deployment configuration build command if your repository lacks a pre built build folder, specify the build command (e g , npm run build ) back4app will execute it output directory set this to build to indicate where your static files reside environment variables include any necessary variables (such as api keys) in your configuration 7 5 dockerizing your riot js app (optional) if you prefer containerized deployment, add a dockerfile to your project \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire app and build it copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] select the docker option in your web deployment settings if you choose this route 7 6 launch your application deploy click the deploy button after configuring your settings monitor the process back4app will fetch your code, execute the build command, and deploy your app in a container get your url once deployed, back4app provides a url where your riot js application is hosted 7 7 validate your deployment visit the url open the provided url in your browser test the app confirm that all routes and assets (css, javascript, images) are functioning correctly troubleshoot use browser developer tools and back4app logs if any issues arise step 8 – wrapping up and future directions congratulations! you've built a fully functional crud app using riot js and back4app you set up a project called basic crud app riotjs , designed a robust database schema for items and users, and managed your data with the admin app you integrated your riot js frontend and implemented security measures like acls next steps enhance the frontend add features like detailed views, search capabilities, and real time updates expand functionality explore advanced backend operations such as cloud functions or integrate third party apis deepen your learning visit the back4app documentation https //www back4app com/docs and other resources to optimize and expand your application with these steps, you now have the expertise to build scalable crud applications using riot js and back4app happy coding!