Introduction
In part two of this series of blog posts, I copy the base CodeApp template and start installing some new dependencies I know I’ll want available.
Creating the CodeApp
I start by following the instructions in the Quickstart guide to create a CodeApp with the Power Apps CLI. This will get me an empty shell project as a starting point:
https://learn.microsoft.com/en-us/power-apps/developer/code-apps/how-to/create-an-app-from-scratch
I did hit a couple of problems. The Power Apps CLI is separate from the Power Platform CLI, but the naming is similar enough that when I was searching for things, I’d get mixed results, including resources for both in search and AI results. Once I realised the problem, it was easy to spot, but it helps to keep links to the Power Apps CLI command reference and the Code Apps documentation handy.
https://learn.microsoft.com/en-us/power-apps/developer/code-apps/
On my first attempt to use the quick start guide, I had the latest version of Node.js installed, but I had trouble installing the Power Apps CLI. I tried it again the next morning with the LTS version active, and things went a bit more smoothly.
I won’t repeat the whole quick start guide here, but I used the degit step to clone the template repo locally, giving it the highly original name ‘map-codeapp’. Taking a quick look in the repo using Visual Studio Code, I realised it’s basically the standard Vite + React template, with enough added to make it a CodeApp. I was happy with that as a starting point, since I’d used the Vite + React template before, so I didn’t look for any other templates.
Next were some steps to install the Power Apps CLI and the Power Apps library using NPM. This was as simple as running the provided NPM commands to install them globally, but I got messages that some build scripts weren’t running and the template project wouldn’t build.
After messing around copying commands out of the npm feedback to add the libraries to the allowScripts list, but with the build script errors seeming to pop back up again, I eventually ended up with the following added to the package.json in my map-codeapp project, and once that was in the dependencies, it would install with npm install without complaining about anything that looked catastrophic, and the project would build.
The global npm installs can be done from anywhere, but all the other commands need to be run from the root directory of the copied project, which you have open at that point if you’re following the quick start steps.
"allowScripts": {
"esbuild@0.28.2": true,
"@azure/msal-node-extensions@1.5.17": true,
"@azure/msal-node-runtime@0.18.2": true,
"keytar@7.9.0": true
}
At this point, I realised I didn’t have a PowerApps environment to work with, so I fired up my personal Developer environment and made sure that in the Power Platform Admin Centre — Manage Environment (my environment) — Settings — Features — Power Apps Code Apps setting is enabled.
Back to the quick start guide: at this point, the template project can be initialised by using the following command from the apps root directory:
pa app init
I ran this interactively, typed the name I wanted for the app, and copied my environment ID from the Manage Environment page for my Developer environment in the Power Platform Admin Centre.
I can run the app locally now with the following command:
pa app run
This will be useful later.
The quickstart guide points out some snafus you can run into when running a local development server, so if this is your first time doing something like that and you run into a problem, check that section out for solutions. It worked fine for me the first time.
The last steps of the quick start guide use the following commands to build the app:
npm run build
Then there is:
pa app push
This will install the app on the server. Once you’ve used the push commad you get the URL to try your new app on the server.
So, after all that, there is an empty shell project that you can run locally, build, and push to the server. It’s not nothing, but it doesn’t do anything useful yet.
Moving past the Quickstart Guide
I want to customise this shell project a bit more, then get Claude ready to go so it can build some useful stuff for me.
First, I installed Tailwind following the instructions for installing the Tailwind Vite plugin. If you’re following along, start from step 2 since we already have a project.
https://tailwindcss.com/docs/installation/using-vite
Once that’s done, I build the project to make sure I didn’t break anything.
You might be wondering why, in a world of wonderful AI agents, I’m not getting Claude to do this. The reason is pretty simple — I don’t have an infinite budget for demos and side projects, and my AI subscriptions come with allocations of free tokens these days, which I want to stretch out as much as I can. Doing easy steps like this, which I know how to do, saves tokens.
We need a data source to work with, which means we need a table or tables for our data. The app is going to be displaying information on a map, so I’ll create a Location table to act as a header for a set of Points of Interest, and a Points of Interest table with lat and long, a description field and a field for an image in case I want to get fancy.
Now that I have tables in Dataverse, I need to add them as data sources in the app using Power Apps CLI. There is another How-to guide in the docs for doing that:
https://learn.microsoft.com/en-us/power-apps/developer/code-apps/how-to/connect-to-dataverse
CodeApps are similar to Canvas apps in that they don’t require Dataverse. I could use any number of data sources for this, anything with a Power Apps data connector. I used Dataverse without really thinking about it, probably a familiarity bias on my part.
I used the following command to add my Location table and Point of Interest table, remembering to use the logical name available in the tables’ ‘advanced’ settings rather than the display name:
pa app add data-source --connector dataverse --table <table-logical-name>
Looking in the project after that, there is a new ‘generated’ folder in the ‘src’ folder, and a ‘models’ folder, ‘services’ folder, and an ‘index.ts’ file have all been generated. The models and services folders contain models and services generated for the tables. This seems pretty good and does make me want to experiment more at some point with different data sources to see if it makes much difference to what gets added to the project, or if (more likely) it’s all handled in the Power Apps connection.
While I was looking at the project to see what got added, I noticed the Vite template readme.md is there. It’s not really relevant, so I deleted it, as it could be irrelevant ‘context’ when we fire up the AI. It probably wouldn’t be a problem, but cleaning up as we go seems like a good idea.
From the root of my project, I also ran the npm install command to add the Azure Maps library and React controls to the project:
npm install react-azure-maps azure-maps-control
For this demonstration, I created an Azure Maps account and obtained the credentials needed for the next stage. The linked quickstart uses shared-key authentication for a demo, but Microsoft recommends Microsoft Entra ID for production. I won’t commit credentials to source control or present a client-exposed key as a production security pattern.
We don’t need anything after ‘Download and update the Azure Maps demo’ since we’re building our own app.
What’s Next
At this point, we have an empty Vite + React template project, customised with some extra dependencies. In the next post, I’ll show how to set up Claude Code and how the work we’ve done so far provides context for the tool.
If you want to learn more about the Microsoft Team here at Capgemini, take a look at our open roles and consider joining the team!
Building a PowerApps CodeApp with Claude Code Part 2 was originally published in Capgemini Microsoft Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.