Power Apps Code Apps: Build and Publish Your First App (Part 2)

In this blog, we’ll build our first Power Apps code app, a Learning Tracker, run it on our own machine, and publish it into a solution in Power Apps.

If you haven’t set up your machine yet, start with Part 1: Power Apps Code Apps Setup and come back here once all four tools are installed.

Step 1: Create a solution

We’ll keep everything for this app in its own solution, under our own publisher.

1. Go to make.powerapps.com and pick your environment from the top right. Use the environment where you enabled code apps. You’ll pick the same one later in VS Code.
2. Select Solutions in the left menu, then + New solution.
3. Enter a Display name, for example Learning Tracker. The Name fills in by itself.
4. Next to Publisher, select + New publisher and fill in:
   • Display name: LearningTracker
   • Prefix: lta It’s added to everything this publisher creates.
5. Select Save, make sure your new publisher is selected, then select Create.

describe what this screenshot shows

Your empty solution is ready and opens automatically. Look at the browser’s address bar: the URL ends with /solutions/ followed by a long ID. That’s your Solution ID. Copy it and paste it into Notepad, because we’ll need it at the end of this blog.

Step 2: Create a project folder and open it in VS Code

1. Create a new folder anywhere you like on your computer, for example E:\Code Apps Demo\learning-tracker. Name the last folder without spaces, like learning-tracker.
2. Open VS Code and select File > Open Folder, then pick the learning-tracker folder.
3. If VS Code asks “Do you trust the authors of the files in this folder?”, select Yes, I trust the authors. It’s your own empty folder.
4. Open the terminal from Terminal > New Terminal. The terminal opens already inside your folder, so every command we run from here lands in the right place.

Step 3: Create the project from Microsoft’s template

Microsoft provides a ready-made starter template for code apps. Copy it into your folder by running this in the terminal:

PowerShell

npx -y degit github:microsoft/PowerAppsCodeApps/templates/vite .

The . at the end means “put it in this folder”. When it finishes, you’ll see “cloned microsoft/PowerAppsCodeApps”, and files like package.json, src and vite.config.ts appear in VS Code’s Explorer on the left.

Now install the project’s packages:

PowerShell

npm install

This takes a minute or two and ends with something like “added 181 packages, found 0 vulnerabilities”. You can ignore any “deprecated” warnings.

If, in case, you see a warning about install scripts for esbuild, approve it with this command:

PowerShell

npm install-scripts approve esbuild

Step 4: Connect and run the app

First, copy your environment ID: go to make.powerapps.com, select the gear icon (top right), then Session details, and copy the Environment ID.

Then run this in the terminal, replacing YOUR-ENVIRONMENT-ID with the ID you copied:

PowerShell

pa app init --display-name "Learning Tracker" --environment-id YOUR-ENVIRONMENT-ID

--display-name is the name of the app that users see in Power Apps, so you can use any name you like. If a browser window opens, sign in with your work account.

When you see “Created power.config.json”, your app is linked to the environment. That file in your project folder stores the app name and environment details. If the output hints you to run npm install, skip it, because you already did that in Step 3.

Now, run this in the terminal:

PowerShell

pa app run

It prints a few links. Ctrl+click the one labelled Local Play to open it, in the same browser where you signed in. You’ll see Microsoft’s starter page running inside Power Apps. That’s your first code app, live. 🎉

If the browser asks to allow access to your local network, select Allow, because that’s how Power Apps loads the app from your machine.

Leave this terminal running while you work. Every time you save a file, the browser updates by itself. To stop the app, click in the terminal and press Ctrl+C.

Step 5: Publish the app into your solution

Your app runs locally. Now let’s publish it into the solution 'Learning Tracker' we created in Step 1. Your first terminal is busy running the app, so open a second one with the + button in the terminal panel.

First, build the app:

PowerShell

npm run build

It ends with “✓ built in…”, and your compiled app is now in a dist folder.

Then publish it, replacing YOUR-SOLUTION-ID with the solution ID you saved in Step 1:

PowerShell

pa app push --solution-id YOUR-SOLUTION-ID

When you see “App pushed successfully”, your app is live in Power Apps.

To check, go to make.powerapps.com, open Solutions > Learning Tracker, and you’ll see your app listed inside. 🎉

Note: to play the published app, you need a Power Apps Premium license or a free trial. See the licensing section in Part 1.

From empty folder to live app. What’s next?

In five steps, you created a solution, built your first code app, ran it locally and published it into Power Apps. No designer, no drag and drop, just VS Code and a handful of commands.

In part 3, our app gets personal. We’ll add our first connector and build a header that greets every user by name, with their own profile photo, using just one small React component.

Did your app go live on the first try? Tell me in the comments.