The experimental feature for connecting Power Apps Canvas apps with Git version control is pretty amazing. You can read this blog post from my FF colleague Timo Pertilä to see how it looks like for app makers: Power Apps and Git version control.
What doesn’t feel quite as amazing for a low-code guy like me is the steps needed for configuring the local Visual Studio Code client to connect with a GitHub repo. Timo has also blogged about these steps.
I’m not sure how many people are yet aware of the really magical feature that GitHub offers: the github.dev web-based editor. In short, what this allows you to do is skip all of the local configuration steps and launch an instance of VS Code directly from a GitHub repo – in your browser. Here it is in action:
(Grab this MP4 video if the GIF animation doesn’t show up properly.)
What are the steps needed? First, we completely everything in Timo’s first blog post. Create a GitHub repo, then enable the experimental feature in Canvas app settings. Note: you will now have irreversibly linked your app to GitHub, so don’t do this for any “real” app just yet.
After linking the repo Power Apps will automatically copy all of the app source code there. Open up GitHub.com and browse to the /Src folder to find YAML source code files for your Canvas app screens.
Open a YAML file you want to edit. Then, it’s time for MAGIC! Press the period key (.) on your keyboard and watch VS Code load up in the current browser window, with the file you were looking at over on github.com.
You’ve now got immediate access to the wide variety of editing features of VS Code, to perform updates on any file in that repo you’re in. How does github.dev do this? Here’s the answer:
The web-based editor runs entirely in your browser’s sandbox. The editor doesn’t clone the repository, but instead uses the GitHub Repositories extension to carry out most of the functionality that you will use. Your work is saved in the browser’s local storage until you commit it. You should commit your changes regularly to ensure that they’re always accessible.
A simple example of the benefits is that we can visually track all the changes performed on our YAML file. Then, as we’re ready to commit it, just add a commit message and everything will be synced to the repo.
Whenv we’re back in the Power Apps studio, clicking on the sync button will retrieve the latest updates from GitHub:
And there we have it! A new value for the “app name” label that we edited in VS Code, with nothing but GitHub.com and a single “.” keypress.
Could we one day do all of this directly from within the Power Apps Maker portal / studio? Well, as you can see, Microsoft has a lot of the infrastructure already in place to make the online browsing and editing of Canvas app source code technically possible.
That is a really cool feature.
Instant Git-Versioning of a Powerapp. Nice. 🙂
I hope to get a possibility to publish the app if I make changes in the repo directly in code.
As far as I can see, the only way to publish changes, that were made directly in the repo, is to modify the PowerApp ‘a bit’ and save and publish it in PowerAppStudio in the browser.
Chris, it is true that this Git integration in itself is only a partial solution. To me it’s mostly a preview showing how MS is planning to make the YAML behind Canvas apps visible, editable and manageable. The full workflow for developing apps outside the Studio GUI is a bigger story. I’d actually be more interested personally in getting the VS Code experience for viewing all Canvas app code built into Power Apps Studio, since the complexity of various Power Fx formulas within bigger apps really could use a “raw code” experience just to understand what’s going on!