Azure Artifacts enables developers to efficiently manage all their dependencies from one place. With Azure Artifacts, developers can publish packages to their feeds and share them within their team, across organizations, and even publicly across the internet.

Azure Artifacts if you need to share packages within the same team, across organizations, or even publicly.

Create a new project

Goto azure repository → Import a repository

https://github.com/Ibrahimsi/nike_landing_page.git

Successfully imported

Create a Webapp in Azure portal

App Services → Create → Web App

Modify the configuration setting

Note: You must set the app settings as below to disable all file caching:

Add 2 New application setting

Name: WEBSITE_DYNAMIC_CACHE
Value: 0

Name: WEBSITE_ENABLE_SYNC_UPDATE_SITE
Value: never

Save the changes

If you click the URL the page is goes to default web page

Default web page is running on Azure

Create a new pipeline

Set of automated processes and tools that allows both developers and operations professionals to work cohesively to build and deploy code to a production environment.

Create Pipeline → Azure Repos Git → Day7_Artifacts → Starter Pipeline

trigger: 
- main

stages:
- stage: Build
  jobs:
  - job: Build
    pool:
      vmImage: 'ubuntu-latest'
    steps:
    - task: Npm@1
      inputs:
        command: 'custom'
        customCommand: 'install -D tailwindcss postcss autoprefixer'
    - task: Npm@1
      inputs:
        command: 'custom'
        customCommand: 'run build'

Organizational constructs that allow you to store, manage, and group your packages and control who to share it with.

Let’s Create a artifacts feed

Created

Again goto the pipelines click show assistant

npm stands for Node Package Manager. It’s a library and registry for JavaScript software packages.

Add NPM

Add NPM the code automatically add to the pipelines

trigger: 
- main

stages:
- stage: Build
  jobs:
  - job: Build
    pool:
      vmImage: 'ubuntu-latest'
    steps:
    - task: Npm@1
      inputs:
        command: 'custom'
        customCommand: 'install -D tailwindcss postcss autoprefixer'
    - task: Npm@1
      inputs:
        command: 'custom'
        customCommand: 'run build'
    - task: Npm@1
      inputs:
        command: 'publish'
        workingDir: './dist'
        publishRegistry: 'useFeed'
        publishFeed: '515a2edb-27f5-416f-88c0-0c50138edec1/336630b1-903f-4ae3-88c6-69149d01550e'

Pipeline Code

Finally save the run Got some error

Goto azure artifacts given to the contributor access

Click the Feed Settings

Remove the old one

Add the → contributor permission

Enables users to manage personal views, edit items and user information, delete versions in existing lists and document libraries and add, remove, and update personal Web Parts.

Again run the pipeline. Change the version 1.3

Automatically trigger the pipeline

Goto the azure feed

Create a release pipeline

A Release Pipeline consumes the Artifacts and conducts follow-up actions within a multi-staging system.

Release pipeline is a process to ship committed code into production by incorporating CI/CD, automated testing, and finally, software release.

Pipelines → Releases → New Pipeline → Select → Azure App Service deployment

Given to the name → Deployment

Click Add an artifact → Azure artifacts

Enable the continuous deployment trigger

A trigger consists of a specified component, deployment process, and user.

Enter the stage name and select the subscription, Service name…

Select the azure pipelines on agent pool.

An agent is a service that runs the jobs defined in your pipeline. The execution of these jobs can occur directly on the agent’s host machine or in containers.

Deploy Azure App Service

Added to the some script on app service.

cp -rf /home/site/wwwroot/package/* /home/site/wwwroot/

Save the all setting. Check the release pipelines there is no create

Goto azure artifact promote artifactory

Pre-release means software, online services, and additional products and features that are provided for preview, beta, (or) early access versions. Click that Prerelease

Check the release pipeline

Deploy the stages

Job is completed

Check the URL

KUDU Console is a debugging service for Azure platform which allows you to explore your web app and surf the bugs present on it, like deployment logs, memory dump, and uploading files to your web app, and adding JSON endpoints to your web apps…

Kudu gives you helpful information about your App Service app, Such as App settings. Connection strings. Environment variables.

Diagnostic and troubleshooting purposes when your function or function host fails.

Redirect the console

Click an SSH you should able to the access in web app

File created before 10 minutes

Thank you 🙏 for taking the time to read our blog.

👤 Author

Join Our Telegram Community || Follow me on GitHub for more DevOps content!