From 81e155e463becaf84f3e86363cb9f2cdfa42b929 Mon Sep 17 00:00:00 2001 From: Johan Castiblanco Date: Mon, 22 Apr 2024 17:13:17 -0500 Subject: [PATCH 1/5] 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. --- webpack.prod.config.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/webpack.prod.config.js b/webpack.prod.config.js index a8a9ae96..04d06ab9 100644 --- a/webpack.prod.config.js +++ b/webpack.prod.config.js @@ -1,3 +1,5 @@ +const fs = require('fs'); +const dotenv = require('dotenv'); const path = require('path'); const { createConfig } = require('@edx/frontend-build'); @@ -10,4 +12,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] = envConfig[k]; +}); + module.exports = config; From 12cddcd5a93e20fd9820a9482252ef9ee1adfba8 Mon Sep 17 00:00:00 2001 From: Johan Castiblanco Date: Mon, 22 Apr 2024 17:16:49 -0500 Subject: [PATCH 2/5] feat: add deploy mfe-s3-action --- .github/workflows/deploy-mfe-s3.yml | 106 ++++++++++++++++++++++++++++ 1 file changed, 106 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 }}/*" From 55d22d2dfb7adc46ad0f4fc4b27a1c51ec00719a Mon Sep 17 00:00:00 2001 From: Johan Castiblanco Date: Mon, 22 Apr 2024 18:56:21 -0500 Subject: [PATCH 3/5] fix!: remove mfe_config to use the action env --- .env | 2 -- 1 file changed, 2 deletions(-) diff --git a/.env b/.env index 1c57b441..d57909ef 100644 --- a/.env +++ b/.env @@ -30,5 +30,3 @@ ENTERPRISE_MARKETING_URL='' ENTERPRISE_MARKETING_UTM_SOURCE='' ENTERPRISE_MARKETING_UTM_CAMPAIGN='' ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='' -APP_ID='' -MFE_CONFIG_API_URL='' From f3834af489a8e060657402e1e455782e388d1a21 Mon Sep 17 00:00:00 2001 From: Johan Castiblanco Date: Thu, 2 May 2024 17:15:39 -0500 Subject: [PATCH 4/5] Revert "fix!: remove mfe_config to use the action env" This reverts commit 55d22d2dfb7adc46ad0f4fc4b27a1c51ec00719a. --- .env | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.env b/.env index d57909ef..1c57b441 100644 --- a/.env +++ b/.env @@ -30,3 +30,5 @@ ENTERPRISE_MARKETING_URL='' ENTERPRISE_MARKETING_UTM_SOURCE='' ENTERPRISE_MARKETING_UTM_CAMPAIGN='' ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='' +APP_ID='' +MFE_CONFIG_API_URL='' From b04ab365954ef7408f3416a77ce09a36d7b7d904 Mon Sep 17 00:00:00 2001 From: Johan Castiblanco Date: Thu, 2 May 2024 18:53:31 -0500 Subject: [PATCH 5/5] 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. --- webpack.prod.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/webpack.prod.config.js b/webpack.prod.config.js index 04d06ab9..96ae8c89 100644 --- a/webpack.prod.config.js +++ b/webpack.prod.config.js @@ -1,6 +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'); @@ -21,7 +22,7 @@ config.module.rules[0].exclude = /node_modules\/(?!(query-string|split-on-first| // 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] = envConfig[k]; + process.env[k] = originalEnvConfig[k] ?? envConfig[k]; }); module.exports = config;