Here is my directory structure
app
frontend
backend
I don't have a package.json file in the main directory but both the frontend and backend have package.json files.
The frontend is a fully functional NextJS app and the backend is an Express server handling api/data requests.
I have one repository for the entire app. My goal is to push this app in its current structure to Heroku, set up whatever environment variables I need, and have Heroku deal with the build details. I have yet to find any tutorials or any SO questions that target my instance specifically.
So far I just tried to push the whole repo but this is there error message I'm getting:
remote: Compressing source files... done.
remote: Building source:
remote:
remote: ! No default language could be detected for this app.
remote: HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
remote: See https://devcenter.heroku.com/articles/buildpacks
remote:
remote: ! Push failed
I'm assuming this is because there is no package.json file in the root directory to tell Heroku what to do. I don't have enough experience to know if this really is my problem or not. Unfortunately, I don't really know the direction I need to go here and I'm having a really hard time finding tutorials or any help when I search about this. I'm coming to understand the process and details a little more as I go along but I could definitely use a good explanation as to what I need to do, how I need to do it, and why I need to do it. I know I'm asking for a lot but anything helps. Thank you.
I would suggest restructuring the project so that it has a package.json in the root folder. A simple way to make it work is by letting the Express app serve the NextJS app.
I was having the same issue as you. I realized that deploying a NextJS app isn't as straight-forward as deploying a Create-React-App app. I ended up following the official recommendation of the NextJS team for deployment, which is to let Vercel serve it.
It was actually incredibly easy. I managed to deploy the NextJS app in a matter of minutes. Create a Vercel account, add a new app and deploy it.
The downside of this is that you will use Heroku for deploying your backend, and Vercel for deploying your frontend. But if you are using GitHub for example, Vercel will automatically re-deploy your NextJS app everytime you push to your main branch. So, in actuality you won't even have to do much in Vercel after deploying it the first time.
There are probably other ways and workarounds, but according to Vercel (who by the way are the creators of NextJS), deploying it with Vercel is the easiest way.
Related
I have made a full-stack app with react js and node js with express and MongoDB but I am having a little bit of difficulty deploying I first tried to deploy the front end but I was getting the invalid host header coming up when I tried to deploy in Heroku its been tested and works fine in the dev environment.
But also my application has two separate git repos one for the back and one for the front end and every tutorial I have seen to deploy they always have the client in the same folder as the server.
Can someone either tell me how to deploy or point me in the right direction on how to deploy.
What you have to do for React/Express/Node/MongoDB is,
build your frontend app first by using "npm run build". This will create a build folder under your app folder.
move your "build" folder to backend app folder.
update your backend app to use "app.use(express.static('build'))".
Then you can push your code to git and Heroku and try to deploy it.
There should be some tutorials available on Heroku website.
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.
Having a bit of an issue with Heroku. I've always uploaded in one directory, but this time I wanted my folder structure to be a bit more, well structured. The problem is I can't seem to upload to Heroku like this.
I have a directory containing a folder called "client" which contains my angular 9 application and I have a folder called "middle-tier" containing the node.js server application.
I can't figure out how to push this up and allow it to work. The node application serves the angular application.
Everything works locally I just have no idea how to push this up to Heroku servers.
Please see attached screenshots of the structure.
Below is the error message I'm getting. Which I tried to fix by running git init again in the root of the structure. And then running the command to have a node.js build pack. Which was to no avail this also did not work and produced the same problem.
I have tried to include as much detail as I can but if there is anything else I can provide please let me know. I've spent quite some time building my application and am quite eager to deploy it!
Thanks for your time guys!
In short, with multiple discussions with Heroku support line, at the moment it is impossible to upload a mono repo to a single Heroku instance.
I have developed a node.js application and it is working fine locally.
Now, after that I deployed the application in Heroku I am getting some HTTP 404 errors in the browser console.
My understanding is that the reason for this issue is caused by the node package.json modules. In fact, the outer package.json is installed successfully but the node modules mentioned in the client folder is not installed.
Q: Any idea about what is necessary to modify (or to do) to make the client node modules as installed?
The image below depicts my folder structure.
Each time you push your code to Heroku, Heroku will look for the package.json file in the ROOT of your project. Heroku will then install those dependencies.
In your case, because you have multiple package.json files, Heroku isn't seeing the ones nested in sub-folders of your project.
The best option you have is to list all dependencies in your top-level package.json file. You could also create your own Heroku Buildpack to customize the Heroku deployment procedure, but I strongly recommend AGAINST doing this (it will be a nightmare to maintain over time).
Another option in your case (which might be good depending on how large your team is) would be to move your client-side code into it's own Git project, and have that deployed separately to a static hosting provider like Amazon S3, or something similar. This would then let you deploy your backend project directly to Heroku, while not having to worry about any front-end logic at all.
I have a build process involving templating and file copying, which produces what I would like to deploy to Heroku.
But Heroku requires to push your source from a git repository.
What I currently see as my only option is to have a separate git repository, that only holds my build history.
My project is a NodeJS server application.
Is there a better approach?
Thanks.
I have create a grunt-init project template that simplifies the develop-build-deploy cycle of NodeJS server apps deployed on Heroku.
Here it is: https://github.com/nicroto/grunt-init-heroku
This will allow you to have a single repository for your server & client apps, AND do actual build work.
I am basically creating an ignored by git build dir, which I synch-up with your Heroku app. And of course scaffold the project with sample init, build and deploy scripts.
I hope this will be helpful to the community. :)