Code Apps has been our earlier this year and I’ve seen people start to use it already. But some stumble upon it and somehow end up creating and managing it – but when we try to remember where we started, it get a little blurry.

Also, this is great segway to move to something not Microsoft-native from a development standpoint and moving away from using Visual Studio (traditionally for C# .NET Framework Plugins) to Node.js based vibe-coded Code-App development.
So, we’ve come from Model-driven Apps -> Canvas Power Apps -> now Code Apps!

Let’s get your first Code Apps out of th door.

Enable Code Apps in your Power Platform Environment

Given you might be a Power Platform / Dynamics 365 Admin already, go to the your Environment’s Settings as below –

1. Look for Features –
   
   
2. Then, Code Apps might already be Disabled, you need to Enable it.
   
   
3. Make sure to Save the settings and check if it is enabled.
   
   
   That’s it, you’re set. Now let’s get your environment setup.
   

Setup your VS Code with with Node.js [and Claude Code] to start writing your Code App

Suppose you are using VS Code [the most popular choice for coding lately 😊, or vibe-coding with Claude Code], here’s how you set it up –

1. Make sure Node.js is setup on your machine post. Check it using Claude Code on Visual Studio.
   Use “node –version” to check the installation is in place.
   
   
   In case Node.js is not installed – on a Mac, use Homebrew to get it or from winget on a Windows machine.
   
   
   
2. That set up, now – Power Apps CLI or “pac cli” for short.
   So, check using pac –version
   I’ll ignore the rest of the message for now.
   
   
   
3. Now, my preference is to build locally and then host it on the environment. So, my next step is – to authenticate Power Platform CLI to the target environment.
   
   
   One of the ways to authenticate Power Apps CLI is to also use Device Login method. In that case, use the below –
   
   
   
4. Use pac org who to confirm if you are authenticated into the correct environment.
   
   
   Here, you are set with your tools. Now, let’s create a project locally.
   
   

Setup A Local App Folder

Now, let’s setup a local app folder now that your tools are authenticated and ready.

1. Run the command to create a Project folder locally and name your app.
   
   
2. Now, once I run this in Terminal on my VS Code, it’ll create the App.
   
   
   
3. As this looks good, I’ll now go ahead and initialize this in my connected environment.
   Using this command pa app init --display-name "Project Profitability Dashboard" --environment-id XXXXXX-XXXX-e9d2-8c94-e577a72007d7
   Once you run it in your terminal, it’ll give you this on your browser
   
   
4. Confirm the local build using ls command.
   
   You’ll see the files listed. Now you are all set.

Add Data Source to the Code App

Now, let’s add Data Source to the code App. In this case, it’ll be our Dataverse environment itself –

1. Use this command pa app add data-source shared_commondataserviceforapps to add the Data source. I’m not using a Connection Reference so it just took my Entra ID.
   
   
   
2. And I select the connector, it’ll be finally connected. Now, since this is a blank project, just add a dev script using npm install --save-dev vite
   
   
3. It’ll create the same code and you are done. Now, you can continue to talk to Claude Code to build your Code App and run it using pa app run
   
   
   Now, we’ll see how the App can run and your changes can start panning out!
   Watch out for Part 2 shortly!
   
   

Hope this was helpful!

Thank you