Bug/352 #352 Vue Frontend won't build for prod and local

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=<something like https://dab0xxxxxxxx.cloudfront.net>
+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
 

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"

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,

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: {