From 246cf4d3c665541928fb9ed4b70c488e3a9d33ed Mon Sep 17 00:00:00 2001 From: gbatt Date: Fri, 4 Nov 2022 23:38:44 +0000 Subject: [PATCH 1/3] build errors fixed --- deployment/build-s3-dist.sh | 8 ++++- source/website/package.json | 70 ++++++++++++++++++------------------- 2 files changed, 42 insertions(+), 36 deletions(-) diff --git a/deployment/build-s3-dist.sh b/deployment/build-s3-dist.sh index 25336e3..c6c3336 100755 --- a/deployment/build-s3-dist.sh +++ b/deployment/build-s3-dist.sh @@ -167,7 +167,7 @@ regional_dist_dir="$build_dir/regional-s3-assets" echo "------------------------------------------------------------------------------" echo "Creating a temporary Python virtualenv for this script" echo "------------------------------------------------------------------------------" -python -c "import os; print (os.getenv('VIRTUAL_ENV'))" | grep -q None +python3 -c "import os; print (os.getenv('VIRTUAL_ENV'))" | grep -q None if [ $? -ne 0 ]; then echo "ERROR: Do not run this script inside Virtualenv. Type \`deactivate\` and run again."; exit 1; @@ -274,6 +274,12 @@ echo "Building Vue.js website" cd "$source_dir/website/" || exit 1 echo "Installing node dependencies" npm install + +# BUG 352 WORKAROUND +mkdir -p node_modules/videojs-hotkeys/build +cp node_modules/videojs-hotkeys/videojs.hotkeys.* node_modules/videojs-hotkeys/build/ +# BUG 352 WORKAROUND + echo "Compiling the vue app" npm run build echo "Finished building website" diff --git a/source/website/package.json b/source/website/package.json index 632a495..1f9728e 100644 --- a/source/website/package.json +++ b/source/website/package.json @@ -6,45 +6,45 @@ "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint --no-fix", - "deploy": "aws s3 sync --acl public-read --profile mie --delete dist/ s3://[your_website_bucket]" + "deploy": "aws s3 sync --acl public-read --delete dist/ s3://[your_website_bucket]" }, "dependencies": { - "aws-amplify": "^4.3.2", - "aws-amplify-vue": "^2.1.5", - "axios": "^0.23.0", - "bootstrap": "^4.5.3", - "bootstrap-vue": "^2.21.2", - "chart.js": "^2.9.4", - "diff": "^5.0.0", - "dropzone": "^5.9.3", - "jquery": "^3.6.0", - "jwt-decode": "^3.1.2", - "latest-version": "^6.0.0", - "lodash": "^4.17.21", - "number-to-words": "^1.2.4", - "register-service-worker": "^1.7.2", - "video.js": "^7.15.4", - "videojs-flash": "^2.2.1", - "videojs-hotkeys": "^0.2.27", - "videojs-markers": "^1.0.1", - "vue": "^2.6.14", - "vue-highlightjs": "^1.3.3", - "vue-router": "^3.5.2", - "vuex": "^3.6.2", - "vuex-persistedstate": "^4.1.0", - "wavesurfer.js": "^5.2.0" + "aws-amplify": "4.3.2", + "aws-amplify-vue": "2.1.5", + "axios": "0.23.0", + "bootstrap": "4.5.3", + "bootstrap-vue": "2.21.2", + "chart.js": "2.9.4", + "diff": "5.0.0", + "dropzone": "5.9.3", + "jquery": "3.6.0", + "jwt-decode": "3.1.2", + "latest-version": "6.0.0", + "lodash": "4.17.21", + "number-to-words": "1.2.4", + "register-service-worker": "1.7.2", + "video.js": "7.15.4", + "videojs-flash": "2.2.1", + "videojs-hotkeys": "0.2.27", + "videojs-markers": "1.0.1", + "vue": "2.6.14", + "vue-highlightjs": "1.3.3", + "vue-router": "3.5.2", + "vuex": "3.6.2", + "vuex-persistedstate": "4.1.0", + "wavesurfer.js": "5.2.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "^3.12.1", - "@vue/cli-plugin-eslint": "^3.12.1", - "@vue/cli-plugin-pwa": "^3.12.1", - "@vue/cli-service": "^3.12.1", - "babel-eslint": "^10.1.0", - "eslint": "^6.8.0", - "eslint-plugin-vue": "^7.5.0", - "npm-check": "^5.9.2", - "vue-template-compiler": "^2.6.14", - "webpack-subresource-integrity": "^1.5.2" + "@vue/cli-plugin-babel": "3.12.1", + "@vue/cli-plugin-eslint": "3.12.1", + "@vue/cli-plugin-pwa": "3.12.1", + "@vue/cli-service": "3.12.1", + "babel-eslint": "10.1.0", + "eslint": "6.8.0", + "eslint-plugin-vue": "7.5.0", + "npm-check": "5.9.2", + "vue-template-compiler": "2.6.14", + "webpack-subresource-integrity": "1.5.2" }, "eslintConfig": { "root": false, From 51722b8e77aa291ef7dec042d9baaf20f3f9f5a6 Mon Sep 17 00:00:00 2001 From: gbatt Date: Fri, 4 Nov 2022 23:38:54 +0000 Subject: [PATCH 2/3] documentation updates --- README.md | 29 +++++++++++++++++++++++++++++ source/website/vue.config.js | 2 +- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7220e88..b345e86 100644 --- a/README.md +++ b/README.md @@ -255,6 +255,35 @@ Click Submit to save the new policy. After your domain is finished updating, cli Now, you can use Kibana to validate that your operator's data is present in OpenSearch, and thereby able to be surfaced in the user interface. You can validate data from new operators by running a workflow where said operator is the only enabled operator, then searching for the asset_id produced by that workflow in Kibana. +## Modifying the Front-End Application + +### Local Development + +To enable local development, after you have deployed the solution, do the following: +- in `/source/website/vue.config.js` on [L25](https://github.com/aws-solutions/content-localization-on-aws/blob/development/source/website/vue.config.js#L25) set the value of `enabled` to `false`. For production usage, make sure this value is set to `true`. This is a security feature that enables browsers to verify that files they fetch (for example, from a CDN) are delivered without unexpected manipulation (Subresource Integrity, SRI). Unfortunately, this feature will prevent hot-reloading in your local environment. Learn more [here](https://www.npmjs.com/package/webpack-subresource-integrity) +- from the root of this repo run the following command to download your live runtime configurations to your local environment +```bash +SOLUTION_URL= +curl $SOLUTION_URL > source/website/public/runtimeConfig.json +``` +- install dependencies +```bash +cd source/website +npm i +``` +- start development server +```bash +npm run serve +``` +- you can authenticate with the credentials you have received at installation time + +### Front-end Deployment +- change `source/website/package.json` [L9](https://github.com/aws-solutions/content-localization-on-aws/blob/v2.0.0/source/website/package.json#L9) to include your website deployment S3 bucket +- deploy to that S3 bucket by running +```bash +cd source/website +npm run deploy +``` # User Authentication diff --git a/source/website/vue.config.js b/source/website/vue.config.js index 94c6caf..441a546 100644 --- a/source/website/vue.config.js +++ b/source/website/vue.config.js @@ -22,7 +22,7 @@ module.exports = { plugins: [ new SriPlugin({ hashFuncNames: ['sha256', 'sha384'], - enabled: true + enabled: true // set to false for local development }), ], performance: { From ddc7cac2838e857ed88f3c51cb915d1caaf045a4 Mon Sep 17 00:00:00 2001 From: gbatt Date: Fri, 4 Nov 2022 23:41:58 +0000 Subject: [PATCH 3/3] removing local workaround --- deployment/build-s3-dist.sh | 5 ----- 1 file changed, 5 deletions(-) diff --git a/deployment/build-s3-dist.sh b/deployment/build-s3-dist.sh index c6c3336..647444c 100755 --- a/deployment/build-s3-dist.sh +++ b/deployment/build-s3-dist.sh @@ -275,11 +275,6 @@ cd "$source_dir/website/" || exit 1 echo "Installing node dependencies" npm install -# BUG 352 WORKAROUND -mkdir -p node_modules/videojs-hotkeys/build -cp node_modules/videojs-hotkeys/videojs.hotkeys.* node_modules/videojs-hotkeys/build/ -# BUG 352 WORKAROUND - echo "Compiling the vue app" npm run build echo "Finished building website"