Deploy on Heroku with express server

quangtn1893

Hey guys, this is my first time posting on here.

So basically, I’ve created an app using Quasar with Express.js for the server side ( i have a folder within the quasar app called “server” that has its own package.json and dependencies). I am trying to host my app on Heroku. In order to do that, I’ve ran “quasar build” and it created a “dist” folder in order for me to push on to Heroku. I’ve also followed this guide in order to help me host my app on Heroku. I think my problem is that, inside the “dist” folder, it doesn’t know that I have all the server side code in my “server” folder so when I actually try to run “npm start” in my “dist” folder and load the app, it cannot make any of the api calls that I’ve created on my server side. Any ideas as to how I can include my server side code? Thanks

benoitranque

Anything in the statics folder will be kept as is
You probably should do things the other way around, and keep thing separate. Here is the folder structure I would use:

<project folder>
    server
        public // public folder. The content of the dist folder are copied here
            index.html
            // other dist files
    client // quasar folder
        src
        dist
        build
        config

quangtn1893

@benoitranque
Thanks, I think it is a good idea to separate my code and creating a client folder.
I’m still confused as to how this will help me. Is the public folder created when i run “npm build” in my server dir ? Thanks for you reply btw!

benoitranque

I’m not sure what code you are using on the backend. No, the public folder is not created on npm build in server dir. Rather you run quasar build in client folder, then manually copy the content of client/dist to server/public. Your public folder contains the only files your server serves as static. I’m not sure if heroku has a convention for this.

quangtn1893

Oh I see. I am using express.js for my backend / server side. If you know of any solution to do it using express and let me know, that’d be great. If not, then thanks for your insights!

benoitranque

In that case in your server file (wherever your server file is:

app.use('/', express.static('public'))

This supposes this is being run from the server folder, and basically we are saying “serve the public folder as root”.