How to Build a Backend with Windsurf?

the windsurf ide allows you to integrate external tools that have an active mcp server into it through the mcp protocol this allows you to execute tasks and read data from those sources without leaving your ide using prompts in this tutorial, you will learn how to build the backend and the user interface (ui) for an appointment scheduler using the back4app mcp server through the windsurf ide and deploy it on back4app containers key takeaways you can view the live personal expense tracker built in this tutorial using this link learn how to build a backend on back4app using windsurf and the back4app mcp server explore how relationships are modeled between classes on back4app explore how authentication and role based authorization are implemented by back4app using their built in classes deploy your app in a few clicks using back4app containers prerequisites to follow this tutorial, you need to have the following a back4app account you can sign up for free if you don’t have one windsurf ide installed on your system basic familiarity with backend development concepts project overview appointment scheduler in this tutorial, you’ll build an appointment scheduler that supports two roles providers who register the services they offer and clients who book those services providers define each service with a name, duration, and price clients then browse available services, pick a date and time, and confirm a booking once booked, the appointment appears in both the provider and client dashboards, with a status that you can update or cancel as needed this project will have 4 classes user , role , appointment , and service the user and role classes are part of back4app’s built in classes and will be used for authentication and access controls the service class will define each offering’s details, its name, duration, and price, so providers can list what they offer and clients can browse offerings the appointment class will link a client and a provider to a chosen service at specific starttime and endtime fields, track its status (“pending”, “confirmed”, “canceled”), and use object‐level acls so that only the booking client and its provider can read or modify each appointment here’s an entity relationship diagram to help you visualize the schema now that you have a rough idea of what you'll be building, in the next section, you will set up the back4app mcp server with windsurf and start writing prompts that will create the app described in this section connecting back4app and windsurf watch the video below for a tutorial on how to connect windsurf to back4app to connect the back4app mcp server to windsurf, first, you need a back4app account key to retrieve it, log in to your back4app account and on your user dashboard, click the dropdown on the navbar and select account keys on the account keys page, give your account key a name, copy the generated key, and store it securely next, open windsurf and click the hammer icon on the cascade assistant this opens a dropdown with a configure button, click it the configure button takes you to the manage plugins page click the “view raw config” button and paste the configuration object below into the file { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } replace \<account key> with your account key, save the file refresh windsurf if you are following this tutorial on a windows machine, change the command key’s value to npx cmd creating the backend with windsurf to create the backend of the appointment scheduler with windsurf, first, you have to feed the cascade assistant a prompt that tells it to create a new app with the name you specified, along with the required database tables you can achieve this for the appointment scheduler using the prompt below create a new backend named “appointment scheduler” by defining two new classes and a server side hook first, add a service class with fields for name (string), durationminutes (number) and price (number) then add an appointment class that includes pointers named client and provider (both to the built in user class), a pointer named service to the service class, starttime and endtime (date), and a status field constrained to “pending,” “confirmed,” or “canceled ” finally, write a beforesave cloud code trigger on appointment that queries for any existing appointment with the same provider whose time window overlaps the incoming starttime/endtime and rejects the save if it finds a conflict this prompt tells above tells windsurf to scaffold an “appointment scheduler” backend by creating two new data models service and appointment, with the appropriate relationships and fields it also implements a server side beforesave hook on appointment that prevents any overlapping bookings for the same provider windsurf logs all the requests it makes as it tries to accomplish the task, and as soon as it finishes execution, it will provide a summary of the task now that the app and the database classes have been created, next, you can implement authentication for your backend implementing authentication & authorization on the backend for this app, you need to ensure that users can log in securely and only do things they should be able to do for example, only users who sign up as providers should be able to list a service, and only a provider who lists a service should be able to update the service you can achieve this for the appointment scheduler using the prompt below update the “appointment scheduler” backend to enable user authentication and role based access control configure the built in user class to require email/password sign‐up and login ensure the built in role model includes “provider” and “client” roles, and assign each user to one of these roles on registration or via a cloud function then set class level permissions so that only authenticated users may read and write appointment objects, but only providers can create, update, or delete service entries finally, on each appointment object, apply an acl in a beforesave hook that grants read/write permission only to the booking client and the designated provider, and verify in the hook that request user has the appropriate role before allowing the operation this prompt above instructs windsurf to enable email/password sign up and login, define and assign “provider” and “client” roles, enforce class level permissions so only providers manage services while authenticated users handle appointments, and apply object acls plus a beforesave hook on appointment to grant access only to the booking client and provider and verify their roles now that you have authentication and role based authorization set up, you can implement the crud endpoints required for the app to work implementing crud functionality for services and appointments your app needs to allow authenticated users to create services (providers) and book appointments on already created services (clients) users also need to be able to edit, delete, and view services and appointments you can achieve this for the appointment scheduler using the prompt below add cloud code functions to our “appointment scheduler” backend that expose the necessary crud endpoints for the service class, implement createservice, listservices, updateservice, and deleteservice functions that check request user’s role and allow only providers to run them for the appointment class, implement createappointment, listappointments, updateappointmentstatus, and deleteappointment functions that ensure the caller is authenticated and only operates on records where they are the client or the provider in each function, use request user to enforce authentication, verify the user’s role (client or provider), apply the appropriate acl checks, and return the created, fetched, updated, or deleted record in the response this prompt instructs windsurf to generate cloud code endpoints for both service and appointment classes, implementing create, read, update, and delete operations while enforcing authentication and role based checks so that only providers can manage services and only the booking client or assigned provider can manage their appointments generating your frontend you can take advantage of the context windsurf has from creating your backend on back4app to ask it to create a frontend that matches the schema and requirements for your app you can achieve this for the appointment scheduler using the prompt below generate a minimal frontend that matches the schema and implements all the functionality of the appointment scheduler on my back4app account and connect the frontend to the backend using the javascript parse sdk use vite and react using the prompt above or similar, windsurf will generate a frontend that matches your backend’s schema and connect it to your backend the project files are stored under /\<user>/cascadeprojects/\<app name> cd into the app and run it using the instructions provided in the readme, and make any adjustments you want now, your project is complete in the next section, you will deploy it on back4app containers deploying your app on back4app containers back4app containers allow you to deploy your apps easily using a dockerfile and a github repository to deploy your app on back4app containers, you need to first include a dockerfile in your repository you can ask claude to generate one using the prompt below generate a docker file for the ui of my appointment scheduler or you could use the dockerfile provided below from node 18 alpine as builder workdir /app \# install pnpm run npm install g pnpm \# copy only package files first for better caching copy package json pnpm lock yaml / \# install dependencies (including dev for build) run pnpm install frozen lockfile strict peer dependencies=false \# copy the rest of the app copy \# build the next js app with standalone output run pnpm build \# production image from node 18 alpine as runner workdir /app \# copy standalone output and required files copy from=builder /app/ next/standalone / copy from=builder /app/ next/static / next/static copy from=builder /app/public /public \# optionally copy env or other config files \# copy env local env local expose 3000 \# limit node js memory usage for low resource environments env node options=" max old space size=192" cmd \["node", "server js"] after adding the dockerfile and pushing it to github, navigate to your back4app apps dashboard, click the dashboard dropdown, and select the web deployment platform option on the deployment page, click the “deploy a web app” button and give back4app access to the repository you want to deploy select the app you wish to deploy, fill out the deployment details, and click the deploy button clicking the button starts the deployment process, and after it is done, you will get a live url to the app you can view the live personal expense tracker built in this tutorial using this link conclusion in this article, you built an appointment scheduler using the back4app mcp server and windsurf, then deployed it with back4app containers this showcases back4app’s full suite of tools that lets you move from ideation to launch with minimal overhead as a next step, you can extend the project with features like calendar syncing, automated email reminders, or analytics on booking trends all of these enhancements fit naturally into the same back4app workflow design and define new classes or cloud functions with windsurf secure them with beforesave hooks and roll out updates through back4app containers this approach lets you add new features to your app without disrupting users