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.
Related
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.
I'm a building a web application with Next.js/React.js + Node.js.
I would like to deploy my application not separately but into one server(e.g. Heroku).
How could I do this and make it work?
Using package npm i -D concurrently you can run your both projects on same server.
Use this link fo reference
https://dev.to/numtostr/running-react-and-node-js-in-one-shot-with-concurrently-2oac
Never used next, but I had a similar problem last night and tried like 5 different things to no avail.
Found this today and walked thru his demo and got a better understanding of what's going on and was able to restructure my project to get it to work. This post walks thru how to have Express serve your React project using heroku-postbuild.
Other things that tripped me up: I needed two package.json files (one for Express and one for React) and I didn't have my express app directory set to find index.html
https://daveceddia.com/deploy-react-express-app-heroku/
so its my first time deploying an app, I have googled a lot and tried a lot but was not quite able to find the answer. I have a github repo https://github.com/JokubasTolocka/Movie_app which has both frontend and backend folders. During many tries, I have deployed a github page for frontend and everything works as long as I run the backend locally. Whenever I shut down my VScode the github deployments page returns 404 not found. How can I deploy my backend so that I can use this project in my portfolio? Any help would be MUCH appreciated!
I am also a beginner and was in the same situation, I still want to know how to deploy from the same repo.
I did a quick workaround for my case:
I separated both the into different repositories using git subtree command,
Check step-by-step instructions here:
Detach (move) subdirectory into separate Git repository
Any further help on this question will be appreciated.
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 am new to Heroku, and I want to set up my simple Node.js app through Heroku. I have tried following the Heroku docs for setting up node apps, and I have done everything it says to do. Unfortunately I have gotten stuck on the Foreman/Procfile section. I have created a Procfile like the tutorial says (saved as a .txt file), and have put it in the same directory as my source files. When I try to run Foreman, it says "Error: Procfile doesn't exist". It makes some sense, as Heroku doesn't know where my app directory is, but I want to understand how I can fix this. Thanks!
Do not save it as Procfile.txt save it only as Procfile (dot nothing)