Deploying node app to heroku with client and server in two separate folders

Question

I've done a bunch of research and I can't quite seem to wrap my head around this.

I've built an app. The client was built with Vue-cli and runs on port 8080 from a client folder, and the server from a separate server folder on port 8081. In essence, I have this:

client
    - package.json
    - node_modules
    - src
    - build
    - index.html

server
    - package.json
    - node_modules
    - app.js
    - auth.js

I'm unsure of how to resolve the folder structure so that I can deploy this to Heroku.

According to a bunch of research I've done and this answer (admittedly quite an old post), one suggestion is to combine the two, but how would I resolve the two package.json files that I have in each folder (client and server)? Do I merge them?

Another suggestion is to create two separate Heroku apps. I can then set my axios baseURL to app_name.herokuapp.com?

Which of the two is generally considered the ideal solution? I'm really stuck here...

Answer 1

As far as I know nowadays making two deploys is the most used solution for big projects evolving many devs, in one part your frontend with vue.js that will fetch the data from a remote api which is your backend and second deploy. Exactly, you will have to change your baseURL to app_name.herokuapp.com Also you will probably will have to enable CORS.

Also if you want to try new things I recommend you try surge for your front deployment ;) so easy and so fast!

Maybe you already know it but, Heroku sets it's own ports so you will need to create a .env file and assign it via ssh or manually in the Heroku dashboard.

Answer 2

This repo shows the setup of Node.js serving up a React frontend running on a single Heroku dyno: https://github.com/mars/heroku-cra-node

I was able to get one up and running using this as a guide. For cleanliness i modified my folder structure to be very similar to op's: client/ server/ package.json .gitignore .env (etc)