I am following Ben Awad's wonderful tutorial to build a fullstack app using Next.js, Express, Typescript, and GraphQL. Everything works smoothly locally, but I have run into a barrage of issues trying to deploy to Heroku. I would really like to deploy both server and client to Heroku as one app, and have Express serve the frontend files as well as be the backend.
monorepo
- web
- package.json
- server
- package.json
package.json
To my understanding, this is possible using Next's custom server option, which I have integrated in my server.js file. My problem is when deploying to Heroku, it doesn't detect React as a dependency for the backend so while the deploy succeeds, the app crashes when I try to access it in the browser. I have tried a few things to resolve this issue - having two copies of React in frontend and backend, respectively, only leads to more problems (understandably so). I have tried keeping one copy and using npm link to point to the module, but it only works locally. I've tried changing the webpack config as well but it doesn't seem to register. I tried defining the custom server as a util in the frontend and import it in server.js, but the import is always undefined, which makes sense so I moved it back.
I'm still new and have many misconceptions about how Next.js works, especially when coupled with a custom server, so I might be doing something fundamentally wrong. Is there anything I'm missing, or is it better to split the app into two Heroku apps and push one subtree into each? The source code can be found here, but I will be probably rolling back because it has become very messy.
I know there are other ways to do this I just don't want to give up quite yet.