GitHub Self-Hosted Runner inside a container

If you are using GitHub Actions, you have four choices for the runner:

  1. Windows Runner
  2. Ubuntu Runner
  3. MacOS Runner (Preview)
  4. Self-Hosted Runner

GitHub Actions for Microsoft Power Platform support only Windows Runner (as of Dec 2020). If you are building some workflows using the GitHub hosted runner, the only way you can troubleshoot the workflow is by using the logs, that can be turned on using the ACTIONS_RUNNER_DEBUG and ACTIONS_STEP_DEBUG environment variables.

You cannot use act or tmate because you are using Windows Runner. One way to work around the jam is to use self-hosted runner, if you are troubleshooting the Action. Rather than configuring the runner on your local machine, what if you could run it inside a container? This way you can run multiple runners on the same machine, all using the same underlying Windows Servercore image.

You need to install the following in your local machine:

  1. Docker Desktop
  2. VSCode
  3. Docker Extension for VSCode

During or after installation of Docker, switch to Windows Container, rather than Linux containers, as we need to use the Windows Servercore image. Now, clone this repo https://github.com/rajyraman/docker-github-self-hosted-runner on your local machine. Next, go to https://github.com/settings/tokens and create a Personal Access Token with repo scope.

Personal Access Token

Once you have the token, you can run the runner-setup PowerShell script to create the environment file for the container that has the repo url where the Actions with self-hosted runner will run, and the personal access token required to connect to the GitHub API.

PowerShell to configure env file

Now run docker-compose up –build and you should see the container being built and started with the GitHub Runner.

Building the container
Actions Runner

You should now be able to see the runner on the repo that you setup the env file for.

Now let us create a new workflow that utilises the self-hosted runner. The key this here is to mention the self-hosted runner on “runs-on”.

Sample Workflow

Since this workflow uses workflow_dispatch trigger, you can run it manually. If you now run the workflow, you should start see the logs appear on the container’s console.

Action Logs

With the latest version of the Docker extension for VSCode, you can also explore the container’s file system, which is quite handy, in case you want to inspect the artifacts produced by the workflow.

Exploring container’s file system

I hope this tip will help you when you are stuck building workflows with Power Platform Actions.

Quickly scaffolding out your new PCF Component in GitHub

tl;dr; You can use PCF Field Template and PCF Dataset Template to quickly create your new PCF Component in GitHub.

It is not an overstatement to say that there is still so much buzz around PCF components, even though there are no monthly announcements like canvas apps or Power Automate. Just look at the sheer number of components in pcf.gallery and you will be amazed by the creativity of the community.

To help people with creating new PCF components, you have Yeoman PCF Generator to do the scaffolding. Power Apps community is significantly lagging behind in using DevContainers, and believe me, by 2022, Dev Containers and GitHub Codespaces will become so common place, that we don’t blink an eyelid.

With that in mind, I thought it will good if I can move the scaffolding process entirely to GitHub rather than doing this locally. PCF CLI is not cross platform. This is the blocker at the moment for Codespaces, but that is being worked on.

Chat Transcript from Ignite

There are two repos:

In order to create a new PCF Repo, just click the “Use this Template” button.

When you create a new repo from the template, use this convention “PCF-ComponentName-Component“. The important thing is to have hyphen in the repo name, otherwise you will have issues in scaffolding out the repo, and PCF CLI will throw an exception.

Your new repo will also have a GitHub workflow to build the component and release the solution. It can be run manually. It will also run automatically when you commit something the repo with a tag that begins with “v” e.g. v1.5. You can refer https://git-scm.com/book/en/v2/Git-Basics-Tagging for information on Git tags.

I hope this will help people creating new PCF Components.

Developing PCF Components inside a container

Before anyone can start developing PCF components, they have to prepare their local machine and get it ready. This usually means that a whole bunch of tools and frameworks have to be installed. As per Microsoft documentation you need these pre-requisites:

  1. Node JS
  2. .NET 4.6.2 Developer Pack
  3. Power Apps CLI
  4. Visual Studio Build Tools (for Solution packaging)

What if you could start with just VSCode without wasting time on any of this, with a bit of templating thrown in? It is possible, with one secret ingredient: Docker.

When I started this exploration around April, I tried using Linux containers. The reason being both VS Dev Containers and GitHub Codespaces only support Linux containers. But, I faced an issue straight-away during npm build.

npm build error

I tried to edit the files in node_modules and make it work but I encountered more issues, due to the fact that PCF CLI specifically targets Windows only. So, I gave up on that idea and until about a couple of weeks back.

I thought, why not use Windows containers in Docker, rather than Linux containers. The first image of my choice was nanoserver, because of the image size. But, nanoserver images does not seem to play nicely when I wanted to install VS Build Tools and chocolatey in the image, so I ended up moving to Windows Server Core.

Below are the relevant links you can look into for the Docker file and the image:

  1. Repo – https://github.com/rajyraman/pcf-docker
  2. Image – https://github.com/users/rajyraman/packages/container/package/pcf

Now lets us see how you can use this image to start your PCF Development.

Step 1: Install Docker Desktop from https://www.docker.com/get-started

