How to Clone the Power Apps Code App Templates with Git

At the recent office hours meeting, there was a question on how to clone the starter template with git. 

The documentation has been updated to call npx degit.
npx degit github:microsoft/PowerAppsCodeApps/templates/vite my-app

The reason for this request is for enterprise organisations with older versions of npm, upgrading to a version that supports npx can involve internal processes that take a long time. 

For those looking to clone the repo, here are the instructions from the earlier documentation, which has since been deleted.

The notable thing to be aware of is that the orginal git clone command will clone the entire repo, whereas npx degit will pull just the necessary template.

The instructions from the earlier version of the documentation now follows:

Cloning the PowerAppsCodeApps repository

This repository has the start of a TypeScript app that already includes the Power Platform SDK. Later we'll add guidance to that allows you to start from scratch without using this base app.

git clone https://github.com/microsoft/PowerAppsCodeApps.git
cd PowerAppsCodeApps

Open the HelloWorld sample

Open the
cd samples\HelloWorld
code .

This app project was created using Vite and it has two notable additions:

  • package.json has a reference to the Power Apps SDK that helps an app connect to Power Platform connectors.
  • PowerProvider.tsx which contains an initialize() function that the app uses to communicate to the Power Apps host that the app is ready to run.

Authenticate PAC CLI and point to your development environment

In Visual Studio Code, open a new terminal window and use the
pac auth create --environment {environment id}

All Power Platform apps, flows, and agents publish to an environment. The PAC CLI's auth command prompts you to authenticate with your Microsoft Entra identity and ensure the code app you add connections to and publish to Power Platform go in the specified environment.

Install dependencies

In the terminal window, run these commands:
npm install
pac code init --displayName 'Hello World'
  • npm install Installs the dependent libraries found in the package.json file.
  • pac code init Initializes a code app in the current directory.

Run locally

In the terminal window, run these commands:
npm run dev | pac code run
  • npm run dev Runs the scripts configured in the package.json file with the key value of dev. In this case, the script is "concurrently \"vite\" \"pac code run\"".
  • pac code run Runs a local server for connections loading locally in the app.

Build and deploy to Power Apps

In the terminal window, run these commands:
npm run build | pac code push
  • npm run build Runs the scripts configured in the package.json file with the key value of build. In this case, the script is "tsc -b && vite build".
  • pac code push Publishes a new version of a Code app.

If successful, this command should return a Power Apps URL to run the app.

Optionally, you can open Power Apps to see the app. You can play, share, or see details from there.

Congratulations! You successfully pushed your first code app!

Related posts