Deploy a MERN app to heroku. Buildpack?

The above link is the MERN app that I’m trying to deploy heroku. I’ve create the app on heroku already but when I try to push it into the heroku app I get this error

Determining which buildpack to use for this app
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

I tried changing the build pack to node.js but THEN it says that while the buildpack has been detected, it can’t find the package.json. But the package.json is there!

Do I use a different buildpack than node.js?

It’s been a while since I deployed anything to Heroku so I can’t offer specifics.

Taking a look at your github, it looks like your repo has just 2 folders, a client and server folder from root. This might be the underlying issue, as Heroku usually uses git to clone your repo by and thus will check the root folder for package.json. However since your package.json is under the server folder (IE: server/package.json) Heroku get’s confused and “can’t find it” as it doesn’t automatically know its under server.

I’d suggest maybe looking into if you can specify where the package.json is within your project, or consider refactoring how your folders are setup so the server is actually the root.

Finally, it’s worth pointing out that because your client-side is React, you’ll need to have some sort of “build process” as you can’t use React’s dev server to “server it”, you’ll need to use npm run build to create the static assets for your client-side, and then have your server setup to host and serve the static files along with support client-side API calls. Heroku (or some other CI/CD software) can do these steps for you, but it might take some tweaking.

Finally, it’s worth pointing out that because your client-side is React, you’ll need to have some sort of “build process” as you can’t use React’s dev server to “server it” , you’ll need to use npm run build to create the static assets for your client-side, and then have your server setup to host and serve the static files along with support client-side API calls. Heroku (or some other CI/CD software) can do these steps for you, but it might take some tweaking.

I think both of these steps have been done already. (I could be wrong though). But other than these, I have to try and make the server the root folder, right? If I do that, can I still keep the client folder separate from it?

The most optimal “build” is to actually not include the client directory and only include the compiled final build from CRA. From the server’s perspective it wont use/care about the client directory since that is essentially your “source code” that gets compiled into shippable code via npm run build and CRA does the rest.

You could always just leave the client folder around within your git repo within your server code, and ship it with everything else, just again the server will be responsible to hosting/serving the static files and the code/stuff in the client folder is 100% ignored when running on Heroku.

For some broader context, from the perspective of an end user, they will be able to interact with your client’s static files produced from the CRA, (I think it outputs to build/static) and your server’s APIs via node+express. Thats it, your source files within client, and other files/folders that are currently in your server folder, which may be moved to the root are not accessible. As not only is this a security risk, but the main purpose of server-side code is to provide an interface where you expose only what you want/need to to end-users.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.