GitHub codespaces + SPFx

  1. How to push the code of the SPFx webpart from GitHub codespaces to a repository in Azure DevOps.

Part 1 — GitHub Codespaces

What are GitHub codespaces?

GitHub codespaces are cloud hosted development environments that can be created very quickly so that we can start coding on a project right away. In terms of SPFx development we can think of GitHub codespaces as a preconfigured development environment (in the cloud) which has all the SPFx pre-requisites installed.

Creating GitHub codespaces (need to request access first)

In order to create GitHub codespaces, we need a GitHub repository. Navigating to a repository and clicking on “Code” button and selecting “Open with codespaces” provides us an option to create a new codespace.

Create a new GitHub codespace

Accessing codespaces

We cannot RDP into this codespace, instead we connect to only the code we need in the codespace from VS code (either from the browser or from the editor on our machines). We need a VS code extension named “GitHub Codespaces” to access codespaces.

GitHub codespaces for SPFx

When a GitHub codespace is created, by default it will have Node version 12.x. For SPFx development we need Node version 10.x. Also the codespace will not have the other components like yeoman, the SPFx generator etc which are needed for SPFx development.

.devcotainer folder (more info on the contents below)

Docker file

Please refer this article by Waldek Mastykarz to know about Docker and SPFx. Since a Docker file already exists for SPFx, we will be using that for our initial setup with a minor update.

devcontainer.json

This file contains information about the default settings of a codespace. One of the setting we need is what ports need to be forwarded from the codespace. So we will be defining those in this file. For SPFx we need ports 4321, 5432 and 35729 to be forwarded from the codespace.

.devcontainer folder

Lets either create a new repository with only file in it (README.md) or open an existing SPFx repository. Let’s add a folder named “.devcontainer” in the repository at the root level.

  1. devcontainer.json (click to open content)

Creating a codespace (need to request access first)

Now let’s create a codespace from this repository. For this all we have to do is click on “Code” button and select “Open with codespaces” and click “New codespace”.

Codespace creation with SPFx Dockerfile
Codespace with the files in the repository
Version of Node in the codespace
Ports forwarded from the codespace

SPFx development

We can continue the next steps in the browser, however I prefer doing it in the VS code editor. So let’s open VS code and install the “GitHub codespaces” extension if not installed. After signing into codespaces with our GitHub accounts we will be able to see the codespace that was created earlier.

Connect to codespace from VS code

node_modules

One nice thing to think/feel about is that there is no “node_modules” folder of this project on our machines now!

Azure DevOps

If we want to store the above code in Azure DevOps instead of GitHub then in the next we will look at how to push the code from GitHub codespaces to a repository in Azure DevOps.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anoop

Anoop

154 Followers

Microsoft MVP. M365 Developer Architect at Content+Cloud.