If you don't know about Code Apps in the Power Platform let me quickly fill you in.
They are full React apps that are packaged and deployed through the Power Platform.
Because they are piggy backing off the platform infrastructure rather then part of it there are some callouts
- You don't build them in the platform - you use VS Code (or other coding tools)
- The development code is not stored in the platform (only the built code)
This means you don't user make.powerapps.com and even a unmanaged solution for development, as once in the platform you can't really edit them (without hacking open the solution file).
The thing is, code apps are obviously not LowCode, you need fully trained developers to build them, so why would it be in the Power Platform?
Well there will be some developers who use it purely to avoid setting everything up in Azure and avoiding the pain of auth, but i think the real answer is vibe coding.
I wrote a blog already about how you can use GitHub Copilot to build Code Apps vibe coding a power app the pro way with codeapps, but in my opinion using AI for development is best when you can read the code.
So that had me thinking, I can read basic JavaScript, HTML, and CSS, React is just compiled to this. And looking at the code app in the solution, it is just JavaScript, HTML, and CSS. So can I just build a normal web app and deploy that instead of React.
And the answer is yes 😎
The starting point to look at is the dist folder, this is where the React code is built into normal web tech.
As you can see, it's just a index.html file, a JavaScript file, a CSS file, and a image file.
So straight away in theory we could just drop our own code in and it should work.
Well not quite, and that's because we are running it inside Power Apps, so we need to communicate specifically with Power Apps.
And this is where we need the the Power Apps SDK. Looking in a normal code app the code is in the Power Apps node library.
As the code is spread across multiple files, and in TypeScript, it's not easy for use to use.
We could use the built file from a test app:
But it's incredibly hard to read, may not cover everything we need, and has any app specific code included.
So to make sure it covered everything it's time to bring in a partner, and in my case its Opus 4.6. After a few tries I managed to get it to create a JavaScript version to use.
But although its fully functional, it definitely isn't readable, so this is when I decided to build bridging functions. These functions create a easy to use code that then calls the sdk.
Now all I need to do is import the functions I want and build my own JavaScript code.
Our Index.html now looks something like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>YOUR APP</title>
<script type="importmap">
{
"imports": {
"@microsoft/power-apps/data": "./power-apps-data.js"
}
}
</script>
</head>
<body>
<div id="root">hello world</div>
<script type="module">
import { createItem } from "./codeapp.js";
async function boot() {
//on load code
}
// code
boot();
</script>
</body>
</html>
- power-apps-data.js is the sdk
- codeapp.js is the bridging functions
And now we have a working HTML,JavaScript, CSS app. We still need to do some more bits to make it work, and this is all around the Power Platform CLI (so we still need that installed).
You need:
- Create power-config.json file: _pac code init --displayName "" _
- Sign into Tenant: pac auth create
- Select environment: pac env select --environment "environment-id"
- Create connection: pac connection create --name "connection-name" --application-id "app-id" --client-secret "secret" --tenant-id "tenant-id"
- Add data sources (for all connections): pac code add-data-source -a "connection-name" -c "connection-id"
- Deploy to Power Platform: _pac code push --solutionName YourSolutionName _
And thats about it.
If anyone this sounds interesting to you, I've created a couple of things to get you started.
codeappjs.com is all of the files needed for you to build your own JavaScript Code App. It also goes into a lot more detail around functions, and provides working demos.
Currently it has 5 connectors:
- Dataverse
- SharePoint
- Office 365 User
- Office 365 Outlook
- Office 365 Groups
But it's fully open source, so hopefully everyone can add more.
To use it yourself you can either:
- Download simple zip file with all the files
- Clone the GitHub repo
- Install from NPM
- Use CodeAppJS Plus
What's CodeAppJS Plus, well I'm glad you asked, it's a AI Coding Agent built specifically for JavaScript Code Apps. It runs as a VS Code extension, with a chat interface for prompting your Code App, it also has CLI commands set as buttons for easier use.
It still requires the Power Platform CLI, and GitHub Copilot, and obviously VS Code to run it.
Install it here
--
So why did I convert React to Vanilla JavaScript, well a few reasons:
- If you have read some of my previous blogs you will know I'm a little crazy
- I can code in JavaScript and I wanted to code my own Code App
- In spirit of LowCode I wanted to make it a little more simple
- Believe it or not AI seems to deliver better results then React
Example Kanban app created in CodeAppJS Plus
I never did quite understand why Microsoft has gone with React as the vibe coming language.
React has 3 main advantages
- Its declarative (desired outcome) vs JavaScripts imperative approach (sequence of tasks)
- Great for reusability
- Handles complex state management better
But here's the thing:
- Prompts by their very nature are declarative
- Reuse is less important when agent is doing all the work
- Power Apps are very very rarely that complex that they need better state management
So why use React when its a lot more verbose, wasting tokens, and buld step adds more tool calls.
If you want to see how I made my own AI Coding Agent, check out my next blog.
Top comments (0)