mars / heroku-cra-node

⚛️ How to use create-react-app with a custom Node server on Heroku
MIT License
927 stars 226 forks source link

PERN stack app not compatible with buildpack #54

Closed ghost-of-the-mind closed 2 years ago

ghost-of-the-mind commented 2 years ago

I recently realised that since I have a custom Node.js server in my app, that I should use the mars/heroku-cra-node buildpack instead of the build-react-app version that is meant for static React.js apps.

I tried my best in following the documentation of this buildpack, but after deploying my app to Heroku, I received the following result:

folder_structure

-----> Building on the Heroku-20 stack
-----> Using buildpacks:
       1. heroku/nodejs
       2. https://github.com/mars/heroku-cra-node.git
-----> Node.js app detected

-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true

-----> Installing binaries
       engines.node (package.json):  14.18.1
       engines.npm (package.json):   6.14.15

       Resolving node version 14.18.1...
       Downloading and installing node 14.18.1...
       npm 6.14.15 already installed with node

-----> Restoring cache
       - node_modules

-----> Installing dependencies
       Installing node modules

       > core-js@2.6.12 postinstall /tmp/build_9082f3ae/node_modules/babel-runtime/node_modules/core-js
       > node -e "try{require('./postinstall')}catch(e){}"

       > ejs@2.7.4 postinstall /tmp/build_9082f3ae/node_modules/ejs
       > node ./postinstall.js

       > fsevents@1.2.13 install /tmp/build_9082f3ae/node_modules/webpack-dev-server/node_modules/fsevents
       > node install.js

       Skipping 'fsevents' build as platform linux is not supported

       > fsevents@1.2.13 install /tmp/build_9082f3ae/node_modules/watchpack-chokidar2/node_modules/fsevents
       > node install.js

       Skipping 'fsevents' build as platform linux is not supported

       > core-js@3.20.2 postinstall /tmp/build_9082f3ae/node_modules/core-js
       > node -e "try{require('./postinstall')}catch(e){}"

       > core-js-pure@3.20.2 postinstall /tmp/build_9082f3ae/node_modules/core-js-pure
       > node -e "try{require('./postinstall')}catch(e){}"

       > nodemon@2.0.15 postinstall /tmp/build_9082f3ae/node_modules/nodemon
       > node bin/postinstall || exit 0

       Love nodemon? You can now support the project via the open collective:
        > https://opencollective.com/nodemon/donate

       added 1974 packages in 18.315s

-----> Build
       Detected both "build" and "heroku-postbuild" scripts
       Running heroku-postbuild

       > dj-bbq@2.0.1 heroku-postbuild /tmp/build_9082f3ae
       > npm install && npm run build

       added 3 packages from 8 contributors and audited 1977 packages in 9.127s

       167 packages are looking for funding
         run `npm fund` for details

       found 19 vulnerabilities (2 low, 12 moderate, 4 high, 1 critical)
         run `npm audit fix` to fix them, or `npm audit` for details

       > dj-bbq@2.0.1 build /tmp/build_9082f3ae
       > react-scripts build

       Creating an optimized production build...
       Compiled successfully.

       File sizes after gzip:

         75.13 KB  build/static/js/2.31dd7139.chunk.js
         6.83 KB   build/static/js/main.624fb6db.chunk.js
         3.02 KB   build/static/css/main.8e2b645d.chunk.css
         777 B     build/static/js/runtime-main.47167386.js

       The project was built assuming it is hosted at /.
       You can control this with the homepage field in your package.json.

       The build folder is ready to be deployed.
       You may serve it with a static server:

         npm install -g serve
         serve -s build

       Find out more about deployment here:

         https://cra.link/deployment

-----> Caching build
       - node_modules

-----> Pruning devDependencies
       removed 90 packages and audited 1887 packages in 7.734s

       158 packages are looking for funding
         run `npm fund` for details

       found 19 vulnerabilities (2 low, 12 moderate, 4 high, 1 critical)
         run `npm audit fix` to fix them, or `npm audit` for details

-----> Build succeeded!
-----> App not compatible with buildpack: https://github.com/mars/heroku-cra-node.git
       bash: /tmp/codon/tmp/buildpacks/ef5bff07a76bde2742e6ba624c91f17c85f656de/bin/detect: No such file or directory
       More info: https://devcenter.heroku.com/articles/buildpacks#detection-failure
 !     Push failed

Based on the build log, my app is not compatible with this buildpack, but I cant figure out what it is missing. What is this "/tmp/codon/tmp/buildpacks/ef5bff07a76bde2742e6ba624c91f17c85f656de/bin/detect" file?

mars commented 2 years ago

This repo is not a Heroku buildpack. It relies on Heroku's Node buildpack.

This is an example app intended to share a solution for how to setup a "two app build" (backend Node app & frontend React app) with create-react-app.

ghost-of-the-mind commented 2 years ago

Sure, which is why I tried to use it in tandem with the Node buildpack as can be seen in my build log...

-----> Using buildpacks:
       1. heroku/nodejs
       2. https://github.com/mars/heroku-cra-node.git

I am just curious as to what could be the referenced missing file in the build log?

-----> Build succeeded!
-----> App not compatible with buildpack: https://github.com/mars/heroku-cra-node.git
       bash: /tmp/codon/tmp/buildpacks/ef5bff07a76bde2742e6ba624c91f17c85f656de/bin/detect: No such file or directory

As it appears to me, I should not be missing any files, based on my folder structure, yet, the build log implies that I am missing something and thus my app is not compatible with this repo.

Or are you saying that I do not need to designate this repo as a buildpack and only use the node.js buildpack + use your provided folder and file structure to deploy the app and that should be enough?

mars commented 2 years ago

You need to heroku buildpacks:remove https://github.com/mars/heroku-cra-node.git.

The bin/detect script does not exist, because this repo is not a buildpack.

This repo is an example app with a detailed README.

The README explains exactly what this is and how to use it. Please read it 📓🙏😇