I'm using Vue.js with vue-cli, and trying to get my webpack-bundled application functioning on the Google Cloud app engine so my back-end developer and I can work together more easily on integration. Neither of us has any prior experience with Google Cloud, and we are finding it intensely difficult to work with.
After uploading the project (which currently has no associated backend) to the App Engine, my index.html page would load, but Vue.js was not loading, and therefore obviously not routing any content. I tried a variety of things, including changing the .yaml file (no change), manually calling the index.js and main.js files (doesn't recognize Vue), and ensuring that all of my devDependencies were also regular dependencies.
Then I followed a tutorial built around React to use the Google Cloud SDK to deploy my app from my Terminal. With all of the devDependencies copied over to dependencies in my package.json, it successfully deployed... but when I open the page in the browser, it has a 502 Bad Gateway error, with the additional text "nginx".
from my package.json (again, this is from the vue-cli template, I did not configure this myself):
{
"name": "try-2",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "redheadedmandy <lily5lace@aol.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
},
"dependencies": {
"bootstrap": "^4.1.1",
"jquery": "^3.3.1",
"popper.js": "^1.14.3",
"vue": "^2.5.2",
"vue-event-calendar": "^1.5.2",
"vue-flatpickr-component": "^7.0.4",
"vue-google-autocomplete": "^1.1.0",
"vue-radial-progress": "^0.2.10",
"vue-resource": "^1.5.1",
"vue-router": "^3.0.1",
"vue-simple-suggest": "^1.7.2",
"vue2-hammer": "^1.0.6",
"vuetify": "^1.1.1",
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.0.2",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^22.0.4",
"jest-serializer-vue": "^0.3.0",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
From my app.yaml (the real backend will be in php, but this is what is being generated upon deployment):
env: flex
runtime: nodejs
Any clues as to what the issue might be? I understand that a 502 error indicates that something has gone wrong server-side, but the only guess I have is that the lack of a backend environment is breaking the frontend.
Edit: The logs are showing two errors, the latter of which is repeated for every single .vue component file.
Module build failed: Error: Couldn't find preset "es2015" relative to directory
and
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin
