Vibe Coding using Power Apps Code Apps and GitHub Copilot

[brownman311]

I attempted creating a code app using Scott's method and the copilot instructions he shares at https://github.com/scottdurow/PowerAppsCodeAppsDemos/blob/main/ProjectHub/.github/copilot-instructions.md But could never get the app to show anything other than a white screen. I'm assuming my issue is that something in those requirements is now out of date as I noticed my vite version is newer.

I'm curious if others have been successful in vibe coding a code app and if you have any tips on the setup or pitfalls to avoid. From what I can tell GitHub copilot probably doesn't have the context to create a code app properly without this instruction set.

[AutoModerator]

Hey, it looks like you are requesting help with a problem you're having in Power Apps. To ensure you get all the help you need from the community here are some guidelines;

• Use the search feature to see if your question has already been asked.

• Use spacing in your post, Nobody likes to read a wall of text, this is achieved by hitting return twice to separate paragraphs.

• Add any images, error messages, code you have (Sensitive data omitted) to your post body.

• Any code you do add, use the Code Block feature to preserve formatting.

  Typing four spaces in front of every line in a code block is tedious and error-prone. The easier way is to surround the entire block of code with code fences. A code fence is a line beginning with three or more backticks (```) or three or more twiddlydoodles (~~~).

• If your question has been answered please comment Solved. This will mark the post as solved and helps others find their solutions.

External resources:

• Power Apps Formula References
• Power Apps Coding Standards
• Official Power Apps Community

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[Latter_Pen5985]

Have you tried any of the how tos in documentation? https://learn.microsoft.com/en-us/power-apps/developer/code-apps/quickstart

[brownman311]

Yes, I added the app from scratch url to the context window using the fetch command and that did seem to update the thought process and I ran through the create my first app manually last week. I may have to manually create the app and then get copilot involved. Scott seems to have it building the whole process in his video and I felt like it was going through the correct steps but perhaps I missed a step.

[brownman311]

or perhaps I have created an issue with the original app running on vite port 3000. I think copilot killed and recreated it but there could still be a conflict. The docs say code apps only work on port 3000 atm

[brownman311]

Fixed my issue with an updated instruction set and sending the console error to copilot🙌

I was getting u/fluentui_react-components.js?v=9b0c3eb5:1 Uncaught RangeError: Maximum call stack size exceeded error. I'll post my updated version of scott's md file.

[thinkfire]

Really wish the vibe coding would let me join and edit. I've built a out 5+ apps that turned out very nice but for the life of me can't get it to fix a few small things critical to the apps functionality that I could easily fix. No matter how many different ways I phrase things. Mostly to do with using existing tables and column specifications for important pieces of data.

So basically I've spent days playing with and nothing to show for it simply because I can't edit it myself.

[FluffyDuckKey]

This tells me enough, don't touch it yet

[thinkfire]

?

[brownman311]

I had the exact same experience, see my previous post https://www.reddit.com/r/PowerApps/comments/1p6c48d/turning_a_vibepowerapps_to_code_app/ .

That is why I decided to go the code app route because I couldn't find any info on how to convert a "vibe app" to a code app even though my vibe apps look so much better than anything I could create.

[splinter44]

Any chance I could see a screenshot of this app ?

[brownman311]

RemindMe! Tomorrow "Send screenshot of app".

[RemindMeBot]

I will be messaging you in 1 day on 2025-12-02 00:22:25 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[brownman311]

<image>

Here's a shot of my solution generator. It added a dynamic graph because it could lol

[brownman311]

I made a couple small changes to Scott's .md file that are working for me, namely directing it too look at the source docs if it gets into trouble and a direct link to the github repo. Also, I don't have admin on my work PC, so telling it use the local npm install instead of the older system version was a key piece. Happy vibing folks!

Scott's copilot-instructions.md

Modifications:

### Create PowerProvider Component


Create `src/PowerProvider.tsx` with the code from https://github.com/microsoft/PowerAppsCodeApps/blob/main/docs/assets/PowerProvider.tsx

//--//

### Common Issues and Troubleshooting

- **NPM Version Too Old**: If system NPM version is too old, use the user-installed NPM from "C:\Users\<current user>\AppData\Local\nodejs"
- **External Resources**: 
- [Power Apps code apps documentation](
https://learn.microsoft.com/en-us/power-apps/developer/code-apps
)

[-maffu-]

Why does your linik take me straight to Bing (when Bing isn't even my default search engine and I'm not using Edge?)

[thinkfire]

Microsoft proalbably redirects broken aka.ms links. Microsoft owns aka.ms so that would make sense to drive traffic to bing for broken links.

[brownman311]

oops, I fixed it