0

So far I've been able to configure a method in C# that is able to hardcode a new repository in Azure DevOps, but my real goal is to create a user interface that allows the user to specify the request body which consists of the following:

name: 'nameOfRepository', project: { id: 'projectId' }

The user will fill out the first input field with the desired name of the new repository. The second input field should use a GET Request that displays all available projects in your organization in a dropdown list. I'm also using .NET Core 3.0 and believe this probably has to be done with an API controller as well, but I am not certain.

I have little to no experience with React and have no idea how and where I'm going to specify the request body and personal access token to create the repository. I would appreciate an explanation of how this works and would also appreciate a solution that could guide me in the right direction.

1 Answer 1

0

Azure DevOps Rest API Documentation will give you access to the platform. If you are decided to develop totally in React js. I would like to suggest to take a starter kit, mostly will cover all your basic setup to React.

Follow the below steps to get an idea of how you can achieve with react js

  1. Need to set up OAuth in azure deops. The below link will give an idea. In the callback page, you need to store access token store
    https://learn.microsoft.com/en-us/azure/devops/integrate/get-started/authentication/oauth?view=azure-devops. If you have personal auth token this is not required

  2. Get all list of repositories using fetch or Axios API Example with Axios:

    const headers = {
           'Content-Type': 'application/json',
            'Authorization': 'bearer token' or 'basic personalaccesstoken'
         }
    
    axios.get('https://dev.azure.com/{organization}/{project}/_apis/git/repositories', {
            headers: headers,
            params: {
            'api-version':'5.1'
          }
          })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
    
  3. Use react form to capture the input value and on submit of form, validate against the repositories, if it is new call the Axios or fetch post method to create a new repository

Example with Axios

  const headers = {
      'Content-Type': 'application/json',
      'Authorization': 'bearer token'
    }
    const data = {
    name: '' 
    parentRepository: {id: '', ....}
    project: {id: '', ...}
    }
     axios.post('https://dev.azure.com/{organization}/{project}/_apis/git/repositories', JSON.stringify(data), 
     {
            headers: headers,
            params: {
            'api-version':'5.1'
          }
          })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });

Similarly, you can access all the API's mentioned REST API documentation of Microsoft. link

Sign up to request clarification or add additional context in comments.

4 Comments

I don't understand how the code above is supposed to be used and feel like there are many missing elements for the code to start working... Pasting this code into a new js file gives me many errors, even with react and axios installed. The example with Axios you showed in the 2nd code example; how do I make this code work? What's the need for a parentRepository? Please read my question again
This is an overview or a guide to get a start. I am not providing exact code, because I don't know, what modules you are using inside and complete end to end overview of your project. I provided a solution with the most commonly used React JS REST API framework. and what parameters you need to pass and how you can get parameters from azure. You need to understand and replace placeholders etc.. and modify according to your requirement. I understand this is a challenging task. I might guide you to achieve this.
I see. Well I am trying to create a method that creates a new repository in Azure DevOps through React js and Azure DevOps REST API. The user will be given 2 input fields to fill out; first one is a text field where they specify the name of their new repository. The second input field is a pulldown menu or dynamic input field that contains all the available projects in a given organization. (Basically, a GET Request that gathers all projects in an organization and allows the user to select which project the repository is created in. The inputs will be submitted with a POST method to the API.
Does that explain it any better than my original question?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.