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 55d22d2.

* 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

@@ -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 }}/*"

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;