Cloning an Azure Repo into GitHub Desktop with Single Click 🖱

Streamline Azure Repo Cloning into GitHub Desktop using Bookmarklet — A Comprehensive Guide

7 min readJul 27, 2023

🧾 Table of Contents

· 🧐 How to clone an Azure repo into GitHub Desktop? — General way.
· 🚀 How to clone an Azure repo into GitHub Desktop? — Bookmarklet way.
∘ ❓ What is bookmarklet ?
∘ 🤞 How can I use it to Clone GitHub Repo ?
∘ ✅ Single Line Code
∘ 📝 Key Concepts of the Script
∘ 📖 Explanation
∘ 🌟 Adding the Bookmarklet
∘ 🤟🏼 Let’s Test the Bookmarklet
· 🧐 References
∘ LinkedIn Post
· 🔍 Common Search Queries

🧐 How to clone an Azure repo into GitHub Desktop? — General way.

If you are reading this blog you must know how to navigate to the Azure Repo section and choose the required repo to clone.

Now, I have a Azure Repo named — “sample-repo” & I have GitHub desktop installed.

Open the repo to clone and click on the clone button as shown below

A small window will appear on the right side along with supported Apps or IDE that can clone directly. Unfortunately, GitHub Desktop is not one of them.

We have to do the cloning in old-fashioned way. So, we should follow these steps —

Open GitHub Desktop application & Click on File in top menu and then choose Clone Repository or you can just use the shortcut ctrl+shift+o .

You’ll see a small window with multiple options such as GitHub, GitHub Enterprise, URL. We should select the URL tab.

Now, from the above window where you have opened the repo, Copy the HTTPS URL. In this case it will be — https://muralidharthunuguntla@dev.azure.com/muralidharthunuguntla/upendra-thunuguntla/_git/sample-repo and paste in the URL section in the Application and choose a path to clone.

Now click on clone and in most cases it will ask for authentication for the first time.

You can get the credentials from the repo screen — Click on Generate Credentials in the following screen.

Once the credentials are generated copy the username & password.

Paste the credentials in the application window and click on the save & retry.

Once the credentials are verified and cloned. You can see the repo added to the application.

Now you can modify and perform various git operations.

🚀 How to clone an Azure repo into GitHub Desktop? — Bookmarklet way.

❓ What is bookmarklet ?

A bookmarklet is a small piece of JavaScript code that can be saved as a bookmark in a web browser and used to perform specific functions on a webpage with a single click.

🤞 How can I use it to Clone GitHub Repo ?

Copy the below script which has all the required code to clone the repo from Azure DevOps Repository.

javascript: (function() {
    var url = window.location.href;
    var githubUrl = 'x-github-client://openRepo/' + url;
    window.location.href = githubUrl;
})();

✅ Single Line Code

This single line snippet will be useful when you are creating the Bookmark/Favorite.

javascript:(function() {   var url = window.location.href;   var githubUrl = 'x-github-client://openRepo/' + url;   window.location.href = githubUrl; })();

📝 Key Concepts of the Script

Bookmarklet: A bookmarklet is a small piece of JavaScript code that can be saved as a bookmark in a web browser. When the bookmarklet is clicked, it executes the JavaScript code on the current page.
window.location: The window.location object provides information about the current URL and allows for navigation to a new URL.

📖 Explanation

The code starts with the javascript: protocol, which is required for bookmarklets to be executed in the browser.
The code is wrapped in an IIFE to create a separate scope and prevent any variable conflicts.
The url variable is assigned the value of the current URL using window.location.href.
The githubUrl variable is constructed by appending the url to the GitHub URL scheme x-github-client://openRepo/.
Finally, the window.location.href is set to the githubUrl, redirecting the user to the GitHub repository page.

🌟 Adding the Bookmarklet

The process will be exactly same as adding a Bookmark or Favorite for any Modern day browser. However, I’ll cover the process for Chrome in this article.

In Chrome — Go to chrome://bookmarks
Once the window is opened, right click on the empty space to see the following menu.

A pop up with 2 inputs Name & URL will be shown and paste the one line script from the above in the URL box and Give it any Name for the same. I’ll be giving a name “Clone the Repo”.

Then click on save. Once you click on save It will be added to bookmarks section at last and can be seen from Chrome home page as well and make sure to enable the “Show Bookmarks Bar” (by right clicking on the bar) option to see the bookmark bar even when browsing.

Finally, we have added the Bookmarklet and The process will be similar for all browsers.

🤟🏼 Let’s Test the Bookmarklet

Go to the Repo you want to clone and you should see the Clone the Repo button in the bookmarks bar.

Once you click on it for the first time It will ask for a confirmation to open with GitHub Desktop app. Click on Open and you can select the check mark to keep the app default and not ask again and again.

For testing this, I have deleted the earlier folder that is cloned already. Once you click on Open it will directly open the GitHub Desktop application and go to Clone Repo section and URL Tab with all the details prefilled.
You just need to change the Local Path — If at all you want to change.

Once you see this window, click on clone to perform the clone operation.
From time to time you might see the Authentication failure window due to several reasons and you can simply follow the above procedure to Generate Git Credentials and use the same.

Important point to remember is — You must be on the homepage of the repository in order for this to work as the whole concept relies on the fact that Home page URL and Clone URL will be same.

That’s it. You have saved so many clicks for all your remaining repos just by doing this simple procedure.

🧐 References

LinkedIn Post

https://www.linkedin.com/posts/upendra-thunuguntla_cloning-an-azure-repo-into-github-desktop-activity-7090622569644503040-y7g6?utm_source=share&utm_medium=member_android

🔍 Common Search Queries

How to clone Azure repo to GitHub Desktop with one click?
What is a bookmarklet and how can it simplify cloning Azure repo to GitHub Desktop?
Step-by-step guide to using the Azure repo cloning bookmarklet for GitHub Desktop.
Is there a way to clone Azure repo to GitHub Desktop without multiple clicks?
Simplify Azure repo cloning to GitHub Desktop using a bookmarklet.
How to streamline the process of cloning Azure repo to GitHub Desktop?
One-click solution for cloning Azure repo to GitHub Desktop.
Enhance productivity: Clone Azure repo to GitHub Desktop in a single click.
Save time and effort: Use a bookmarklet to clone Azure repo to GitHub Desktop.
Is there a workaround to clone Azure repo to GitHub Desktop more efficiently?
Automate Azure repo cloning to GitHub Desktop with a bookmarklet.
Tips and tricks for cloning Azure repo to GitHub Desktop seamlessly.
Overcoming the limitations: Clone Azure repo to GitHub Desktop effortlessly.
Boost your workflow: Clone Azure repo to GitHub Desktop with ease.
How to simplify the process of cloning Azure repo to GitHub Desktop using a bookmarklet?