Trouble deploying full-stack Angular and Node.js app on Heroku

Backend
1

I’m struggling to get my full-stack app working on Heroku. The app has an Angular frontend and a Node.js backend. When I deploy it, the build process seems fine, but I think only the backend is running.

When I open the app, all I see is:

{"message":"Invalid Token"}

I’ve tried following various tutorials for deploying Angular and Node.js apps on Heroku, but no luck so far. My package.json includes scripts for Heroku deployment and all the necessary dependencies. The server.js file sets up the Express app with middleware, JWT auth, and API routes.

My Procfile just has:

web: node server.js

I’m not sure what I’m missing. Any ideas on how to get both the frontend and backend working together on Heroku? I can share more details about my setup if needed.

2

I’ve encountered similar issues when deploying full-stack applications to Heroku. One crucial step often overlooked is configuring the Node.js server to serve the Angular build files. In your server.js, ensure you have something like:

app.use(express.static(__dirname + '/dist/your-angular-app-name'));

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname + '/dist/your-angular-app-name/index.html'));
});

This directs Express to serve your Angular files. Also, verify your build process in package.json includes building the Angular app before starting the server. A typical script might look like:

"heroku-postbuild": "ng build --prod"

Lastly, double-check your JWT implementation. The error suggests an authentication issue, which could be due to mismatched secret keys or incorrect token validation on the server side.

3

yo, sounds like a pain! have u tried setting up a separate buildpack for the angular part? sometimes heroku needs that extra push. also, check ur env variables - heroku might not have the same setup as ur local. and that token error… maybe ur auth endpoint is actin up? good luck man!

4

hmm, interesting issue! have u checked if ur angular build files r being served correctly by the node server? maybe try adding a console.log in ur server.js to see if it’s actually serving the angular files? also, that error message looks auth-related… could there be a problem with ur JWT setup on heroku? just spitballing ideas here! :thinking: