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

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



1.b Click on GitHub option



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.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! 🚀