# Deploy React on Azure

## Link

* Azure devop: [https://dev.azure.com/](https://dev.azure.com/)
* Azure portal : [https://portal.azure.com/](https://portal.azure.com/)

## Register the application service on azure portal

![](https://1374779285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFW3x2aqEO8GF2kr3VU%2F-MYf59uOzqdRgIA2eZk0%2F-MYf6-bcYrw50mcWF31u%2Fimage.png?alt=media\&token=6f73d772-4275-42d4-85d8-39a65f7b3f2e)

## Setup a virtual machine&#x20;

* Follow the step to create the agent to run the pipeline

![](https://1374779285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFW3x2aqEO8GF2kr3VU%2F-MYf59uOzqdRgIA2eZk0%2F-MYf70X1AxoEW7NcVFb8%2Fimage.png?alt=media\&token=19038184-1789-4caf-9468-f0a336ea70f9)

* Finally, run the shell on background to listen for the job

```
nohup ./run.sh &
```

## Continuous Integration (CI)

```
trigger:
- master

pool:
  vmImage: ubuntu-latest
  name: Default
  demands:
  - agent.name -equals myJarvisVm

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '12.0'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'
  
- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: 'build'
    ArtifactName: 'drop'
    publishLocation: 'Container'
```

* Specify the agent that the pipeline run
* Install NodeJS
* Install node modules and build&#x20;
* Make the build folder as an artifact

## Continuous Deployment (CD)

![](https://1374779285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFW3x2aqEO8GF2kr3VU%2F-MYf59uOzqdRgIA2eZk0%2F-MYf8JqI7ljIL3wz28eJ%2Fimage.png?alt=media\&token=5ec9da67-0d4e-4e9d-ad79-63aab8e91975)

* Specify which application service to deploy on&#x20;
* Specify the artifact folder&#x20;
* Specify which agent should be used&#x20;
* Specify the startup command to start the application

## Result

![](https://1374779285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFW3x2aqEO8GF2kr3VU%2F-MYf59uOzqdRgIA2eZk0%2F-MYf97KnJuQnJintkZcb%2Fimage.png?alt=media\&token=de769200-b7e9-4815-a83f-d31efd692b8c)

