Part 1 : How to Create and Configure a New Azure Pipeline with a GitHub Repository

In this part, I’ll walk you through creating a new Azure Pipeline, connecting it to a GitHub repository, and configuring the integration with an Azure application installed on your GitHub repository.

By the end of this guide, you’ll have a fully functioning Azure Pipeline connected to your GitHub repo, ready to automate your builds and deployments. 🚀

Prerequisite

• Must have Azure Devops account (Recommended : having at least one organization created within with name same as that of your Github user name)
• Must have Github Account

Step 1: Create a New GitHub Repository

Create a New Repository:

1. Login to your Github account and click the New button.
2. Provide a repository name (e.g., semantic-version-template).
3. Choose between Public or Private visibility.
4. Initialize the repository with a README and .gitignore according to language used or leave it empty if you plan to push existing code.
5. Click Create Repository.
6. GitHub will show you a URL for the repository https://github.com/<username>/<repository-name>.git

Note : Make sure repo must have main branch created in it.

Step 2: Create a New React App Using CRA

1. Install NodeJs
Ensure you have Node.js installed on your system. You can download it from nodejs.org.
To verify Node.js and npm are installed:
node -v
npm -v

2. Create a New React App
Use the following command to create a new React app:
npx create-react-app <your_app_name>

3. Navigate to Your App's Directory:
cd <your_app_name>

Note : You can create project of your own interest.

Step 3: Add the Remote Repository to Your Local Directory

1. Add Remote Origin
Use the git remote add command to link your local repository with the GitHub repository but make sure your in project directory :
git remote add origin https://github.com/<username>/<repository-name>.git
2. Verify the Remote
Confirm the remote has been added correctly:
git remote -v

origin  https://github.com/<username>/<repository-name>.git (fetch)
origin  https://github.com/<username>/<repository-name>.git (push)

Step 4: Create Azure Devops project

1. Navigate to Azure DevOps:
Go to Azure DevOps and log in.
Note : As soon as you create an azure devops account it create a default organization for you.
2. Create Azure Devops Project :
Click on New project button highlighted in screenshot below :

Provide name, description, set visibility and click on Create button highlighted in screenshot below :

Step 5: Create a New Azure Pipeline and connect with Github repo

1. Create new pipeline:
1.a In your Azure DevOps project, select newly create project navigate to Pipelines menu in left side and click New Pipeline button highlighted in screenshot below :

1.b Click on GitHub option

1.c Select the repo which you want to create pipeline for :

1.d As soon as you select any repo, you will be redirected to configure tab where azure devops will try to connect with your repository and ask for authentication.

1.e After successful authentication azure devops will install Azure Pipeline App on your Github repo.The Azure Pipelines GitHub App is an official GitHub application that integrates Azure Pipelines with GitHub repositories. It enables seamless CI/CD workflows by allowing Azure Pipelines to interact directly with your GitHub repositories. This app is used to automatically trigger builds, tests, and deployments in Azure Pipelines whenever changes are made in your GitHub repositories.

1.f After installing Azure Pipeline App, you can choose a template for azure-pipeline.yml file for initial pipeline execution. That can be changed later on.

Conclusion

By following these steps, you’ve successfully created a new GitHub repository, installed the Azure Pipelines app, and configured an Azure Pipeline to automate builds for your project.
Stay tuned for more guides to help you optimize your pipelines and development practices. Happy coding! 🚀