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

问题

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...

回答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.

回答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)

回答3:

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"
  }

来源：https://stackoverflow.com/questions/49019707/deploying-node-app-to-heroku-with-client-and-server-in-two-separate-folders

标签

javascript

node.js

express

heroku