How to use q-uploader in Quasar app deployed on Heroku

[Mickey58]

I have recently deployed my Quasar app on Heroku. The app has a Quasar frontend that communicates through REST APIs with a Node backend. Both the frontend and the backend are deployed (separately) on Heroku. For the Quasar frontend, I followed the instructions on https://quasar.dev/quasar-cli/developing-spa/deploying#Deploying-with-Heroku, and added a simple Express server that runs my frontend.

Everything works fine on Heroku, with one exception. My Quasar app has also a file upload capability, using q-uploader. Prior to the deployment on Heroku, with both the frontend and the backend running on localhost, the server part for the q-uploader (named file-uploader.js, which receives the upload files and, so far, stored them in a sub-folder of my frontend directory structure, for easy later viewing through href links (to frontend URLs) in my Quasar app) was part of my backend code and was run as a separate Node process, along with my regular backend server. File upload works fine locally with that setup.

In order to get it to work on the described Heroku setup, I moved the file-uploader.js to my frontend code, since it has to access files in my frontend directory structure. As far as I understand things, this would not be possible on Heroku from the (separate) backend app.

In addition, I added in the “scripts:” section of my frontend package.json:

"start:" node server.js && node file-uploader.js

to (supposedly) launch both the simple Express server (server.js) serving my Quasar frontend and that file uploader, right after the frontend app build on Heroku. I have not been able to verify whether that part of it works successfully, since I’m still learning how to do that kind of diagnostics on Heroku.

My builds on Heroku are successful, and the complete app works successfully on Heroku, except for the file upload: When I try to upload a file from the Quasar frontend, the file upload hangs in the browser and times out after a minute or so (this is not the case if everything runs on localhost).

I’m struggling how to deal with that problem:

Is my current setup to combine the Express server and the file uploader in one Heroku frontend app the correct way to achieve what I want?

Or do I have to set up a separate Heroku app for the file uploader on Heroku? Would that separate app still be able to upload files that are easily accessible as hrefs from my Quasar frontend, without major changes to my Quasar code?

[Mickey58]

Additional info: I have verified through console logs that the Express servers.js is successfully started, while the file-uploader is not started through the above “start” script in package.json. This explains why the file uploads time out.

I’m not familiar with these start scripts - is the “&&” not supposed to execute both commands? Or is Heroku unable to run more than one Node module in a single Heroku app?

[Mickey58]

Isn’t there anyone out there who has experience with deploying a Quasar app on Heroku?

Meanwhile, I did some further reading, and I’m led to believe:

• Starting two Node processes in one Heroku dyno as I tried it with the start script above is probably not supported by Heroku…at least it ignores that “node file-uploader.js” after the “&&”

• There is another serious restriction with Heroku that I was unaware of: Heroku restarts each dyno once per day and wipes out all uploaded files - therefore file upload as I have implemented it for local deployment won’t work on Heroku.

• To deal with that, Heroku docs recommend to upload files to Amazon S3, not Heroku. So I will have to adapt my q-uploader code to upload to S3, and deal with file URLs from S3 to download files from there (currently those are simple frontend file system URLs used in simple href links). Alternatively, I could store them in my MongoDB backend database, but that seems to be even further away from my current setup.