Step 2: Once Docker is up and running, right click on the icon and choose “Switch to Windows Containers”. The screenshot below is displaying Linux Containers because I am already using Windows Containers

Docker Right Click Menu

Step 3: Choose the folder where you want your sourcecode, and create two items: a folder called src and a file called pcf.env

PCF Folder Structure

Step 4: Add the details about your PCF Component on the pcf.env file. These correspond to the commandline args in PCF CLI. Below is a sample

namespace=RYR
name=TestComponent
template=field
publishername=natraj
publisherprefix=ryr

Step 5: Install Docker extension for VSCode, if you want to use the GUI, rather than commands for working with containers.

Step 5: Run the command below in VSCode’s PowerShell Terminal window to create the container from the image in GitHub Container Registry. I have specified the name of the container as “TestComponent” in the example below, but pick a different name based on the component name for the container.

docker run -it -v $pwd\src:c:\src –name TestComponent -p 8181:8181 –env-file pcf.env ghcr.io/rajyraman/pcf

Once you run this command, Docker will automatically pull the image from the registry and start building the local container.

It will also start running the PCF CLI commands inside the container.

Now if you check your local machine, you would see all the files generated by PCF CLI.

You can also see the container up and running.

You can also build the repo inside the container. Confirm that you are in the container’s terminal and not on your local machine’s terminal.

You can also build the solution using MSBuild inside the container.

Since the container’s port 8181 is mapped to the local machine’s port 8081, you can also run npm start and open the test harness on your local machine.

If you want to exit out of the container’s prompt into your host machine’s prompt just run “exit” command.

To see the list of all the containers, including this ones that are not running run the command below, or use the Docker extension.

docker ps -a

If the container is not running, run the command below to start the container and open the terminal. In the example below, the name of my container is “TestComponent”.

docker start -ai (docker ps –filter “name=TestComponent” -aq)

Now, you can just focus on writing your PCF Component without installing all the required pre-requisites on your local machine.

Automating PCF Build using GitHub Actions

Guido runs a great site called pcf.gallery where there are over 200+ PCF components. The components on the site are hosted on GitHub and have solutions that can be installed on CDS. Some components have managed solution, some have unmanaged, and some have both. Since lot of the components are open-source and are hosted in GitHub, I thought it would be good to automate this using GitHub Actions and ensure every component has both managed and unmanaged solutions.

GitHub Actions is similar to Azure DevOps. If you want to know more about GitHub Actions and how it compares to Azure DevOps, listen to DevOps and GitHub Actions with Edward Thomson on Hanselminutes. I created a starter repo with a workflow yml that anyone can use in their PCF repo hosted on GitHub. You can access this repo on https://github.com/rajyraman/pcf-actions-starter

In order to use this workflow on your repo do these steps:

  1. Clone this repo and copy the .github folder from the cloned repo into the root of your repo.
  2. Update the msbuildtarget environment variable on the yml to point to the folder with the “Other” folder. This folder would have been created when you ran the “pac solution init” command.PCF YAML
  3. The “Other” folder will have the xml files that will be packaged up into the solution.PCF Other
  4. Make sure that you update the value for “SolutionPackageType” on your cdsproj file to “Both”, so that the Solution Packager can build both Managed and Unmanaged Solutions.cdsproj

Once you make these changes commit the changes to your repo. The build command will run everytime you commit something to the repo. You can download the managed and unmanaged solutions from the artifact area on the build.

PCF Build

Once you are ready to release the solutions, tag the commit using “git tag”. If the tag is in this format: v* e.g. v1.0, v.1.0.0 etc., the workflow will run the Release steps, which will create a new release and add both the managed and unmanaged solutions to the release.

PCF Release

PCF Release TagPCF Releases

Both the Solution Name and the Solution Version will be picked up from the Solution.xml file, so as you release new versions, make sure you update this information on the file.

I hope this makes it little easier to automate your PCF builds and releases on GitHub.

 

 

Opening Lookups in Main Form Dialog

Main Form Dialog is a new feature in model-driven Power Apps. It was officially released this month (Feb 2020). Along with this, I also noticed today that Microsoft has also quietly added a new event that plays nice with MFD.

The new event is called OnLookupTagClick. This event handler can be used in scenarios where the user clicks on the lookup. Normally, this would redirect the page to the lookup record, but you can block this navigation on OnLookupTagClick, and rather show the lookup record on a modal popup using navigateTo. Below is the sample code on how to do this. Since I ran the code from DevTools console, I am using the deprecated Xrm.Page. If you are running this from a form, you should use the formContext.

Xrm.Page.getControl('parentcustomerid').addOnLookupTagClick(context => {
    context.getEventArgs().preventDefault();
	const tagValue = context.getEventArgs().getTagValue();

    Xrm.Navigation.navigateTo({
        pageType: "entityrecord",
        entityName: tagValue.entityType,
        formType: 2,
		entityId: tagValue.id
    }, {
        target: 2,
        position: 1,
        width: {
            value: 80,
            unit: "%"
        }
    });
})

Have a look at the GIF below to understand the UX of this approach.

2020-02-27_20-40-11