So I've been at this for two days now and can't figure it out. I'm trying to deploy a Vue front end and express back end app to Heroku.

In my root folder I have a "public" folder which contains the front end and "server" folder for the back end.

In the root directory's package.json, the start script is

    "start": "npm run pull && start npm run f && start npm run b",
    "pull": "git pull",
    "f": "cd ./public && npm run serve",
    "b": "cd ./server && npm run dev"

This works perfectly fine for me to run locally, and even works with heroku locally as well using heroku local web but when I try to actually push to heroku using git push heroku main it doesn't even get past the git pull claiming:

fatal: not a git repository (or any parent up to mount point /)

I've tried simply getting rid of the git pull, but that just leads down a rabbit hole of other errors I've been trying to figure out for days and I'm hoping I'm just being dumb and missing something obvious. Any help would be greatly appreciated.

I'm going to try and list some things I've tried here:

1. Setting the heroku remote repository heroku git:remote -a heroku-name-here
   • Didn't change anything, pretty sure I already have this correct
2. Removing the git pull
   • Led to heroku not recognizing "start" sh: 1: start: not found
3. Removing the 'start' after git pull
   • Led to vue-cli-service not being found
4. Literally separating the back and front end into 2 separate repositories and 2 separate heroku things
   • This seemed to get the back end functioning, but the front end didn't seem to work. Unfortunately I don't remember exactly why but can try again if it would be helpful
5. All 3 comments from here: How to solve vue-cli-service: not found proplem on heroku?

CodePudding user response：

I kind of fixed it kind of. Here's what I did

So I went back to the approach of kind of keeping them separate. I started by getting the server up and running.

1. In Heroku, I added the buildpack: https://github.com/timanovsky/subdir-heroku-buildpack.git BEFORE the heroku/nodejs buildpack to allow me to use a subdirectory rather than the whole repo
2. In Heroku settings, I added the config var PROJECT_PATH with the value server - In this case, server was the sub-directory immediately under my root
3. In vue.config.js of my front end, I changed the outputted build path to go INTO my server folder, using outputDir: path.resolve(__dirname, "../server/front-end")
4. In mongodb, under "Security" in "Network Access" which can be found towards the left in the navigation, I added the IP address 0.0.0.0/0 which I believe basically lets anyone access it. This might not be the most secure but it works.
5. Finally, this basically merged all my routes together which causes chaos because if I had a front end route /test-route and a back-end route /test-route it would like break which made sense. So I simply changed my index.js back end routes to go to /api/ instead of / so kind of like this

const mutators = require("./routes/mutators");
app.use(router.use("/api/", mutators));

Then at the end of my index.js file, I added

app.route("/*").get(function(req, res) {
    res.sendFile(path.join(__dirname   "/front-end/index.html"));
});

so that front end routes like /test-route would then actually go to the site.