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/deployment/build-s3-dist.sh b/deployment/build-s3-dist.sh index 25336e3..647444c 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,7 @@ echo "Building Vue.js website" cd "$source_dir/website/" || exit 1 echo "Installing node dependencies" npm install + 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, 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: {