The blog of Blog of Christian Bär

Connect Netlify to Azure Repos

This article describes how to use Netlify’s continuous deployment feature with an Azure Repos repository.

After following the instructions below, each push to your Azure Repos repository will cause Netlify to grab your source, build it and publish the result as a web site.

Prerequisites

  • nodejs installed
  • npm installed
  • A git repository that has Azure Repos as only remote. The remote must have name = “origin” and it must be specified as an SSH URL.

Netlify CLI

  1. Open a command prompt.
  2. Install netlify CLI:
    npm install netlify-cli -g
  3. cd into your repository’s root folder.
  4. Initialize a new netlify site:
    netlify init --manual
  5. Follow the instructions that appear in the command line. Especially worth mentioning:
    • An SSH key will be displayed. Before continuing in the Netlify CLI, copy and paste the key into your Azure DevOps' account’s SSH public keys.
    • A webhook URL will be displayed. Before continuing in the Netlify CLI, copy and paste the URL into a new Service Hook of type Web Hooks that you can create in your Azure DevOps' project’s settings under https://dev.azure.com/SOMEACCOUNT/SOMEPROJECT/_settings/serviceHooks. In the Trigger on this type of event dropdown, select Code pushed.
      Remark: You will have to replace that URL later because it doesn’t seem to work (see following paragraph).

Fix Webhook

When you push your first changes to Azure Repos you will be very disappointed because netlify will neither have pulled your changes nor will it have built and redeployed your site. It seems that the webhook created in step 5 doesn’t work.

To fix the webhook create a new Build hook in your netlify project’s settings (at netlify.com). Then copy this build hook’s URL and replace the URL of the web hook you created in Azure DevOps with it.

Findings

Git remote named “origin” required

The git repository must have a remote called “origin” which must point to the Azure Repos' SSH URI (e.g. git@ssh.dev.azurecom:v3/SOMEACCOUNT/SOMEPROJECT/SOMEPROJECT) at the time netlify init --manual is executed.

Git repository with multiple remotes

If the repository has multiple remotes one of which is called “origin”, that remote will be connected with Netlify. The other remotes will be ignored.

Webhook doesn’t work

The netlify cli outputs the URL of a webhook which doesn’t seem to work.

Hire me! Web frontend with JavaScript, TypeScript, React, Svelte, HTML, CSS. Backend with .Net/C#, Node.js, (MS-)SQL. I fill your resource gaps, take on whole projects and create prototypes. Yes, tell me more

Share this post!