In part 1 of this series we saw how to create a GitHub codespace for SPFx development. In this part we will have a look at how to push the code from GitHub codespaces to Azure DevOps. This will be helpful if we are using Azure DevOps to store our code.
The instructions mentioned here can be done for any code in GitHub codespaces. Also the instructions show one of the several ways of push the code to Azure DevOps. So let’s be sure that this is not the only way.
Repository in Azure DevOps
Let’s start by creating a new Git repository in Azure DevOps. There are many articles on the internet explaining how to do that.
Our intention is to make the GitHub codespace we created in part 1 to talk to the repository we created in Azure DevOps. There are several ways of doing this. We will go ahead with the SSH key approach which will be helpful in a way that there is no need to enter password for our git operations.
In newly created repository, click on “Clone” and then click on “SSH” and copy the URL representing the repository.
Setup in codespaces
Now in VS code let’s connect to the GitHub codespace that we created in part 1 and open the terminal. Now the code over here is already connected to a repository in GitHub. We need to remove that connection and establish a new connection to our repo in Azure DevOps.
So in the terminal enter the following command to remove the .git folder and hence the connection
rm -rf .git
After that initialise a repository with the following command
git init
Let’s use the SSH URL copied earlier to add a remote for our Azure DevOps repo
git remote add origin git@ssh.dev.azure.com:v3/ — project — / — repo —
As mentioned earlier, instead of using password authentication for git operations, let’s use SSH keys to authenticate. More information on this can be found here. To create SSH keys let’s run the following command:
ssh-keygen -t rsa
More parameters can be supplied by referring the guides here and here.
As part of running the command, let’s not provide any file name or passphrase. So simply keep pressing return until the command finishes execution. Once completed, we can see the path of the file where the public key is saved.
We need grab that public key and add it in Azure DevOps i.e. associate the key with our Azure DevOps account. To get the public key run the following command
code /home/spfx/.ssh/id_rsa.pub
or if you are using VS code insiders
code-insiders /home/spfx/.ssh/id_rsa.pub
Copy the key without any line breaks and navigate to Azure DevOps and click on “SSH public keys” as shown in the screenshot below
In the SSH keys window, click on “New key”, provide a relevant description and paste the copied key and save it.
Back in VS code test if this operation was successful by entering the following command
git fetch
If all is ok the next steps are to push the code to the repository. These are standard steps like we always do for other projects which include the standard `git commit` etc either via the terminal or via the source control extension.
Conclusion
After all the operations, our code will be in Azure DevOps.
When we connect to this GitHub codespace again, everything is setup and we can continue working on our SPFx solutions and keep committing the changes to the repo in Azure DevOps.
Once the project is complete, we can delete the GitHub codespace and move onto the next project by following instructions in Part 1 and this article.
