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

Well, I came across the same problem. We can give Heroku a script to run after it install dependencies heroku-postbuild .

My Repository Folder Structure

App
|
+-- client               (folder)  (root)
|   |
|   +--src               (folder)
|   +--public            (folder)
|   +--package.json      (file)
|   +--package-lock.json (file)
|
+-- server               (folder)  (root)
|   |
|   +--....              (folders)
|   +--....              (folders)
|   +--index.js          (Server Main File)
|   +--package.json      (file)
|   +--package-lock.json (file)
|
+-- package.json         (Dummy package JSON for detection of heroku)

My Git Hub Repo

I have added the package.json to Root folder with the following code.

{
    "name": "rollcall-rooms",
    "version": "1.0.0",
    "main": "",
    "scripts": {
        "start": "npm start --prefix server",
        "install-client": "cd client && npm install && npm run build && cd ..",
        "install-server": "cd server && npm install && cd .. ",
        "heroku-postbuild": "npm run install-client && npm run install-server"
    }
}

Deployment Process In Heroku

• Clones your repo.
• Detects your package.json in the root folder and install all the node dependencies.
• Now it will run the script heroku-postbuild . TUDUM . You can give your own magic here.

Answer 2

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 3

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)

Answer 4

I think Mark Brought up a good repo, but I wanted to emphasize how Heroku works. As Heroku documentation said "Heroku Node.js support will only be applied when the application has a package.json file in the root directory."

What should I do then?

When deploying both a client and server code together, you would want to put the server's code at the root of the folder and continue to keep the client's code in a separate folder.

Example of a React and Express Application folder structure :

App
|
+-- client               (folder)  (root)
|   |
|   +--node_modules      (folder)
|   +--src               (folder)
|   +--public            (folder)
|   +--package.json      (file)
|   +--package-lock.json (file)
|         
+-- node_modules         (folder)  (root)       
+-- index.js             (file)    (root)
+-- package.json         (file)    (root)
+-- package-lock.json    (file)    (root)

As you can see, the server code is all in the root folder while the react application is kept in the client folder. From here, you need to make sure that you set up the correct script for your server package.json.

Remember that the server's package.json is instruction for Heroku on how to start your application.

This is what a proper script would look like in the root server's package.json

"scripts": {
    "start": "node index.js",
    "heroku-postbuild": "cd client && npm install && npm run build"
  } 

Answer 5

I had the same problem. I had my app structure divided into an "api" repo built with express-generator and a "client" repo built with create-react-app. I ended up having to scrap my whole api repo and rewrite it as a single file in the root directory named index.js that houses all the express code and has its own package.json. I followed this tutorial: https://medium.com/@chloechong.us/how-to-deploy-a-create-react-app-with-an-express-backend-to-heroku-32decfee6d18 . I was then able to host it all on heroku in one app. you can keep them seperate but that seemed too complicated for me and then you would have to host them in two different places and possibly need Cross origin resource sharing. My New file structure looks alot like the example in Henry Lis' post