5 Steps to Connect your Vibe Coded Apps with Git

Ok, Code Apps are hot at the moment. But which type of Code Apps are we talking about? Have you created your first Vibe Coded App through https://vibe.powerapps.com? Or did you use the Power platform CLI approach?

Code Apps vs Vibe Coded Apps

Things are getting confusing as I see people call both Code Apps. So I’m going to use the term Code Apps for apps that were created using the CLI and Vibe Coded Apps are the apps that we create using the natural language.

Within this post I will have a look at how different these two options are and the results are nowhere near compatible. So instead of the Canvas Apps being replaced by Code Apps, we now seems to have four different types of UI.

• Canvas Apps
• Power Pages
• Code Apps
• Vibe Coded Apps

When we talk about replacing Canvas Apps with coded apps, which of the two options will work for you?

Code Apps – This is not something for citizen developers. I compare these apps with PCF controls and SPfX Web Parts. Even if you use various AI tools to assist you with the development; Do you really want to develop code that you don’t understand?

I’m going to have a look at the Vibe Coded Apps first. I’m aiming to get the source code into DevOps. As we will see DevOps isn’t supported yet.

Step 1 – Create a Source control repository

When we are talking about code we should be talking about source control. In this post the details on how to connect your code apps to source control.

I’m going to assume that you already have a DevOps organisation setup. So you can simply visit https://dev.azure.com/ and then click on the New Project button.

Then complete the project name and description and create the project.

Then you can add other users to your project, but I’m going to skip that in this post.

In the menu at the left, click on Repos and then click on the initialize button to get the repository ready to receive your code.

We now have a repository setup.

Step 2 – Coding an initial code app

Now we can switch over to vibe.powerapps.com. I want to use solutions therefore I will want to set the preferred solution. That way everything I create will be added automatically to a solution. You might remember that we can do this within the solutions overview on make.powerapps.com. Unfortunately all the best practices around solutions has been removed from the vibe.powerapps.com pages.

Aaaaahhhh. How many times is poor practice easy while best practice is hard to find. Ok, So I’m goin to go to make.powerapps.com to get things sorted.

First we need to create a solution.

Step 2 – Create a solution

Click on Solutions in the menu on the left side. Then select New Solution at the top.

Then complete the following form and tick the preferred solution option as well. If you happen to forget this you can also do this later within the solutions overview.

Now we’ve got a solution, so we can go back to Vibe.PowerApps.com

Step 3 – Create the code app

So within Power Apps I’m using the following one liner to create my code app. I know that one line prompts aren’t good enough but this is only for demo purposes.

Create an app to help me manage my shopping list.

Within a few minutes the following app is created for me. If this app is really what I imagined or not doesn’t really matter for now.

I’ll hit the publish button and then I’ll check in my Power Apps solution that the various elements have been created.

Step 4 – Connect your solution to Git

We can see that our solution hasn’t been connected to Git yet. So I’m going to connect it now.

Just click on the Connect to Git and

Then in this case I’m going to connect just my solution to the project that we earlier created in DevOps.

Before we select the solution that we want to connect. You could connect a whole environment but in general I would separate solutions within separate Git Projects anyway.

Then just click the Connect button near the bottom of the dialogue.

And we have our project connected to Git. but the source code is not there yet.

Step 5 – Pushing the code to DevOps Git

To Push our solution to DevOps we have to reopen the solution and click on the Source control option.

Power Apps Source Control will now show us exactly what all the updates are that are outstanding.

A single click on the commit option will now ask use the supply a comment. Make sure that these comments make sense. It could be useful at a later stage when you want to restore a previous version of your app.

Depending on the number of changes made this can now take a while.

Once the above completes we can check in the DevOps project if our files have arrived.

Ok, that was all easy. Now we want to make some changes to our code. Remember it is important to understand the code that you generate otherwise you’re only going to generate something that you aren’t able to maintain when things go wrong.

Attempt to Update your app in DevOps

For the purpose of this post I’m going to change a visible thing within the app. I want to rename the app to “Shopping list” rather than “Shopping list app”

You can use any editor to do these edits but I’m just going to do my edits directly within DevOps, Click on the Edit button to turn the file into edit mode and then make the update.

Now make sure that you leave a proper comment when you commit your changes. And also add a link to your task within DevOps. This is where you will find that using DevOps for everything will become really beneficial. When you open your task later on you can very quickly find all your code changes made.

Now you might have more changes to make before you want to create a pull request. In this demo, I’m not looking at using multiple development environments with multiple developers and then merging the code, but that is all possible of course.

Now you have to select your branch that you want to create the pull request for. But as I created my update directly in the main branch we can skip this step.

Attempt to Pull the updates into our app

We now go back to our power apps tab in our browser.

Click on the Check for updates and the update that we made should now come through. When we use multiple branches in DevOps, this will only happen after we have accepted the pull request.

Then click on the Pull option at the top left and you will currently get this An Unexpected error occurred.

You get this error as Vibe Coded Apps aren’t supported with the Git integration yet. So far, I’ve found that pulling the code from the code app to the DevOps repository is fine but updates can’t go back yet.

However, Vibe Coded Apps (The ones you don’t create through Vibe.PowerApps.com) can be synced with DevOps using the Power Apps CLI.

Enable Power Apps Code Apps

In the Power Apps Admin Center enable the Enable code apps feature.

Install Prerequisites

Install Node.js and Power Platform CLI if you haven’t done so already.

Build your first Code App

And then we can create our first app following the steps described here.

Comparing the code of Vibe Coded Apps and Code Apps

If we now look at the code of the Code App we will see the following structure

While the Vibe Coded app is very different.

I would have hoped that Vibe Coded Apps would generate me a Code App without the need to code. But unfortunately it looks like these two great initiatives didn’t end up with a standard defined.

I would be interested to hear from you which Code Apps you are jumping on as the noise in the Microsoft community is telling us that Canvas Apps are apparently dead. Do you still develop new Canvas Apps? Or are you following the hype?