How to Build a CRUD Application with Aurelia? A Comprehensive Tutorial

overview in this guide, you will learn how to create simple crud (create, read, update, delete) application using the aurelia framework this tutorial explains how to build an application capable of handling essential data operations by integrating aurelia with back4app as your backend service initially, you will set up a back4app project titled basic crud app aurelia to serve as your robust data management system next, you'll outline a scalable database structure by manually defining collections and fields—or by utilizing the back4app ai agent—to ensure reliable data operations subsequently, you will take advantage of the back4app admin app, which offers a drag and drop interface for managing your data effortlessly finally, you will connect your aurelia frontend with back4app using rest/graphql calls (or the parse sdk where applicable), and secure your backend with detailed access control by the end of this tutorial, you'll have a production ready web application with complete crud functionality, user authentication, and secure data handling main insights master building crud applications with a reliable backend service acquire practical skills for designing a scalable backend and linking it to an aurelia frontend explore a no code admin interface (back4app admin app) for seamless data operations learn how to deploy your application using modern techniques, including containerization prerequisites before you begin, make sure you have the following a back4app account with an active project visit getting started with back4app https //www back4app com/docs/get started/new parse app if you need guidance an aurelia development setup use the aurelia cli or a similar tool; ensure you have node js (version 14 or later) installed basic proficiency in javascript, aurelia, and rest apis consult the aurelia documentation https //aurelia io/docs for more details if required step 1 – setting up your project creating a new back4app project sign in to your back4app account press the “new app” button from your dashboard enter the project name basic crud app aurelia and complete the setup steps create new project after creation, your project will be visible on your dashboard, ready for backend configuration and data management step 2 – designing your database schema crafting the data model for this crud application, you'll define multiple collections below are examples of the collections required along with the fields and data types needed to support crud operations effectively 1\ items collection field data type details id objectid auto generated primary key title string name or title of the item description string a short description of the item created at date timestamp when the item was created updated at date timestamp when the item was last modified 2\ users collection field data type details id objectid auto generated primary key username string unique identifier for the user email string unique email address for account validation password hash string encrypted password for user authentication created at date account creation timestamp updated at date timestamp of the last account update you can create these collections manually in the back4app dashboard by adding a new class for each and defining the necessary columns create new class easily set up your database fields by choosing the correct data type, specifying field names, setting default values, and indicating if the field is mandatory create column employing the back4app ai agent for schema creation the back4app ai agent simplifies schema generation by letting you describe your data model through prompts this tool automatically creates collections and fields based on your requirements steps to use the ai agent launch the ai agent open your back4app dashboard and locate the ai agent under the project settings describe your schema input a detailed prompt that outlines the collections and fields you require review and confirm examine the generated schema suggestions and apply them to your project sample prompt create the following 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 method accelerates the schema creation process and guarantees a consistent structure for your application step 3 – activating the admin interface & crud functionality exploring the admin interface the back4app admin app is a robust, no code solution that enables you to manage your backend data through a user friendly drag and drop interface this tool simplifies the execution of crud operations activating the admin app open the “more” menu in your back4app dashboard select “admin app” and then click “enable admin app ” set up your admin credentials by creating your initial admin account, which also establishes default roles (such as b4aadminuser ) and system collections enable admin app after enabling, sign in to the admin app to start managing your data admin app dashboard performing crud operations with the admin app within this interface you can create entries use the “add record” option in a collection (e g , items) to add new data view/modify entries click on any record to inspect its details or make changes remove entries select the delete option to eliminate data that is no longer needed this interface streamlines your data operations, enhancing user experience with its intuitive design step 4 – linking aurelia with back4app with your backend configured and managed via the admin app, it's time to connect your aurelia frontend to back4app utilizing rest or graphql you can use rest or graphql apis for instance, to fetch items via rest // example rest request 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('items fetched ', data results); } catch (error) { console error('fetch error ', error); } } fetchitems(); integrate these api calls within your aurelia components as necessary step 5 – protecting your backend implementing access control lists (acls) enhance security by assigning acls to your data objects for instance, to create a private item async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl restrict access to the owner only const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error saving secure item ', error); } } setting class level permissions (clps) within the back4app dashboard, adjust the clps for each collection to enforce default security rules, ensuring only authenticated or authorized users can access sensitive information step 6 – managing user authentication configuring user accounts back4app uses parse’s user class to handle authentication in your aurelia app, you can manage user registration and login as illustrated below // src/resources/components/auth js import { observable } from 'aurelia framework'; import parse from ' / /parse config'; export class auth { @observable username = ''; @observable password = ''; @observable email = ''; async signup(event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration error ' + error message); } } } a similar pattern can be implemented for login and session management additional functionalities, like social login integration, email verification, and password reset, can be configured through the back4app dashboard step 7 – deploying your aurelia frontend via web deployment back4app’s web deployment feature allows you to host your aurelia application efficiently by deploying code from a github repository in this section, you will prepare your production build, commit your code to github, connect your repository with web deployment, and deploy your site 7 1 create your production build open your project directory in the terminal execute the build command au build env production this command generates a dist folder containing your optimized static assets confirm the build ensure that the dist folder includes an index html and the necessary subdirectories for javascript, css, and images 7 2 organize and upload your project code your github repository should house all source files for your aurelia frontend an example structure might be basic crud app aurelia frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parse config js \| ` resources/ \| | components/ \| | | items list js \| | ` auth js \| package json ` readme md example files src/parse config js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } committing your code to github initialize git in your project folder (if not already done) git init stage your files git add commit your changes git commit m "initial commit of aurelia frontend source" create a repository on github (e g , basic crud app aurelia frontend ) push your code to github git remote add origin https //github com/your username/basic crud app aurelia frontend git git push u origin main 7 3 linking your github repository with web deployment access web deployment log in to your back4app dashboard, navigate to your project (basic crud app aurelia), and select the web deployment option connect to github follow the prompts to integrate your github account, granting back4app access to your repository choose your repository and branch select the repository (e g , basic crud app aurelia frontend ) and the branch (e g , main ) containing your code 7 4 deployment configuration set the following configuration details build command if the dist folder isn't pre built, specify a command (e g , au build env production ) for back4app to execute output directory set this to dist so back4app knows where your static files are located environment variables add any required environment variables (like api keys) in the configuration settings 7 5 containerizing your aurelia application (docker) if you prefer docker deployment, include a dockerfile in your repository similar to the following \# use an official node image as the build environment from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining files and build the app copy run au build env production \# use nginx to serve the production build from nginx\ stable alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] configure the docker deployment option in web deployment accordingly 7 6 deploying your application press the deploy button after configuring deployment, click deploy monitor the build process back4app will fetch your code from github, execute the build command if needed, and deploy your application in a container retrieve your url once deployment is complete, back4app will provide the url where your aurelia application is hosted 7 7 verifying your deployment open the provided url visit the url in your browser to see your live site test the application ensure that your application loads correctly, routes function as intended, and all assets (css, javascript, images) are served troubleshoot if necessary use browser developer tools to diagnose any issues, and review back4app deployment logs if needed step 8 – wrap up and future directions congratulations! you have successfully built a complete crud application using aurelia and back4app you have set up a project named basic crud app aurelia , defined comprehensive database schemas for items and users, and managed your data using the back4app admin app you’ve also integrated your aurelia frontend with the backend and implemented robust security measures next steps enhance your ui expand your aurelia application with detailed views, search functionalities, and real time data updates add advanced features consider incorporating cloud functions, third party apis, or role based permissions explore further check out the back4app documentation https //www back4app com/docs and additional aurelia resources for more in depth guidance on optimization and customization happy coding and best of luck on your development journey!