How to Build a Backend with VS Code?

vs code 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 a blog platform using the back4app mcp server through vs code and deploy it on back4app containers key takeaways learn how to build a backend on back4app using vs code and a 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 you can view the live blog built in this tutorial using this link 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 vs code installed on your system basic familiarity with backend development concepts project overview a blog in this tutorial, you will build a simple blog that allows you to create, edit, view, and delete blog posts it also supports comments and keeps track of the number of people who have viewed your blog posts in addition to the user table provided by default on back4app for authentication, your blog will have three more tables posts, comments, and views when a user on your blog creates an account, back4app creates a new record in the user table and issues a secure session token you can reuse on subsequent requests only authenticated users can then publish posts when a blog post is published, both authenticated and unauthenticated users can read the posts; however, only authenticated users can comment each time a blog post is fetched from the back4app database, the view count gets incremented; to prevent possible abuse of this feature to inflate views, you will implement some guardrails around it now that you have a rough idea of what you'll be building, in the next section, you will connect vscode to the back4app mcp server connecting vscode to the back4app mcp server navigate to the back4app website and click the new app button on the top left of the page on the “build a backend” screen, name your app and click the create button on your app overview page, click the mcp setup button on the “select your ide” modal, click vs code and follow the instructions displayed on the screen to automatically connect vscode to the back4app mcp server if you followed the automatic installation option, you must restart vs code on your machine before continuing alternatively, you can connect the back4app mcp server manually (which gives you more control over the configuration) by switching the modal to the manual section after following the steps outlined in the modal to connect the back4app mcp server to vscode, you can confirm the connection by clicking the search bar in your vscode window and searching “>mcp list servers”, execute the command, and you should see a list of available mcp servers and their current state (running/stopped) now that you have connected the back4app mcp server to vscode, in the next section, you will write the prompts that will build your entire application building your blog’s backend to create your backend using vscode and github copilot, first, you need to activate agent mode on github copilot to activate the agent mode, open github copilot chat by pressing “ control + command + i” on macos, for windows, press “ctrl + i” on the chat page, click the drop down with the “ask” label and select the “agent” mode next, feed github copilot the prompt below or similar to create the classes required for your app the prompt above creates a new back4app backend called “blogger” and popualates with a post, a comment, and a view class along with their required properties when you execute this prompt with copilot, it will log the steps it follows on your chat window and ask you for permission on each of the steps that mutuate your data for the best results, execute these prompts with a premium model like 03 mini or claude sonnet 4 after copilot creates the required classes, you now have a structured way to store your blog’s data in the next section, you will implement authentication for your app implementing authentication the authentication requirements for your app are simple, you need user’s to sign up and log in in order to create blog posts and to comment on blog posts however, they can read blog posts on your app without being authenticated you can implement the authentication requirements for your app using the prompt below the prompt above adds user authentication to your app the authentication logic allows your users to create an account using an email, a username, and a password after signing up, the user is automatically logged in, and when a user logs out, their current session gets invalidated after copilot implements your authentication logic, your users will have a secure way to sign up and log in in the next section, you will implement the logic required for creating posts and comments creating posts and comments to implement the creating posts and comments feature, you have to create two cloud functions and the supporting hooks that let authenticated users publish posts and add comments in one streamlined flow start by creating the supporting hooks by feeding copilot the prompt below or similar the prompt above implements checks/actions done before a post or comment is created for posts, a unique slug is generated using its title then the status chages to published, and the current date is set as the publication date for comments, the post it is linked to simply updates its comment count now, create the cloud functions associated with the beforesave hooks above using the prompt below or similar the prompt above exposes two cloud code functions that allow your users to create posts and comments it also protects your app from abuse by limiting to 5 post creations and 15 comments per minute the main logic associated with creating the posts and comments have already been implemented in the beforesave hooks created in the previous prompt; this one just exposes an api for the frontend to consume after copilot implements the logic above, your users will have a way to create and comment on posts in the next section, you will implement the logic required to update those comments and posts, and also the logic required to count views on each blog post updating posts, comments, and views to implement the functionality that allows users to edit their posts, revise their own comments, and register page views, you need two cloud functions updatepost, updatecomment, and an aftertrigger you can implement the updatepost cloud function using the prompt below or similar the prompt above creates a function that updates a post it ensures that the update can only be done by the user who created the post and regenerates the slug if the title is changed you can implement the updatecomment cloud function using the prompt below or similar the prompt above creates a function that updates a post’s comment the update can only be done by the comment’s creator you can implement the recordview cloud function using the prompt below or similar the prompt above creates an afterfind trigger on the post class whenever the backend returns a single post (fetched by its objectid), the trigger automatically creates a new view record that points to that post (and the current user, if logged in) and increments the post’s viewcount if the query returns multiple posts, the trigger does nothing with this, most of your blog’s functionality is complete next, you will implement the functionality that allows your users to delete their posts deleting posts to delete a post, a user must be the one who created it once a post is deleted, all its associated content (views, comments) are deleted along with it you can implement the functionality for deleting posts using the prompt below or similar the prompt above implements the required logic for deleting posts with these additions the your backend now covers the full content life‑cycle, letting authors publish, revise, and delete, letting readers discuss, and keeping accurate view statistics for every post in the next section, you will generate a ui for your application generating your frontend you can take advantage of the context copilot 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 using the prompt above or similar, copilot will generate a frontend that matches your backend’s schema and connect it to your backend run the app using the instructions provided by copilot and make any adjustments you want now that 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 or you could use the dockerfile provided below 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 blog built in this tutorial using this link conclusion in this article, you built a complete blogging platform using the back4app mcp server and github copilot, 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 social media integration, automated email notifications for new comments, advanced search functionality, or analytics on post engagement and reader behavior all of these enhancements fit naturally into the same back4app workflow design and define new classes or cloud functions with github copilot, secure them with beforesave hooks, and roll out updates through back4app containers this approach lets you add new features to your blog without disrupting users