From f27a9535e99167c1cf7e9509040632d4e756538c Mon Sep 17 00:00:00 2001
From: Johan Seto Kaiba <51926076+johanseto@users.noreply.github.com>
Date: Thu, 9 May 2024 14:18:48 -0500
Subject: [PATCH] feat: deploy mfe s3 action (#3)

* fix: env vars reading for built

cherry-pick of other mfe.
this is like a cherrypick of this pr in learning.
https://github.com/nelc/frontend-app-learning/pull/27/files
This is an error generated of the load of paragonTheme plugin.

* feat: add deploy mfe-s3-action

* fix!: remove mfe_config to use the  action env

* Revert "fix!: remove mfe_config to use the  action env"

This reverts commit 55d22d2dfb7adc46ad0f4fc4b27a1c51ec00719a.

* fix: dont override original env var of the process

With this change I store in a different var in memory the original environment vars.
This with the purpose of keep them and not override.
Dotenv dont override them and also with .env analysis this ones would not be override too.
---
 .github/workflows/deploy-mfe-s3.yml | 106 ++++++++++++++++++++++++++++
 webpack.prod.config.js              |  15 ++++
 2 files changed, 121 insertions(+)
 create mode 100644 .github/workflows/deploy-mfe-s3.yml

diff --git a/.github/workflows/deploy-mfe-s3.yml b/.github/workflows/deploy-mfe-s3.yml
new file mode 100644
index 00000000..7c24a794
--- /dev/null
+++ b/.github/workflows/deploy-mfe-s3.yml
@@ -0,0 +1,106 @@
+name: MFE S3 Bucket Deployment 🚀
+
+
+on:
+  push:
+    branches:
+      - open-release/palm.nelp
+      - open-rc/palm.nelp
+
+  pull_request:
+    branches:
+       - "**open-rc**"
+jobs:
+  build:
+    environment:
+      name: ${{ github.ref_name == 'open-release/palm.nelp' && 'prod' || 'stage' }}
+    runs-on: ubuntu-latest
+    steps:
+
+    - name: "Echo job  vars"
+      env:
+        JOB_VARS: ${{ toJson(vars) }}
+      run: echo "$JOB_VARS"
+
+    - name: checkout mfe repo
+      uses: actions/checkout@v3
+
+    - name: Use Node.js ${{ vars.NODE_VERSION }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ vars.NODE_VERSION }}
+
+    - name: Cache node modules
+      id: cache-npm
+      uses: actions/cache@v3
+      env:
+        cache-name: cache-node-modules
+      with:
+        # npm cache files are stored in `~/.npm` on Linux/macOS
+        path: ~/.npm
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-build-${{ env.cache-name }}-
+          ${{ runner.os }}-build-
+          ${{ runner.os }}-
+
+    - if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
+      name: List the state of node modules
+      continue-on-error: true
+      run: npm list
+
+    - name: npm Install
+      run: npm install
+
+    - name: npm Build  # check env variables of repo.
+      run: npm run build
+      env:
+        PUBLIC_PATH: ${{ vars.PUBLIC_PATH_CDN }}
+        APP_ID: ${{ vars.APP_ID }}
+        MFE_CONFIG_API_URL: ${{ vars.MFE_CONFIG_API_URL }}
+        ENABLE_NEW_RELIC: false
+        NODE_ENV: production
+
+    - name: print generated html of mfe
+      run: cat dist/index.html
+
+    - name: Share artifact inside workflow
+      uses: actions/upload-artifact@v3
+      with:
+        name: ${{ vars.APP_ID }}-dist-artifact
+        path: dist
+
+  deployment:
+    environment:
+      name: ${{ github.ref_name == 'open-release/palm.nelp' && 'prod' || 'stage' }}
+      url: ${{ vars.PUBLIC_PATH_CDN }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      # get build artifact
+      - name: Get artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: ${{ vars.APP_ID }}-dist-artifact
+
+      - name: "Echo job  vars"
+        env:
+          JOB_VARS: ${{ toJson(vars) }}
+        run: echo "$JOB_VARS"
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v2
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_DEFAULT_REGION }}
+
+      - name: Deploy to S3
+        run: |
+          aws s3 sync . $S3_BUCKET --delete
+        env:
+          S3_BUCKET: s3://${{ vars.BUCKET_NAME }}/${{ vars.APP_ID }}/
+
+      - name: Invalidate past cloudfront cache
+        run: |
+          aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID }} --paths "/${{ vars.APP_ID }}/*"
diff --git a/webpack.prod.config.js b/webpack.prod.config.js
index a8a9ae96..96ae8c89 100644
--- a/webpack.prod.config.js
+++ b/webpack.prod.config.js
@@ -1,4 +1,7 @@
+const fs = require('fs');
+const dotenv = require('dotenv');
 const path = require('path');
+const originalEnvConfig = { ...process.env }; //Store original process env vars
 const { createConfig } = require('@edx/frontend-build');
 
 const config = createConfig('webpack-prod');
@@ -10,4 +13,16 @@ config.resolve.modules = [
 
 config.module.rules[0].exclude = /node_modules\/(?!(query-string|split-on-first|strict-uri-encode|@edx))/;
 
+// The configuration is generated using the createConfig method from the frontend-build library,
+// this method preloads multiple files to generate the resulting configuration, including webpack.common.config.js,
+// https://github.com/nelc/frontend-build/blob/open-release/palm.nelp/config/webpack.common.config.js,
+// which includes ParagonWebpackPlugin. This plugin, in turn, retrieves its configuration from the .env.development file
+// https://github.com/nelc/frontend-build/blob/open-release/palm.nelp/lib/plugins/paragon-webpack-plugin/ParagonWebpackPlugin.js#L20-L22
+// Therefore, regardless of the configuration type, the plugin always utilizes data from .env.development.
+// The following code overrides this behavior in order to use the .env file.
+const envConfig = dotenv.parse(fs.readFileSync('.env'));
+Object.keys(envConfig).forEach(k => {
+  process.env[k] = originalEnvConfig[k] ?? envConfig[k];
+});
+
 module.exports = config;