0

I am trying to deploy my flask/vue app to heroku but I am having difficulties.
I have mainly followed these instructions (https://medium.com/the-andela-way/deploying-a-python-flask-app-to-heroku-41250bda27d0) and I tried following this Heroku deployment confusion: Vue.js frontend with Flask backend but I fell short.

Procedure I followed
 I started in the root directory My_app_folder of my test.py file and activated a virtual environment "my-venv"
Then:

  1. logged in to heroku
  2. installed gunicorn
  3. ran pip freeze > requirements.txt
  4. Created procfile; web: npm install; npm run dev; gunicorn test:app
  5. Created app "garemo1" using: "heroku create garemo1-api-heroku"
  6. ran: git add .
  7. ran: git commit -m "committed"
  8. ran: git push heroku master

I also created and ran the following buildpacks:

 heroku buildpacks:add --index 1 heroku/nodejs

Then added the following line in "scripts" in package.json:

"heroku-prebuild": "npm install",
"heroku-postbuild": "webpack --config webpack.dev.js"

This is my package.json 

{
  "name": "sample-proj",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "heroku-prebuild": "npm install",
    "heroku-postbuild": "webpack --config webpack.dev.js"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/vue-fontawesome": "^0.1.9",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "bootstrap-vue": "^2.6.1",
    "core-js": "^3.6.4",
    "js-cookie": "^2.2.1",
    "require-vuejs": "^1.1.3",
    "v-slider": "^1.0.0",
    "vue": "^2.6.11",
    "vue-range-component": "^1.0.3",
    "vue-range-slider": "^0.6.0",
    "vue-router": "^3.1.5",
    "vue-simple-alert": "^1.1.1",
    "vuex": "^3.3.0",
    "vuex-persist": "^2.2.0",
    "vuex-persistedstate": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "node-sass": "^4.13.1",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": false,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

In my test.py script I have:

 app = Flask(__name__, static_folder = "static", template_folder = "Templates/vue_template")

This is the structure of my app

My_app_folder
|   package.json
|   Procfile
|   requirements.txt
|   test.py
+---frontend
|   \---sample-proj
|       |   .gitignore
|       |   babel.config.js
|       |   package-lock.json
|       |   package.json
|       |   README.md
|       |   vue.config.js
|       \---public
|       |   favicon.ico
|       |   index.html

|       \---node_modules

|       \---src
|       |   App.vue
|       |   main.js
|       |   router.js          
|       |   \---assets
|       |   |    logo.png
|       |   \---components
|       |   |   AddProduct.vue
|       |   |   category.vue
|       |   |   HelloWorld.vue
|       |   |   susScore.vue
|       |   \---Views
|       |   |   AddProductView.vue
|       |   |   createlist.vue
|       |   |   grocerylist.vue
|       |   |   loginpage.vue
+---static
|       \---css
|       \---img
|       \---js
+---Templates
|       \---vue_template
|       |   \---favicon.ico
|       |   \---index.html

I have package.json in two places because I got the following error message and placing package.json near test.py solved the error:

The 'heroku/nodejs' buildpack is set on this application, but was unable to detect a Node.js codebase.
A Node.js app on Heroku requires a 'package.json' at the root of the directory structure.")

These are the error messages I get from running "heroku logs --tail" after following the above procedure.

26T15:28:53.000000+00:00 app[api]: Build started by user 
2020-06-26T15:30:45.878824+00:00 app[api]: Deploy 9c824365 by user 
2020-06-26T15:30:45.878824+00:00 app[api]: Release v14 created by user 
2020-06-26T15:30:46.655593+00:00 heroku[web.1]: State changed from down to starting
2020-06-26T15:30:59.195699+00:00 heroku[web.1]: Starting process with command `npm install; npm run dev; gunicorn test:app`
2020-06-26T15:31:08.000000+00:00 app[api]: Build succeeded
2020-06-26T15:31:08.495145+00:00 app[web.1]: npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
2020-06-26T15:31:08.495623+00:00 app[web.1]:
2020-06-26T15:31:08.707457+00:00 app[web.1]: audited 1421 packages in 7.272s
2020-06-26T15:31:09.938506+00:00 app[web.1]:
2020-06-26T15:31:09.938521+00:00 app[web.1]: 3 packages are looking for funding
2020-06-26T15:31:09.938522+00:00 app[web.1]: run `npm fund` for details
2020-06-26T15:31:09.938522+00:00 app[web.1]:
2020-06-26T15:31:09.939188+00:00 app[web.1]: found 0 vulnerabilities
2020-06-26T15:31:09.939189+00:00 app[web.1]:
2020-06-26T15:31:11.091549+00:00 app[web.1]: npm ERR! missing script: dev
2020-06-26T15:31:11.151505+00:00 app[web.1]:
2020-06-26T15:31:11.151820+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2020-06-26T15:31:11.151997+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2020-06-26T15_31_11_092Z-debug.log
2020-06-26T15:31:11.450019+00:00 app[web.1]: [2020-06-26 15:31:11 +0000] [34] [INFO] Starting gunicorn 20.0.4
2020-06-26T15:31:11.450577+00:00 app[web.1]: [2020-06-26 15:31:11 +0000] [34] [INFO] Listening at: http://0.0.0.0:19276 (34)
2020-06-26T15:31:11.450696+00:00 app[web.1]: [2020-06-26 15:31:11 +0000] [34] [INFO] Using worker: sync
2020-06-26T15:31:11.454931+00:00 app[web.1]: [2020-06-26 15:31:11 +0000] [37] [INFO] Booting worker with pid: 37
2020-06-26T15:31:11.983153+00:00 heroku[web.1]: State changed from starting to up
2020-06-26T15:32:38.550577+00:00 app[web.1]: 10.29.86.227 - - [26/Jun/2020:15:32:38 +0000] "GET / HTTP/1.1" 200 1065 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36"
2020-06-26T15:32:38.557399+00:00 heroku[router]: at=info method=GET path="/" host=garemo1-api-heroku.herokuapp.com request_id=0f61456b-6fb1-47d9-9e5d-190c94ba4a80 fwd="94.137.125.198" dyno=web.1 connect=0ms service=12ms status=200 bytes=1227 protocol=https
2020-06-26T15:32:38.692120+00:00 app[web.1]: 10.29.86.227 - - [26/Jun/2020:15:32:38 +0000] "GET /static/css/app.37905c57.css HTTP/1.1" 404 232 "https://garemo1-api-heroku.herokuapp.com/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36"
2020-06-26T15:32:38.694490+00:00 app[web.1]: 10.33.250.117 - - [26/Jun/2020:15:32:38 +0000] "GET /static/css/chunk-vendors.32e65282.css HTTP/1.1" 404 232 "https://garemo1-api-heroku.herokuapp.com/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36"
2020-06-26T15:32:38.698935+00:00 heroku[router]: at=info method=GET path="/static/css/app.37905c57.css" host=garemo1-api-heroku.herokuapp.com request_id=c8f8e2ee-75c5-4d15-910b-256b65f83d13 fwd="94.137.125.198" dyno=web.1 connect=0ms service=2ms status=404 bytes=400 protocol=https
2020-06-26T15:32:38.709886+00:00 heroku[router]: at=info method=GET path="/static/css/chunk-vendors.32e65282.css" host=garemo1-api-heroku.herokuapp.com request_id=b8657054-8e04-44bf-a3c2-e2e8af7ee15e fwd="94.137.125.198" dyno=web.1 connect=0ms service=1ms status=404 bytes=400 protocol=https
2020-06-26T15:32:38.807810+00:00 app[web.1]: 10.29.86.227 - - [26/Jun/2020:15:32:38 +0000] "GET /static/js/app.765edbcb.js HTTP/1.1" 404 232 "https://garemo1-api-heroku.herokuapp.com/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36"
2020-06-26T15:32:38.811269+00:00 app[web.1]: 10.33.250.117 - - [26/Jun/2020:15:32:38 +0000] "GET /static/js/chunk-vendors.b338db17.js HTTP/1.1" 404 232 "https://garemo1-api-heroku.herokuapp.com/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36"
2020-06-26T15:32:38.814797+00:00 heroku[router]: at=info method=GET path="/static/js/app.765edbcb.js" host=garemo1-api-heroku.herokuapp.com request_id=da71bbcc-d4fa-462a-b1de-b2064b58170d fwd="94.137.125.198" dyno=web.1 connect=0ms service=2ms status=404 bytes=400 protocol=https
2020-06-26T15:32:38.820860+00:00 heroku[router]: at=info method=GET path="/static/js/chunk-vendors.b338db17.js" host=garemo1-api-heroku.herokuapp.com request_id=d3a3b311-fe1c-4b8b-bc28-44fc0964de4a fwd="94.137.125.198" dyno=web.1 connect=0ms service=2ms status=404 bytes=400 protocol=https
2020-06-26T15:32:38.931285+00:00 app[web.1]: 10.33.250.117 - - [26/Jun/2020:15:32:38 +0000] "GET /static/js/app.765edbcb.js HTTP/1.1" 404 232 "https://garemo1-api-heroku.herokuapp.com/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36"
2020-06-26T15:32:38.940610+00:00 heroku[router]: at=info method=GET path="/static/js/app.765edbcb.js" host=garemo1-api-heroku.herokuapp.com request_id=8c425e66-b016-4ba3-b310-77adafda192d fwd="94.137.125.198" dyno=web.1 connect=0ms service=2ms status=404 bytes=400 protocol=https
2020-06-26T15:44:34.354407+00:00 heroku[router]: at=info method=GET path="/static/css/app.37905c57.css" host=garemo1-api-heroku.herokuapp.com request_id=e990d878-4e51-4820-850b-63fb04c16441 fwd="94.137.125.198" dyno=web.1 connect=1ms service=2ms status=404 bytes=400 protocol=https
2020-06-26T15:44:34.345656+00:00 app[web.1]: 10.63.192.219 - - [26/Jun/2020:15:44:34 +0000] "GET /static/css/app.37905c57.css HTTP/1.1" 404 232 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36"
2020-06-26T16:21:19.035914+00:00 heroku[web.1]: Idling
2020-06-26T16:21:19.039332+00:00 heroku[web.1]: State changed from up to down
2020-06-26T16:21:20.166771+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2020-06-26T16:21:20.196557+00:00 app[web.1]: [2020-06-26 16:21:20 +0000] [34] [INFO] Handling signal: term
2020-06-26T16:21:20.255333+00:00 heroku[web.1]: Process exited with status 143

This is part of the error I get in the console after trying to deploy using the procedure above

https://garemo1-api-heroku.herokuapp.com/static/css/app.37905c57.css net::ERR_ABORTED 404 (NOT FOUND)

Question
How can I solve the errors so that I can deploy my app?

Improve this question
2
  • I think npm ERR! missing script: dev is triggered by npm run dev in the Procfile. Possibly change that to use something from the "scripts" object in your package.json, eg npm run serve. Commented Jun 27, 2020 at 0:20
  • Thanks,I tried changin npm run dev to npm run serve (and npm run build) in the Procfile but neither worked. Should I try to add something to the package,json file aswell? Commented Jun 27, 2020 at 7:39
Related questions
0
Unable to deploy Python Flask on Heroku
1
Flask Deploy on Heroku - Error R10
4
Error while deploying flask app to Heroku
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.