diff --git a/appservice.bicep b/appservice.bicep
new file mode 100644
index 0000000..e5e1438
--- /dev/null
+++ b/appservice.bicep
@@ -0,0 +1,62 @@
+// param location string 
+// param AppName string
+// param runtimeStack string
+
+// var unique = substring('${uniqueString(resourceGroup().id)}', 0 , 3 ) 
+
+// @description('App Service')
+// var webAppName = 'mkhalid-${AppName}${unique}'
+// var appServicePlanName  = 'mkhalid-${AppName}-plan-${unique}'
+// var linuxFxVersion = runtimeStack   
+
+param location string 
+param webAppName string
+param runtimeStack string
+
+// 
+@description('App Service')
+var appServicePlanName  = '${webAppName}-plan'
+var linuxFxVersion = runtimeStack   
+
+@description('App Service Plan')
+resource AppServicePlan 'Microsoft.Web/serverfarms@2023-01-01' = {
+  name: appServicePlanName
+  location: location
+  kind: 'app'
+  sku: {
+    name: 'B1'
+    tier: 'Basic'
+    size: 'B1'
+    family: 'B'
+    capacity: 1
+  }
+  properties: {
+    reserved: true
+  }
+}
+
+// 
+
+
+@description('App Service')
+resource appService 'Microsoft.Web/sites@2023-01-01' = {
+  name: webAppName
+  location: location
+  kind: 'app'
+  properties: {
+     serverFarmId: AppServicePlan.id
+     siteConfig: {
+       linuxFxVersion: linuxFxVersion
+     }
+
+  }
+}
+
+
+
+
+
+
+
+
+
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
new file mode 100644
index 0000000..dc8ef79
--- /dev/null
+++ b/azure-pipelines.yml
@@ -0,0 +1,128 @@
+# Node.js with React
+# Build a Node.js project that uses React.
+# Add steps that analyze code, save build artifacts, deploy, and more:
+# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
+
+trigger:
+- main
+
+variables:
+  Group: "variable"
+  subscriptionId: "eeb9dfdd-9c17-44c3-a4a0-7529399ce200"
+  azureServiceConnection: "mkhalidServicePrincipal"
+  location: "eastus"
+  resourcegroup: "mkhalid-rg"
+  webAppName: "mkhalid-react-222"
+  runtimeStack: 'node|20-LTS'
+
+
+pool:
+  vmImage: ubuntu-latest
+
+stages:
+- stage: WebApplication 
+  displayName: Create web application in azure 
+  jobs:
+  - job: webApp
+
+    steps:
+      - task: AzureResourceManagerTemplateDeployment@3
+        inputs:
+          deploymentScope: 'Subscription'
+          azureResourceManagerConnection: '$(azureServiceConnection)'
+          subscriptionId: '$(subscriptionId)'
+          location: 'East US'
+          templateLocation: 'Linked artifact'
+          csmFile: 'main.bicep'
+          overrideParameters: '-webAppName $(webAppName) -location $(location) -runtimeStack $(runtimeStack)' 
+          deploymentMode: 'Incremental'
+          deploymentName: 'bicepDeployment'
+          # deploymentOutputs: 'bicepOutputs'
+
+- stage: Build
+  displayName: Build stage
+  jobs:
+  - job: Build
+    displayName: Build
+    
+    steps:
+    - task: NodeTool@0
+      inputs:
+        versionSpec: '20.x'
+      displayName: 'Install Node.js'
+    - script: |
+        npm install
+        npm update
+        # npm install express
+        # npm start
+        # npm run build
+      displayName: 'npm install and build'
+
+    - task: ArchiveFiles@2
+      displayName: 'Archive files'
+      inputs:
+        rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
+        includeRootFolder: false
+        archiveType: zip
+        archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
+        replaceExistingArchive: true
+    # - upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
+    # - upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
+    #   artifact: drop
+
+    - task: PublishBuildArtifacts@1
+      displayName: 'Publish artifact'
+      inputs:
+        pathToPublish: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
+        artifactName: 'drop'
+        publishLocation: 'Container'
+
+
+- stage: Deploy
+  displayName: Deploy stage
+  dependsOn: Build
+  condition: succeeded()
+  jobs:
+  - deployment: Deploy
+    displayName: Deploy
+    environment: 'webapp'
+
+    strategy:
+      runOnce:
+        deploy:
+          steps:
+          - task: AzureWebApp@1
+            displayName: 'Azure Web App Deployment'
+            inputs:
+              azureSubscription: '$(azureServiceConnection)'
+              appType: 'webAppLinux'
+              appName: '$(webAppName)'
+              package: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
+              runtimeStack: '$(runtimeStack)'
+              startUpCommand: 'npm start'
+              # startUpCommand: 'npm run start'
+
+
+
+####################################################33
+####################################33
+########################################################
+
+# steps:
+# - task: NodeTool@0
+#   inputs:
+#     versionSpec: '20.x'
+#   displayName: 'Install Node.js'
+
+# - script: |
+#     npm install
+#     npm update
+#     npm start
+#     # npm run build
+#   displayName: 'npm install and build'
+  # workingDirectory: 'simple-react-app'
+
+
+# - publish: 'build'
+#   artifact: 'react-app'
+#   displayName: 'Publish React App'
diff --git a/main.bicep b/main.bicep
new file mode 100644
index 0000000..899b492
--- /dev/null
+++ b/main.bicep
@@ -0,0 +1,22 @@
+targetScope = 'subscription'
+param location string 
+param webAppName string
+param runtimeStack string
+
+resource resourceGroup 'Microsoft.Resources/resourceGroups@2021-04-01' = {
+  name: 'mkhalid-rg'
+  location: location
+}
+
+
+module AppService 'appservice.bicep' = {
+  scope: resourceGroup
+  name: 'appservice_Module'
+  params: {
+     location: location
+     webAppName: webAppName
+     runtimeStack: runtimeStack
+  }
+}
+
+