In a world of new AI tools and rebranding its hard to keep track of everything Microsoft has launched, but there is one kind of cool one that never got as much attention as I think it should and with the influx of new it probably wont.
We are all talking about App Builder, and Generative Pages in Model Driven Apps, but there are also Code Apps.
Code Apps only launched a few months ago, pitched as a way for Pro-Developers to build full React Apps in the Power Platform. But in my humble opinion that wasn't what they were created for, they were actually created so that the current crop of vibe coding tools could be used in the Power Platform.
I'm not a React developer so I won't talk about actually building in React, so I will talk about:
- What They Are
- Basic Setup
- Vibe Coding Experience
1. What They Are
Canvas apps take config files generated by the maker studio and compile them into a web app.
So looking at the process Microsoft had 2 options where to insert AI, at the beginning, generating the maker studio inputs, or the second replacing the rendering engine. The latter had the benefit of using any web library, and the most popular being React, which was so prevalent all the existing models were good at creating.
So this meant a new process, something like this:
And that's what Code Apps are, they are apps with a different build process. As you can see the value USP of Canvas Apps is PCF rendering engine that allows Low-Code inputs, and although the environment is a big USP, it's nothing without those inputs. I can't see many React developers wanting to build in the Power Platform just for the environment, but I can imagine Low-Code developers wanting to vibe code a React app with the benefits of the environment.
2. Basic Setup
As always Microsoft learn provides some great documentation on how to setup everything up (https://learn.microsoft.com/en-us/power-apps/developer/code-apps/overview), but the headline prerequisites are:
- Code App environment setting turned on
- A code editor like VS Code
- Power Platform CLI
- Node.js - make sure you have an up to date version
Git is recommended but you can always download the zip file from GitHub.
Once everything is setup and you have download/cloned a template app (I recommend the Hello World App as the from Scratch kept having build errors for me), you need to use the CLI to sign into the Power Platform.
Like I said the docs provided by Microsoft a great so I don't want to duplicate for the sake of it, but in a nutshell you:
- Sign into an environment
- Install/update libraries
- Initialise app
- Build the app
- Deploy the app
You can also build and run a local version of the app, though I often found this more pain then its worth
Install/update libraries
Most of the web is now built on libraries and dependencies, that way you do not need to build functionality from scratch, you can use what others have made. The package.json file lists all of the libraries and is used to install them (the package-lock.json file is also used but this is to stop newer versions being installed so that you don't need to worry about regression testing etc). These libraries are stored in the node_modules file.
Initialise app
This adds the additional information need specifically for Power Apps. It creates the power.config.json file, which includes:
- Appid
- Display Name
- Description
- Environment
- Icon/logo
- Connection References
- Data References
- Environment Variables
The CLI will create most of these but you can update at anytime, and some are not done in the CLI like icon and description.
Build the app
As you saw in the top diagram, React is not an end product, but a developer tool. So React is used to create standard HTML/JavaScript/CSS that your web browser can use. To turn your React into HTML/JavaScript/CSS we use a build tool, in this case Vite. Running the build will use Vite to convert all of the TypeScript and JSX into simple HTML/JavaScript/CSS.
Deploy the app
The CLI will now deploy the HTML/JavaScript/CSS files that were created in the dist folder. After the app will appear in the environment ready to use. Note that there is version control but remember that the React code is not stored in the Power Platform, so if you do rollback, the code you are editing in VS Code etc will not rollback (I would highly recommend using a repo like GitHub and creating a pull request for every deployment to the Power Platform).
And that's it you now can deploy your code app to the Power Platform.
Connections
We all know Power Apps have no power without connections, and the good news is Code Apps have that power. There are 3 types of connections,
Again the documentation is great and gives a simple step by step guide to add the connections. For standard connections you use one of your connections (just need connection type and connection id) to create the connection, but it doesn't actual use your connection but still uses the App users when they log in (same for Dataverse, so security roles will still be needed).
The CLI updates the power.config.json with the connection and creates some TypeScript files (src/models for schemas and src/service for functions).
You can then use the connections in a very similar way to within a normal Canva App
const me = await Office365UsersService.MyProfile_V2('id,displayName,userPrincipalName')
3. Vibe Coding Experience
As I said, I don't think many React developers will use Code Apps, but vibe coders maybe, so how was the vibe coding experience.
Well my idea was to build a Agile Planning Poker App. I am fortunate enough to have paid for GitHub Copilot license that I used, I tried both claude 4.5 Sonnet and ChatGPT 5 and found the latter the best for me. The below is my prompt I used:
Objective:
Transform the existing Power App into a fully functional Agile Planning Poker application with a modern, minimalistic UI. Ensure all data is stored in the Dataverse table cr69a_planningpoker.
Functional Requirements
1. Welcome Screen (On Load):
- Display a welcome message and the user's profile image.
- Provide two options:
- Join an existing session (via input field).
- Create a new session (auto-generate a GUID).
- On session creation, navigate to the Round Screen.
- If new session the user should have the sessionOwner field set to true in the dataverse table
2. Round Screen Behaviour:
- Automatically add the current user to the round.
- Display all active participants to every user in the session.
3. Scoring Mechanism:
- Each participant selects a score by clicking a card.
- Reveal scores when:
- All users have submitted their score, or
- The session creator clicks Complete.
- Show: Each user's score and the most popular score.
4. Round Management:
- Include a Start New Round button that only the session owner can see (use sessionOwner field).
- Retain the same users across rounds.
- Reset users only when a new session is created.
- Indicate when other users have submitted score to all users but do not show score
- Show scores to all users when round finished
- If a new user joins they should join the latest round
Data & Storage
- Use Dataverse table: wd_planningpoker for all session and round data.
Design Guidelines
- Apply a modern, minimalistic theme.
- Avoid clutter; favor negative space and clean geometric elements.
Cleanup Instructions
- Remove all Vite template boilerplate from the codebase.
And this was the result:
Welcome Screen
Round Screen
Well that's not entirely true, it took a few extra prompts (about 20), and they were for these issues like this:
- Wanted the UI to be centered horizontal and vertical
- The polling didn't work so other users didn't see when round finished
- Often duplicated users in round
- Change popular score to average
- Make UI more modern and professional
- Expand Join a session card so input box does not overflow
- Make round card and point select card same size
As you can see I never did get the UI centered and I wouldn't call it modern and professional, and most took a couple of attempts.
I also spotted that the polling to check was using a batch api call, but the batch was just one api call, so not sure if Copilot is being super clever and smarter than me, or over engineering.
--batch_23479c3e-a81b-4e2e-88cb-4444444444
Content-Type: application/http
Content-Transfer-Encoding: binary
GET cr69a_planningpokers?$select=wd_round&$filter=wd_session+eq+%27e0e9f042-4444-4444-a440-a5f362c33013%27&$top=500 HTTP/1.1
Accept: application/json
Prefer: odata.maxpagesize=500,odata.include-annotations=*
--batch_23479c3e-a81b-4e2e-88cb-4444444444--
In the end my demo app was super simple and I was able to get it working with a few prompts, although not exactly how I wanted. The beauty of Code Apps is obvious, React, and the breadth of training material available for LLM's. As new models become available I see them getting better and better, and once you figure out I see them becoming so much better then Generative Pages and App Builder, I just hope Microsoft doesn't give up on them because of that complex setup.
I also hope they open it up to more then just React, and I did the vibe code approach because I'm not a React developer, and that's not as enjoyable as doing some of it yourself.
Top comments (0)