feat: [SRTP-36] Deploy fe (#3)

Co-authored-by: Andrea Morabito <andrea.morabito@pagopa.it>

.devops/deploy-pipelines.yml

@@ -0,0 +1,211 @@
+# Azure DevOps pipeline to release a new version and deploy to production.
+
+parameters:
+  - name: 'UAT_PROD_DEPLOY'
+    displayName: 'Deploy on UAT then PROD environments'
+    type: boolean
+    default: False
+    values:
+      - False
+      - True
+
+# Triggers solo su tag
+trigger:
+  tags:
+    include:
+      - '*'  # Scatta su tutti i tag (generati dalla GitHub Action)
+
+pr: none
+
+variables:
+  npm_config_cache: $(Pipeline.Workspace)/.npm
+  vmImageNameDefault: 'ubuntu-latest'
+
+pool:
+  vmImage: '$(vmImageNameDefault)'
+
+stages:
+
+  - stage: build_dev_artifact
+    dependsOn: []
+    displayName: 'Build DEV artifact'
+    jobs:
+      - job: job_build
+        displayName: Build
+        steps:
+          # setups node by .nvmrc or .node-version file
+          - template: local-templates/node-job-setup.yaml
+          - template: local-templates/setup-env.yaml
+            parameters:
+              env: '$(environment)'
+              version: '$(Build.SourceBranchName):$(Build.SourceVersion)'
+
+          - script: |
+              npm run build
+            displayName: 'npm build'
+
+          - publish: dist
+            artifact: Bundle
+
+  - stage: deploy_dev
+    displayName: 'Deploy to DEV'
+    condition: succeeded()
+    jobs:
+      - job: job_deploy
+        displayName: 'Deploy'
+        steps:
+          - checkout: none
+
+          - download: current
+            artifact: Bundle
+
+          - task: AzureCLI@2
+            displayName: 'Sync storage'
+            inputs:
+              azureSubscription: '$(DEV_AZURE_SUBSCRIPTION)'
+              scriptType: 'bash'
+              scriptLocation: inlineScript
+              inlineScript: |
+                az storage blob sync --container '$web' --account-name $(DEV_STORAGE_ACCOUNT_NAME) --source "$(Pipeline.Workspace)/Bundle"
+
+          - task: AzureCLI@1
+            displayName: 'Purge CDN endpoint'
+            inputs:
+              azureSubscription: '$(DEV_AZURE_SUBSCRIPTION)'
+              scriptLocation: inlineScript
+              inlineScript: |
+                az cdn endpoint purge -g $(DEV_STORAGE_ACCOUNT_RG) -n $(DEV_CDN_ENDPOINT) --profile-name $(DEV_CDN_PROFILE) --content-paths "/*"
+
+  - stage: build_uat_artifact
+    dependsOn: []
+    displayName: 'Build UAT artifact'
+    condition: 
+      and(
+        succeeded(),
+        or(
+          contains(variables['Build.SourceBranch'], 'refs/tags/'),
+          eq(${{parameters.UAT_PROD_DEPLOY}}, true)
+        )
+      )
+    pool:
+      vmImage: 'ubuntu-latest'
+    jobs:
+      - job: job_build
+        displayName: Build
+        steps:
+          # setups node by .nvmrc or .node-version file
+          - template: local-templates/node-job-setup.yaml
+          - template: local-templates/setup-env.yaml
+            parameters:
+              env: 'UAT'
+              version: '$(Build.SourceBranchName):$(Build.SourceVersion)'
+
+          - script: |
+              npm run build
+            displayName: 'npm build'
+
+          - publish: dist
+            artifact: Bundle_UAT
+
+  - stage: deploy_uat
+    displayName: 'Deploy to UAT'
+    dependsOn: [ 'build_uat_artifact' ]
+    condition: succeeded()
+    jobs:
+      - job: job_deploy
+        displayName: 'Deploy'
+        steps:
+          - checkout: none
+
+          - download: current
+            artifact: Bundle
+
+          - task: AzureCLI@2
+            displayName: 'Sync storage'
+            inputs:
+              azureSubscription: '$(UAT_AZURE_SUBSCRIPTION)'
+              scriptType: 'bash'
+              scriptLocation: inlineScript
+              inlineScript: |
+                az storage blob sync --container '$web' --account-name $(UAT_STORAGE_ACCOUNT_NAME) --source "$(Pipeline.Workspace)/Bundle"
+
+          - task: AzureCLI@1
+            displayName: 'Purge CDN endpoint'
+            inputs:
+              azureSubscription: '$(UAT_AZURE_SUBSCRIPTION)'
+              scriptLocation: inlineScript
+              inlineScript: |
+                az cdn endpoint purge -g $(UAT_STORAGE_ACCOUNT_RG) -n $(UAT_CDN_ENDPOINT) --profile-name $(UAT_CDN_PROFILE) --content-paths "/*"
+            
+  - stage: build_prod_artifact
+    displayName: 'Build PROD artifact'
+    dependsOn: [ "deploy_uat" ]
+    condition: 
+      or(
+        contains(variables['Build.SourceBranch'], 'refs/tags/'),
+        eq(${{parameters.UAT_PROD_DEPLOY}}, true)
+      )
+    pool:
+      vmImage: 'ubuntu-latest'
+    jobs:
+      - job: job_build
+        displayName: Build
+        steps:
+          # setups node by .nvmrc or .node-version file
+          - template: local-templates/node-job-setup.yaml
+          - template: local-templates/setup-env.yaml
+            parameters:
+              env: 'PROD'
+              version: '$(Build.SourceBranchName):$(Build.SourceVersion)'
+
+          - script: |
+              npm run build
+            displayName: 'npm build'
+
+          - publish: dist
+            artifact: Bundle_PROD
+
+  - stage: prod_approve
+    displayName: "Pending PROD deploy approval"
+    dependsOn: ["build_prod_artifact"]
+    jobs:
+      - job: Deploy_Prod_WaitForApproval
+        displayName: Wait for PROD approval
+        pool: server
+        timeoutInMinutes: 4320 # 3 days
+        steps:
+        - task: ManualValidation@0
+          timeoutInMinutes: 4320 # 3 days
+          inputs:
+            onTimeout: 'skip'
+
+  - stage: deploy_prod
+    displayName: 'Deploy to PROD'
+    dependsOn: [ 'prod_approve' ]
+    condition: succeeded()
+    jobs:
+      - job: job_deploy
+        displayName: 'Deploy'
+        steps:
+          - checkout: none
+
+          - download: current
+            artifact: Bundle
+
+          - task: AzureCLI@2
+            displayName: 'Sync storage'
+            inputs:
+              azureSubscription: '$(PROD_AZURE_SUBSCRIPTION)'
+              scriptType: 'bash'
+              scriptLocation: inlineScript
+              inlineScript: |
+                az storage blob sync --container '$web' --account-name $(PROD_STORAGE_ACCOUNT_NAME) --source "$(Pipeline.Workspace)/Bundle"
+
+          - task: AzureCLI@1
+            displayName: 'Purge CDN endpoint'
+            inputs:
+              azureSubscription: '$(PROD_AZURE_SUBSCRIPTION)'
+              scriptLocation: inlineScript
+              inlineScript: |
+                az cdn endpoint purge -g $(PROD_STORAGE_ACCOUNT_RG) -n $(PROD_CDN_ENDPOINT) --profile-name $(PROD_CDN_PROFILE) --content-paths "/*"
+            

.devops/local-templates/node-job-setup.yaml

@@ -0,0 +1,76 @@
+# Azure DevOps pipeline template used to setup the Node project:
+# 1. checkout code
+# 2. setup correct node version
+# 3. install node dependencies
+
+parameters:
+
+# the branch, tag or commit to checkout
+- name: 'gitReference'
+  type: string
+  default: 'none'
+
+# whether code must be checked-out with persisted credentials
+- name: 'persistCredentials'
+  type: string
+  default: false
+
+# optional sub path where the project to be initialized is located. To be used on repository with multiple projects. 
+- name: 'projectDir'
+  type: string
+  default: '.' # current folder is default
+
+# if not set, the Node version will be red from .node-version and -nvmrc files, in this order
+- name: 'nodeVersion'
+  type: string
+  default: 'none'
+
+steps:
+- checkout: self
+  displayName: 'Checkout'
+  persistCredentials: ${{ parameters.persistCredentials }}
+
+# This is needed because the pipeline may point to a different commit than expected
+# The common case is when the previous stage pushed another commit
+- ${{ if ne(parameters.gitReference, 'none') }}:
+  - bash: |
+      git fetch && git checkout ${{ parameters.gitReference }}
+    displayName: 'Checkout reference'  
+
+- bash: |
+    cd ${{ parameters.projectDir }}
+    echo "current folder: $(pwd)"
+  displayName: 'Move to project folder'  
+
+# If a Node version is defined explicitly by parameter, such version is used
+# Else, version is red from .node-version file
+# Else, version is red from .nvmrc file
+- ${{ if ne(parameters.nodeVersion, 'none') }}:
+  - bash: |
+      echo "current folder: $(pwd)"
+      FROM_PARAM=${{ parameters.nodeVersion }}
+      echo "set FROM_PARAM='$FROM_PARAM'"
+      echo "##vso[task.setvariable variable=NODE_VERSION]$FROM_PARAM"
+    workingDirectory: ${{ parameters.projectDir }}
+    displayName: 'Determine Node.js version from template param'
+- ${{ if eq(parameters.nodeVersion, 'none') }}:
+  - bash: |
+      echo "current folder: $(pwd)"
+      FROM_SOURCE=$(cat .node-version || cat .nvmrc)
+      ls .node-version && echo ".node-version found, value: '$(cat .node-version)'" || echo ".node-version not found" 
+      ls .nvmrc && echo ".nvmrc found, value: '$(cat .nvmrc)'" || echo ".nvmrc not found" 
+      echo "set FROM_SOURCE='$FROM_SOURCE'"
+      echo "##vso[task.setvariable variable=NODE_VERSION]$FROM_SOURCE"
+    workingDirectory: ${{ parameters.projectDir }} 
+    displayName: 'Determine Node.js version from source'
+
+- task: UseNode@1
+  inputs:
+    version: $(NODE_VERSION)
+  displayName: 'Set up Node.js'
+
+- bash: |
+    echo "current folder: $(pwd)"
+    yarn install
+  workingDirectory: ${{ parameters.projectDir }}    
+  displayName: 'Install node modules'

.devops/local-templates/setup-env.yaml

@@ -0,0 +1,19 @@
+# Azure DevOps pipeline template used to build bundle.
+parameters:
+  - name: 'env'
+    type: string
+    default: ''
+
+  - name: 'version'
+    type: string
+    default: ''
+
+steps:
+- bash: |
+    chmod +x env.sh
+    env -i \
+      RTP_FE_ENV=${{ parameters.env }} \
+      RTP_FE_VERSION=${{ parameters.version }} \
+      bash env.sh
+
+  displayName: 'Populate environment file'

.env

@@ -0,0 +1,2 @@
+ENV="LOCAL"
+VERSION="test"

.gitignore

@@ -21,3 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.parcel-cache
+dist
+build

.nvmrc

@@ -0,0 +1 @@
+v18.20.2

env.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+# Removing existing env file
+rm .env
+
+# saving variables environment prefix in a variable
+varprefix="RTP_FE_"
+
+# Print relevant environment variables
+env | grep -i $varprefix
+
+# Recreate config file and assignment
+
+# Loop on environment variables prefixed with
+# RTP_FE_ and add them to .env file
+for rtp_fe_var in $(env | grep RTP_FE_); do
+    varname=$(printf '%s\n' "${rtp_fe_var#$varprefix}" | sed -e 's/=.*//')
+    varvalue=$(printf '%s\n' "$rtp_fe_var" | sed -e 's/^[^=]*=//')
+
+    echo "$varname=\"$varvalue\"" >> .env
+done

package.json

@@ -8,12 +8,12 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "BUILD_PATH='./dist' react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },