mars / heroku-cra-node

⚛️ How to use create-react-app with a custom Node server on Heroku

create-react-app with a Node server on Heroku

A minimal example of using a Node backend (server for API, proxy, & routing) with a React frontend.

• 📐 Design Points
• 🕺 Demo
• 🚀 Deploy to Heroku
• ⤵️ Switching from create-react-app-buildpack
• 🎛 Runtime Config
• 💻 Local Development

To deploy a frontend-only React app, use the static-site optimized
▶️ create-react-app-buildpack

Design Points

A combo of two npm projects, the backend server and the frontend UI. So there are two package.json configs and thereforce two places to run npm commands:

1. Node server: ./package.json
   • deployed automatically via heroku/nodejs buildpack
2. React UI: react-ui/package.json
   • generated by create-react-app
   • deployed via build script in the Node server's ./package.json
   • module cache configured by cacheDirectories

Includes a minimal Node Cluster implementation to parallelize the single-threaded Node process across the available CPU cores.

Demo

Demo deployment: example API call from the React UI is fetched with a relative URL that is served by an Express handler in the Node server.

Deploy to Heroku

git clone https://github.com/mars/heroku-cra-node.git
cd heroku-cra-node/
heroku create
git push heroku master

This deployment will automatically:

• detect Node buildpack
• build the app with
  • npm install for the Node server
  • npm run build for create-react-app
• launch the web process with npm start
  • serves ../react-ui/build/ as static files
  • customize by adding API, proxy, or route handlers/redirectors

⚠️ Using npm 5’s new package-lock.json? We resolved a compatibility issue. See PR for more details.

👓 More about deploying to Heroku.

Switching from create-react-app-buildpack

If an app was previously deployed with create-react-app-buildpack, then a few steps are required to migrate the app to this architecture:

1. Remove create-react-app-buildpack from the app; heroku/nodejs buildpack will be automatically activated

   heroku buildpacks:clear

2. Move the root React app files (including dotfiles) into a react-ui/ subdirectory

   mkdir react-ui
   git mv -k [!react-ui]* react-ui/
   mv node_modules react-ui/
   
   # If you see "fatal: Not a git repository", then fix that error
   mv react-ui/.git ./

   ⚠️ Some folks have reported problems with these commands. Using the bash shell will probably allow them to work. Sorry if they do not work for you, know that the point is to move everything in the repo into the react-ui/ subdirectory. Except for .git/ which should remain at the root level. 

3. Create a root package.json, server/, & .gitignore modeled after the code in this repo

4. Commit and deploy ♻️

   git add -A
   git commit -m 'Migrate from create-react-app-buildpack to Node server'
   git push heroku master

5. If the app uses Runtime configuration, then follow Runtime config below to keep it working.

Runtime Config

create-react-app itself supports configuration with environment variables. These compile-time variables are embedded in the bundle during the build process, and may go stale when the app slug is promoted through a pipeline or otherwise changed without a rebuild. See create-react-app-buildpack's docs for further elaboration of compile-time vs runtime variables.

create-react-app-buildpack's runtime config makes it possible to dynamically change variables, no rebuild required. That runtime config technique may be applied to Node.js based apps such as this one.

1. Add the inner buildpack to your app, so that the heroku/nodejs buildpack is last:

   heroku buildpacks:add -i 1 https://github.com/mars/create-react-app-inner-buildpack
   
   # Verify that create-react-app-inner-buildpack comes before nodejs
   heroku buildpacks

2. Set the bundle location for runtime config injection:

   heroku config:set JS_RUNTIME_TARGET_BUNDLE='/app/react-ui/build/static/js/*.js'

3. Now, build the app with this new setup:

   git commit --allow-empty -m 'Enable runtime config with create-react-app-inner-buildpack'
   git push heroku master

Local Development

Because this app is made of two npm projects, there are two places to run npm commands:

1. Node API server at the root ./
2. React UI in react-ui/ directory.

Run the API server

In a terminal:

# Initial setup
npm install

# Start the server
npm start

Install new npm packages for Node

npm install package-name --save

Run the React UI

The React app is configured to proxy backend requests to the local Node server. (See "proxy" config)

In a separate terminal from the API server, start the UI:

# Always change directory, first
cd react-ui/

# Initial setup
npm install

# Start the server
npm start

Install new npm packages for React UI

# Always change directory, first
cd react-ui/

npm install package-name --save

heroku-cra-node's Issues

JS_RUNTIME_TARGET_BUNDLE missing quotes

In README.md change from (no quotes):

2. Set the bundle location for runtime config injection:
    heroku config:set JS_RUNTIME_TARGET_BUNDLE=/app/react-ui/build/static/js/*.js

to (added quotes):

2. Set the bundle location for runtime config injection:
    heroku config:set JS_RUNTIME_TARGET_BUNDLE="/app/react-ui/build/static/js/*.js"

npm ERR! [email protected] start: `react-scripts start`

Adding my react project to Heroku, It works just as expected with the npm run start in terminal
Plus heroku gives me build success but when i run "heroku logs --tail"
I get this errors:

2020-04-26T19:07:20.310452+00:00 app[web.1]: ^
2020-04-26T19:07:20.310452+00:00 app[web.1]:
2020-04-26T19:07:20.310453+00:00 app[web.1]: Error: Cannot find module '/app/node_modulesreact-scripts/scripts/start.js'
2020-04-26T19:07:20.310453+00:00 app[web.1]: at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
2020-04-26T19:07:20.310453+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:862:27)
2020-04-26T19:07:20.310454+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
2020-04-26T19:07:20.310454+00:00 app[web.1]: at internal/main/run_main_module.js:18:47 {
2020-04-26T19:07:20.310455+00:00 app[web.1]: code: 'MODULE_NOT_FOUND',
2020-04-26T19:07:20.310455+00:00 app[web.1]: requireStack: []
2020-04-26T19:07:20.310455+00:00 app[web.1]: }
2020-04-26T19:07:20.318244+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2020-04-26T19:07:20.318475+00:00 app[web.1]: npm ERR! errno 1
2020-04-26T19:07:20.319456+00:00 app[web.1]: npm ERR! [email protected] start: node node_modulesreact-scripts/scripts/start.js
2020-04-26T19:07:20.319570+00:00 app[web.1]: npm ERR! Exit status 1
2020-04-26T19:07:20.319693+00:00 app[web.1]: npm ERR!
2020-04-26T19:07:20.319839+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script.
2020-04-26T19:07:20.319900+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2020-04-26T19:07:20.328188+00:00 app[web.1]:
2020-04-26T19:07:20.328452+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2020-04-26T19:07:20.328681+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2020-04-26T19_07_20_320Z-debug.log
2020-04-26T19:18:39.903594+00:00 heroku[web.1]: State changed from crashed to starting
2020-04-26T19:18:46.229510+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-26T19:18:46.303689+00:00 heroku[web.1]: State changed from crashed to starting
2020-04-26T19:18:46.089310+00:00 app[web.1]:
2020-04-26T19:18:46.089349+00:00 app[web.1]: > [email protected] start /app
2020-04-26T19:18:46.089350+00:00 app[web.1]: > node node_modulesreact-scripts/scripts/start.js
2020-04-26T19:18:46.089350+00:00 app[web.1]:
2020-04-26T19:18:46.137137+00:00 app[web.1]: internal/modules/cjs/loader.js:983
2020-04-26T19:18:46.137138+00:00 app[web.1]: throw err;
2020-04-26T19:18:46.137139+00:00 app[web.1]: ^
2020-04-26T19:18:46.137139+00:00 app[web.1]:
2020-04-26T19:18:46.137140+00:00 app[web.1]: Error: Cannot find module '/app/node_modulesreact-scripts/scripts/start.js'
2020-04-26T19:18:46.137140+00:00 app[web.1]: at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
2020-04-26T19:18:46.137140+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:862:27)
2020-04-26T19:18:46.137141+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
2020-04-26T19:18:46.137141+00:00 app[web.1]: at internal/main/run_main_module.js:18:47 {
2020-04-26T19:18:46.137142+00:00 app[web.1]: code: 'MODULE_NOT_FOUND',
2020-04-26T19:18:46.137142+00:00 app[web.1]: requireStack: []
2020-04-26T19:18:46.137143+00:00 app[web.1]: }
2020-04-26T19:18:46.143594+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2020-04-26T19:18:46.143923+00:00 app[web.1]: npm ERR! errno 1
2020-04-26T19:18:46.144898+00:00 app[web.1]: npm ERR! [email protected] start: node node_modulesreact-scripts/scripts/start.js
2020-04-26T19:18:46.145020+00:00 app[web.1]: npm ERR! Exit status 1
2020-04-26T19:18:46.145226+00:00 app[web.1]: npm ERR!
2020-04-26T19:18:46.145398+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script.
2020-04-26T19:18:46.145552+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2020-04-26T19:18:46.150871+00:00 app[web.1]:
2020-04-26T19:18:46.151048+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2020-04-26T19:18:46.151161+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2020-04-26T19_18_46_146Z-debug.log
2020-04-26T19:18:54.260949+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-26T19:18:54.092219+00:00 app[web.1]:
2020-04-26T19:18:54.092230+00:00 app[web.1]: > [email protected] start /app
2020-04-26T19:18:54.092231+00:00 app[web.1]: > node node_modulesreact-scripts/scripts/start.js
2020-04-26T19:18:54.092231+00:00 app[web.1]:
2020-04-26T19:18:54.152031+00:00 app[web.1]: internal/modules/cjs/loader.js:983
2020-04-26T19:18:54.152032+00:00 app[web.1]: throw err;
2020-04-26T19:18:54.152033+00:00 app[web.1]: ^
2020-04-26T19:18:54.152033+00:00 app[web.1]:
2020-04-26T19:18:54.152034+00:00 app[web.1]: Error: Cannot find module '/app/node_modulesreact-scripts/scripts/start.js'
2020-04-26T19:18:54.152034+00:00 app[web.1]: at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
2020-04-26T19:18:54.152035+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:862:27)
2020-04-26T19:18:54.152035+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
2020-04-26T19:18:54.152035+00:00 app[web.1]: at internal/main/run_main_module.js:18:47 {
2020-04-26T19:18:54.152036+00:00 app[web.1]: code: 'MODULE_NOT_FOUND',
2020-04-26T19:18:54.152036+00:00 app[web.1]: requireStack: []
2020-04-26T19:18:54.152036+00:00 app[web.1]: }
2020-04-26T19:18:54.160339+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2020-04-26T19:18:54.160571+00:00 app[web.1]: npm ERR! errno 1
2020-04-26T19:18:54.161672+00:00 app[web.1]: npm ERR! [email protected] start: node node_modulesreact-scripts/scripts/start.js
2020-04-26T19:18:54.161828+00:00 app[web.1]: npm ERR! Exit status 1
2020-04-26T19:18:54.162002+00:00 app[web.1]: npm ERR!
2020-04-26T19:18:54.162224+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script.
2020-04-26T19:18:54.162277+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2020-04-26T19:18:54.170530+00:00 app[web.1]:
2020-04-26T19:18:54.170778+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2020-04-26T19:18:54.170854+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2020-04-26T19_18_54_162Z-debug.log
2020-04-26T19:21:02.000000+00:00 app[api]: Build started by user [email protected]
2020-04-26T19:21:12.401806+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=project123test.herokuapp.com request_id=5ba68df1-90f3-4e53-84c1-f2613075ae24 fwd="213.57.249.221" dyno= connect= service= status=503 bytes= protocol=https
2020-04-26T19:23:20.110085+00:00 app[api]: Deploy 7e0a75fe by user [email protected]
2020-04-26T19:23:20.110085+00:00 app[api]: Release v10 created by user [email protected]
2020-04-26T19:23:21.363061+00:00 heroku[web.1]: State changed from crashed to starting
2020-04-26T19:23:28.450719+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-26T19:23:28.365255+00:00 app[web.1]:
2020-04-26T19:23:28.365272+00:00 app[web.1]: > [email protected] start /app
2020-04-26T19:23:28.365272+00:00 app[web.1]: > react-scripts start
2020-04-26T19:23:28.365272+00:00 app[web.1]:
2020-04-26T19:23:28.369288+00:00 app[web.1]: sh: 1: react-scripts: not found
2020-04-26T19:23:28.372401+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2020-04-26T19:23:28.372584+00:00 app[web.1]: npm ERR! syscall spawn
2020-04-26T19:23:28.372714+00:00 app[web.1]: npm ERR! file sh
2020-04-26T19:23:28.372893+00:00 app[web.1]: npm ERR! errno ENOENT
2020-04-26T19:23:28.373775+00:00 app[web.1]: npm ERR! [email protected] start: react-scripts start
2020-04-26T19:23:28.373853+00:00 app[web.1]: npm ERR! spawn ENOENT
2020-04-26T19:23:28.373951+00:00 app[web.1]: npm ERR!
2020-04-26T19:23:28.374030+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script.
2020-04-26T19:23:28.374099+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2020-04-26T19:23:28.381621+00:00 app[web.1]:
2020-04-26T19:23:28.381788+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2020-04-26T19:23:28.381918+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2020-04-26T19_23_28_374Z-debug.log
2020-04-26T19:23:28.000000+00:00 app[api]: Build succeeded

My package.json:
{
"name": "online-shop",
"version": "0.1.0",
"private": true,
"enginers": {
"node": "v14.0.0",
"npm": "6.14.4"
},
"dependencies": {
"@material-ui/core": "^4.9.11",
"@material-ui/icons": "^4.9.1",
"express": "^4.17.1",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"scripts": {
"start": "react-scripts start",
"test": "mocha test/.spec.js --color",
"eject": "react-scripts eject",
"lint": "eslint src/.js --color"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"@types/chai": "^4.2.11",
"@types/mocha": "^7.0.2",
"babel-eslint": "^10.1.0",
"chai": "^4.2.0",
"eslint": "^6.8.0",
"eslint-plugin-react": "^7.19.0",
"mocha": "^7.1.1",
"react-scripts": "^3.4.1"
}
}

Any idea how i should solve this problem? Thanks

service worker

This is a great concept - thank you for taking the time to put this open source.

Quick note, I just tested it fetching the fresh create-react-app repo - it is using service workers .

react-ui/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

I had to unregister the service worker to see /api correctly in both Chrome and Firefox. Safari was ok because it doesn't support Service Workers yet.

Any ideas?

Heroku Build fails with 'missing script: build'

What I did:

• I created a react app with create-react-app
• I ran heroku app:create and passed the create-react-app-buildpack url in the --buildpack argument.
• I went to heroku and connected my app to github.
• I wrote a static.json for nginx, as per your instructions in the buildpack repo.
• I pushed my app to master and saw that this build worked.

And everything worked. Then, I realized that I wanted to add authentication and to deliver a node backend as well, so I found this repository and tried to follow the instructions.

• I did heroku --app my-app config:unset <buildpack_url>
• I created a folder called react-ui and moved my react app under it
• I created the index.js for the express app
• I created the package.json for the express app (name is my-app)
• I added the proxy config in the package.json of the react app and renamed it (my-app-ui)

And when I run these two locally via npm install && npm start they both start, and they work together - the react app reaches out to the express app, which returns data. Hooray!

Then, I push to my master branch to kick off a heroku build - but the build fails. I'm going to post the build log right after this paragraph, and you'll see that it's complaining about a missing script called build. At first, I thought it wasn't finding the build script for the react-ui, but look closer at the log and you'll see that the react-ui app builds successfully. In fact, you can see that each part of the heroku-postbuild command runs successfully. So I don't know which 'build' is not being found. I do note that the create-react-app-inner-buildpack writes out a static.json - which is weird because I no longer want an nginx front-end, but the node backend that I've just provided.

-----> React.js (create-react-app) multi app detected
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=false
       NODE_VERBOSE=false
       NODE_ENV=development
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  6.9.x
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 6.9.x via semver.io...
       Downloading and installing node 6.9.5...
       Using default npm version: 3.10.10
-----> Restoring cache
       Skipping cache restore (new runtime signature)
-----> Building dependencies
       Installing node modules (package.json)
       [email protected] /tmp/build_658494bc568082290fd55dab3cd2145e/org-my-app-f27879f8323ffc9b378e383271603d4539b8ad6a
      <snipped all the npm install stuff>

      Running heroku-postbuild
       
       > [email protected] heroku-postbuild /tmp/build_658494bc568082290fd55dab3cd2145e/org-my-app-f27879f8323ffc9b378e383271603d4539b8ad6a
       > cd react-ui/ && npm install --only=dev && npm install && npm run build
       
       [email protected] /tmp/build_658494bc568082290fd55dab3cd2145e/org-my-app-f27879f8323ffc9b378e383271603d4539b8ad6a/react-ui
       <snipped npm install stuff>

      [email protected] /tmp/build_658494bc568082290fd55dab3cd2145e/org-my-app-f27879f8323ffc9b378e383271603d4539b8ad6a/react-ui
      <snipped npm install stuff>

       > [email protected] build /tmp/build_658494bc568082290fd55dab3cd2145e/org-my-app-f27879f8323ffc9b378e383271603d4539b8ad6a/react-ui
       > react-scripts build
       
       Creating an optimized production build...
       Compiled successfully.
       
       File sizes after gzip:
       
       116.49 KB  build/static/js/main.9dde2828.js
       314 B      build/static/css/main.97c43581.css
       
       The project was built assuming it is hosted at the server root.
       To override this, specify the homepage in your package.json.
       For example, add this to build it for GitHub Pages:
       
       "homepage": "http://myname.github.io/myapp",
       
       The build folder is ready to be deployed.
       You may also serve it locally with a static server:
       
       npm install -g pushstate-server
       pushstate-server build
       open http://localhost:9000
       
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (package.json):
       - node_modules
       - react-ui/node_modules
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
=====> Detected Framework: React.js (create-react-app)
       Writing `static.json` to support create-react-app
       Enabling runtime environment variables
npm ERR! Linux 3.13.0-110-generic
npm ERR! argv "/tmp/build_658494bc568082290fd55dab3cd2145e/org-my-app-f27879f8323ffc9b378e383271603d4539b8ad6a/.heroku/node/bin/node" "/tmp/build_658494bc568082290fd55dab3cd2145e/org-my-app-f27879f8323ffc9b378e383271603d4539b8ad6a/.heroku/node/bin/npm" "run" "build"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! missing script: build
npm ERR! 
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR!     /tmp/build_658494bc568082290fd55dab3cd2145e/org-my-app-f27879f8323ffc9b378e383271603d4539b8ad6a/npm-debug.log
 !     Push rejected, failed to compile React.js (create-react-app) multi app.
 !     Push failed

Switching from create react app buildpack. Problem on step 2.

I am following the steps to switch from create-react-app-buildpack. When I get to step 2 and run this:
git mv [!react-ui]* react-ui/
instead of seeing:
fatal: Not a git repository
I see this:
fatal: bad source, source=[!react-ui]*, destination=react-ui/[!react-ui]*

Edit:
Maybe this is the problem?
https://superuser.com/questions/1050326/git-mv-returns-bad-source-in-powershell

If that is the case, is there any harm in moving the files manually? I'm not that knowledgeable of git and what can break it.

compression not working

running a lighthouse audit gives a very poor performance rating(in single digits). Is compression enabled for the for the react front end?

PERN stack app not compatible with buildpack

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:

-----> 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
       
       > [email protected] postinstall /tmp/build_9082f3ae/node_modules/babel-runtime/node_modules/core-js
       > node -e "try{require('./postinstall')}catch(e){}"
       
       
       > [email protected] postinstall /tmp/build_9082f3ae/node_modules/ejs
       > node ./postinstall.js
       
       
       > [email protected] install /tmp/build_9082f3ae/node_modules/webpack-dev-server/node_modules/fsevents
       > node install.js
       
       
       Skipping 'fsevents' build as platform linux is not supported
       
       > [email protected] install /tmp/build_9082f3ae/node_modules/watchpack-chokidar2/node_modules/fsevents
       > node install.js
       
       
       Skipping 'fsevents' build as platform linux is not supported
       
       > [email protected] postinstall /tmp/build_9082f3ae/node_modules/core-js
       > node -e "try{require('./postinstall')}catch(e){}"
       
       
       > [email protected] postinstall /tmp/build_9082f3ae/node_modules/core-js-pure
       > node -e "try{require('./postinstall')}catch(e){}"
       
       
       > [email protected] 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
       
       > [email protected] 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
       
       > [email protected] 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?

Some questions

@mars : Hi, congratulations on the module.
I was trying it, I wanted to know if it was possible to do certain things like these and how to do them:

1. Create multiple pages, for example.
   / -> App.js
   /home -> home.js
   /local -> local.js
2. To be able to set via nodejs or react:

• the page title
• icon
• variable passed through get in nodejs and then used in react.

3. Install external modules both on nodejs and on react.

Express.js fetch error. Any API call returns react index.html

Hi, after deploying on Heroku the node.js + create-react-app project, I'm getting an error with fetching my express routes, meanwhile, with the local deploy, it is working perfectly. My package.json scripts and express version:

"scripts": {
		"client": "cd client && yarn start",
		"server": "nodemon server.js",
		"build": "cd client && npm run build",
		"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
		"start": "node server.js",
		"heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
	},
	"dependencies": {
		"body-parser": "^1.18.3",
		"compression": "1.7.4",
		"cors": "2.8.5",
		"dotenv": "7.0.0",
		"express": "^4.16.4",
		"stripe": "6.28.0"
	},
	"devDependencies": {
		"concurrently": "^4.0.1"
	}

And my server.js is:

const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const path = require("path");
const compression = require("compression");

if (process.env.NODE_ENV !== "production") require("dotenv").config();

const app = express();
const port = process.env.PORT || 5000;

app.use(compression());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());

if (process.env.NODE_ENV === "production") {
	app.use(express.static(path.join(__dirname, "client/build")));
	app.get("*", function(req, res) {
		res.sendFile(path.join(__dirname, "client/build", "index.html"));
	});
}

app.listen(port, error => {
	if (error) throw error;
	console.log("server running on port " + port);
});

// define routes
app.use("/api/search", require("./routes/search.routes"));
app.use("/api/origens", require("./routes/origens.routes"));

So, locally with yarn dev it works good, but on production, with axios({url: "/api/origens", method: "get"}) I'm getting the "client/build/index.html" as a response.data.

Am I doing something wrong? Thanks!

Why are dev dependencies needed for the build process?

Hello,

In the build script (see here) you call:

npm install --only=dev --no-shrinkwrap

which downloads the dev dependencies if I'm not mistaken.

Is it needed at all since this is a production build on Heroku?

Thanks

Question: Why a separate react app?

Hi I am still learning React so this question might seem trivial, I wonder is there a way to integrate the react app into the node server? Or is it a common practice for using react in the frontend?

Using with runtime envs?

Hello there,
I've been using your buildpack for create-react-app for quite a few projects now – all of them using separate heroku apps as APIs.

Today I wanted to do use it again for an app that has a setup just like the one in this repo. It works perfectly fine, but what I'm missing the most are runtime envs.

My question is – is it possible to use somehow use this feature?

I've added an additional buildpack to app.json (the one that's being used in the create-react-app-buildpack) but it does not seem to work :(

{
  "name": "react-app-with-api",
  "description": "Server for handling both API and React requests",
  "scripts": {},
  "env": {},
  "formation": {
    "web": {
      "quantity": 1
    }
  },
  "addons": [],
  "buildpacks": [
    {
      "url": "heroku/nodejs"
    },
    {
      "url": "https://github.com/mars/create-react-app-inner-buildpack"
    }
  ]
}

PS Thanks for the awesome work!

Receiving error due to heroku-postbuild script when deploying app

Hello! I'm getting the output below when running git push heroku master:

Counting objects: 237, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (223/223), done.
Writing objects: 100% (237/237), 251.29 KiB | 0 bytes/s, done.
Total 237 (delta 127), reused 35 (delta 9)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Node.js app detected
remote: 
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote: 
remote: -----> Installing binaries
remote:        engines.node (package.json):  8.4.0
remote:        engines.npm (package.json):   unspecified (use default)
remote:        
remote:        Resolving node version 8.4.0...
remote:        Downloading and installing node 8.4.0...
remote:        Using default npm version: 5.3.0
remote: 
remote: -----> Restoring cache
remote:        Skipping cache restore (not-found)
remote: 
remote: -----> Building dependencies
remote:        Installing node modules (package.json + package-lock)
remote:        
remote:        > [email protected] postinstall /tmp/build_4609f86de952cdb33e104d76e5f31362/node_modules/nodemon
remote:        > node bin/postinstall || exit 0
remote:        
remote:        added 398 packages in 9.532s
remote:        Running heroku-postbuild
remote:        
remote:        > [email protected] heroku-postbuild /tmp/build_4609f86de952cdb33e104d76e5f31362
remote:        > cd ./client && npm install && npm install --only=dev --no-shrinkwrap && npm run build
remote:        
remote: events.js:182
remote:       throw er; // Unhandled 'error' event
remote:       ^
remote: 
remote: Error: sha512-Td74QcvICAA0+qERawL2LXZm5t/gBtCcvSg79TLNPSvQ== integrity checksum failed when using sha512: wanted sha512-xcvICAA0+qERaVkRpwL2LXZm5t/gBtCB9STYEV1pg79TSvd5IDJMQ== but got sha512-rh+KuAW36YKo0vClhQzwPJNu65xLb7Mrt+eZhtLf6Mf25POlMwD1Fw==. (13865 bytes)
remote:     at Transform.on (/tmp/build_4609f86de952cdb33e104d76e5f31362/.heroku/node/lib/node_modules/npm/node_modules/ssri/index.js:275:19)
remote:     at emitNone (events.js:110:20)
remote:     at Transform.emit (events.js:207:7)
remote:     at endReadableNT (_stream_readable.js:1059:12)
remote:     at _combinedTickCallback (internal/process/next_tick.js:138:11)
remote:     at process._tickCallback (internal/process/next_tick.js:180:9)
remote: events.js:182
remote:       throw er; // Unhandled 'error' event
remote:       ^
remote: 
remote: Error: sha512-x95Td74QcvICAgSTYEV1p0WcvSg79TLNPSvd5IDJMQ== integrity checksum failed when using sha512: wanted sha512-x95Td74QcvICAAdwL2LXZm5t/gTYEV1p0WcvSg79TLNPSvd5IDJMQ== but got sha512-rh+Koj8FwPJNu65xLb7Mrt+eZht0IPTOlMwD1Fw==. (13865 bytes)
remote:     at Transform.on (/tmp/build_4609f86de952cdb33e104d76e5f31362/.heroku/node/lib/node_modules/npm/node_modules/ssri/index.js:275:19)
remote:     at emitNone (events.js:110:20)
remote:     at Transform.emit (events.js:207:7)
remote:     at endReadableNT (_stream_readable.js:1059:12)
remote:     at _combinedTickCallback (internal/process/next_tick.js:138:11)
remote:     at process._tickCallback (internal/process/next_tick.js:180:9)
remote: npm ERR! cancel after 1 retries!
remote: 
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.0Bxu1/_logs/2018-08-16T22_53_52_995Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! [email protected] heroku-postbuild: `cd ./client && npm install && npm install --only=dev --no-shrinkwrap && npm run build`
remote: npm ERR! Exit status 1
remote: npm ERR! 
remote: npm ERR! Failed at the [email protected] heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote: 
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.0Bxu1/_logs/2018-08-16T22_53_53_018Z-debug.log
remote: 
remote: -----> Build failed
remote:        
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:        
remote:        If you're stuck, please submit a ticket so we can help:
remote:        https://help.heroku.com/
remote:        
remote:        Love,
remote:        Heroku
remote:        
remote:  !     Push rejected, failed to compile Node.js app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !	Push rejected to atlantic-breezy-840.
remote: 
To https://git.heroku.com/atlantic-breezy-840.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/atlantic-breezy-840.git'

Using cache for client node-modules

From what I can see in the build log in the example, the cache isn't used when installing the dependencies when building the client.
Seems like the node buildpack isn't supporting 2 build directories, so maybe it's better to use 2 buildpacks: one for node and one for the React app (maybe we can leverage your buildpack, but without the Nginx part).

git mv -k [!react-ui]* react-ui/

git mv -k [!react-ui]* react-ui/

this does not work in zsh, I just switch to bash and it works

Some folks have reported problems with these commands. Sorry if they do not work for you, know that the point is to move everything in the repo into the react-ui/ subdirectory. Except for .git/ which should remain at the root level.

Version using yarn instead of npm please?

Heroku: Failed to load resource: the server responded with a status of 503 (Service Unavailable) /favicon.ico

I get this error everytime I open the app on Heroku. I have tried using serve-favicon but it doesn't seem to work.
Here is my repo.

EDIT: The problem had nothing to do with the favicon. The error displayed in the console was just the result of another thing failing to work properly. In my case, this was the connection to mongoDB Atlas. I changed my database to Heroku's mLab addon for mongoDB and everything deployed perfectly.

This error wasn't being logged on the console so I had to look at Heroku's logs to find what was wrong. See here to learn about logging on Heroku.

`package-lock.json` causes "react-scripts: not found" when deploying

I am having a difficult time getting this deployed once I add some more code to the repo.

It works just as expected locally with the npm run start and npm run build commands.

I have been searching stack overflow and haven't found anything. I have even tried to add react-scripts to the Dependencies as well but am still getting this print out when I deploy.

($ git push heroku master
Counting objects: 7, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (7/7), done.
Writing objects: 100% (7/7), 639 bytes | 0 bytes/s, done.
Total 7 (delta 4), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=true
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  6.9.x
remote:        engines.npm (package.json):   unspecified (use default)
remote:
remote:        Resolving node version 6.9.x via semver.io...
remote:        Downloading and installing node 6.9.5...
remote:        Detected package-lock.json: defaulting npm to version 5.x.x
remote:        Resolving npm version 5.x.x via semver.io...
remote:        Downloading and installing npm 5.0.4 (replacing version 3.10.10).
..
remote:
remote: -----> Restoring cache
remote:        Loading 2 from cacheDirectories (default):
remote:        - node_modules
remote:        - bower_components (not cached - skipping)
remote:
remote: -----> Building dependencies
remote:        Installing node modules (package.json)
remote:        removed 1185 packages in 18.503s
remote:        Running heroku-postbuild
remote:
remote:        > [email protected] heroku-postbuild /tmp/build_cf752754736fe
7ea551ef5c015e7debe
remote:        > cd react-ui/ && npm install --only=dev && npm install && npm ru
n build
remote:
remote:        added 1069 packages in 31.462s
remote:        removed 1069 packages in 22.593s
remote:
remote:        > [email protected] build /tmp/build_cf752754736fe7ea5
51ef5c015e7debe/react-ui
remote:        > react-scripts build
remote:
remote: sh: 1: react-scripts: not found
remote: npm ERR! file sh
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno ENOENT
remote: npm ERR! syscall spawn
remote: npm ERR! [email protected] build: `react-scripts build`
remote: npm ERR! spawn ENOENT
remote: npm ERR!
remote: npm ERR! Failed at the [email protected] build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additi
onal logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /app/.npm/_logs/2017-07-01T00_08_13_208Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! [email protected] heroku-postbuild: `cd react-ui/ && npm in
stall --only=dev && npm install && npm run build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the [email protected] heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additi
onal logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /app/.npm/_logs/2017-07-01T00_08_13_224Z-debug.log
remote:
remote: -----> Build failed
remote:
remote:        We're sorry this build is failing! You can troubleshoot common is
sues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploy
s
remote:
remote:        If you're stuck, please submit a ticket so we can help:
remote:        https://help.heroku.com/
remote:
remote:        Love,
remote:        Heroku
remote:
remote:  !     Push rejected, failed to compile Node.js app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !       Push rejected to immense-escarpment-58375.
remote:
To https://git.heroku.com/immense-escarpment-58375.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/immense-escarpment-58
375.git')

I found that if I set NPM_CONFIG_PRODUCTION=false it compiles without any errors and deploys but I just get a 503 error when I check the site.

Also, while troubleshooting this I ran the heroku post-build hook cd react-ui/ && npm install --only=dev && npm install && npm run build locally from the parent directory and got this message.

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'react' in 'C:\Users\Josh\Desktop\project
s\heroku-appt\react-ui\src'

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Josh\AppData\Roaming\npm-cache\_logs\2017-07-01T00_11_29_2
95Z-debug.log

If the rest of the source would help you can see it here

"All remaining requests return the React app, so it can handle routing"

That line is a comment inside the server's package.json. I want to know what that line means? Are you referring to React Router routing or Express routing?

unable to find the index.html

Hi,

I have followed the step to deploy create react app + node js and getting following error
Could not find a required file.
Jan 08 20:01:55 bu-admin-app app/web.1: Name: index.html
Jan 08 20:01:55 bu-admin-app app/web.1: Searched in: /app/public

As I moved the public and src folder insider react-ui this will happen. Do I miss any other setting for react so that it search in /app/react-ui/public instead of app/public .

How to debug with vscode?

I cannot make it work for the server part..

Could use a command to run locally

This configuration is great for deploying to Heroku, but it would be really useful to have support for testing locally, using a development server for the frontend and running both that and the server simultaneously.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

`postinstall` fails for local `npm install` on Windows

Replace postinstall with heroku-postbuild.

Cannot deploy with same setup

Counting objects: 40, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (39/39), done.
Writing objects: 100% (40/40), 45.43 KiB | 0 bytes/s, done.
Total 40 (delta 24), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> React.js (create-react-app) multi app detected
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
remote: =====> Detected Framework: Multipack
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
remote: =====> Detected Framework: Node.js
remote: 
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=false
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=development
remote:        NODE_MODULES_CACHE=true
remote: 
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:        
remote:        Resolving node version 6.x via semver.io...
remote:        Downloading and installing node 6.11.0...
remote:        Detected package-lock.json: defaulting npm to version 5.x.x
remote:        Resolving npm version 5.x.x via semver.io...
remote:        Downloading and installing npm 5.0.3 (replacing version 3.10.10)...
remote: 
remote: -----> Restoring cache
remote:        Skipping cache restore (new-signature)
remote: 
remote: -----> Building dependencies
remote:        Installing node modules (package.json)
remote:        
remote:        > [email protected] install /tmp/build_23bc4d74a9d03a2306be69b5c350cee8/node_modules/fsevents
remote:        > node install
remote:        
remote:        added 393 packages in 14.073s
remote:        Running heroku-postbuild
remote:        
remote:        > [email protected] heroku-postbuild /tmp/build_23bc4d74a9d03a2306be69b5c350cee8
remote:        > cd client/ && npm install --only=dev && npm install && npm run build
remote:        
remote:        
remote:        > [email protected] install /tmp/build_23bc4d74a9d03a2306be69b5c350cee8/client/node_modules/fsevents
remote:        > node-pre-gyp install --fallback-to-build
remote:        
remote: node-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.0.17/fse-v1.0.17-node-v48-linux-x64.tar.gz 
remote: node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v48 ABI) (falling back to source compile with node-gyp) 
remote:        make: Entering directory '/tmp/build_23bc4d74a9d03a2306be69b5c350cee8/client/node_modules/fsevents/build'
remote:        SOLINK_MODULE(target) Release/obj.target/.node
remote:        COPY Release/.node
remote:        make: Leaving directory '/tmp/build_23bc4d74a9d03a2306be69b5c350cee8/client/node_modules/fsevents/build'
remote:        added 1104 packages in 39.311s
remote:        updated 120 packages in 10.805s
remote:        
remote:        > [email protected] build /tmp/build_23bc4d74a9d03a2306be69b5c350cee8/client
remote:        > react-scripts build
remote:        
remote:        Creating an optimized production build...
remote:        Failed to compile.
remote:        
remote:        Module not found: Error: Can't resolve 'whatwg-fetch' in '/tmp/build_23bc4d74a9d03a2306be69b5c350cee8/client/node_modules/react-scripts/config'
remote:        
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! [email protected] build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR! 
remote: npm ERR! Failed at the [email protected] build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote: 
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /app/.npm/_logs/2017-06-26T18_30_34_423Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! [email protected] heroku-postbuild: `cd client/ && npm install --only=dev && npm install && npm run build`
remote: npm ERR! Exit status 1
remote: npm ERR! 
remote: npm ERR! Failed at the [email protected] heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote: 
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /app/.npm/_logs/2017-06-26T18_30_34_440Z-debug.log
remote: 
remote: -----> Build failed
remote:        
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:        
remote:        Some possible problems:
remote:        
remote:        - Node version not specified in package.json
remote:        https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:        
remote:        Love,
remote:        Heroku
remote:        
remote:  !     Push rejected, failed to compile React.js (create-react-app) multi app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !       Push rejected to rocky-bayou-74141.
remote: 
To https://git.heroku.com/rocky-bayou-74141.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/rocky-bayou-74141.git'

How to add CSS modules?

Edit; forgot to run npm eject. Whoops.

Failing to load images

Trying to load images you get as a component prop
<img src={process.env.PUBLIC_URL} + '/' + props.img} />

Doesn't work in Heroku.
Image address will lead to the same page.
your-app.herokuapp.com/myImages/myImage.png - loads the page, not the image.

Building locally using CRA build works as expected.

Heroku Deployment (CRACO)

Hello I keep getting this error in Heroku when I try to deploy can't get it to build correctly and we don't know what we are doing wrong. it's a MERN app using tailwind CSS and CRACO

`-----> Building on the Heroku-20 stack
-----> Using buildpacks:
1. heroku/nodejs
2. https://github.com/mars/heroku-cra-node
-----> 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): unspecified
engines.npm (package.json): unspecified (use default)

   Resolving node version 14.x...
   Downloading and installing node 14.17.4...
   Using default npm version: 6.14.14

-----> Restoring cache
- node_modules

-----> Installing dependencies
Installing node modules

   > [email protected] install /tmp/build_cc6cc312
   > cd server && npm i && cd ../react-ui && npm i && cd ../server && npm run seed
   
   
   > [email protected] install /tmp/build_cc6cc312/server/node_modules/bcrypt
   > node-pre-gyp install --fallback-to-build
   
   [bcrypt] Success: "/tmp/build_cc6cc312/server/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node" is installed via remote
   
   > [email protected] postinstall /tmp/build_cc6cc312/server/node_modules/core-js-pure
   > node -e "try{require('./postinstall')}catch(e){}"
   
   
   > @apollo/[email protected] postinstall /tmp/build_cc6cc312/server/node_modules/@apollo/protobufjs
   > node scripts/postinstall
   
   added 269 packages from 359 contributors and audited 383 packages in 9.49s
   
   32 packages are looking for funding
     run `npm fund` for details
   
   found 0 vulnerabilities
   
   
   > @fortawesome/[email protected] postinstall /tmp/build_cc6cc312/react-ui/node_modules/@fortawesome/fontawesome-common-types
   > node attribution.js
   
   Font Awesome Free 0.2.36 by @fontawesome - https://fontawesome.com
   License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
   
   
   > [email protected] postinstall /tmp/build_cc6cc312/react-ui/node_modules/babel-runtime/node_modules/core-js
   > node -e "try{require('./postinstall')}catch(e){}"
   
   
   > [email protected] postinstall /tmp/build_cc6cc312/react-ui/node_modules/core-js
   > node -e "try{require('./postinstall')}catch(e){}"
   
   
   > [email protected] postinstall /tmp/build_cc6cc312/react-ui/node_modules/core-js-pure
   > node -e "try{require('./postinstall')}catch(e){}"
   
   
   > [email protected] postinstall /tmp/build_cc6cc312/react-ui/node_modules/ejs
   > node ./postinstall.js
   
   
   > @fortawesome/[email protected] postinstall /tmp/build_cc6cc312/react-ui/node_modules/@fortawesome/fontawesome-svg-core
   > node attribution.js
   
   Font Awesome Free 1.2.36 by @fontawesome - https://fontawesome.com
   License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
   
   
   > @fortawesome/[email protected] postinstall /tmp/build_cc6cc312/react-ui/node_modules/@fortawesome/free-brands-svg-icons
   > node attribution.js
   
   Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
   License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
   
   
   > @fortawesome/[email protected] postinstall /tmp/build_cc6cc312/react-ui/node_modules/@fortawesome/free-regular-svg-icons
   > node attribution.js
   
   Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
   License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
   
   
   > @fortawesome/[email protected] postinstall /tmp/build_cc6cc312/react-ui/node_modules/@fortawesome/free-solid-svg-icons
   > node attribution.js
   
   Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
   License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
   
   added 1923 packages from 806 contributors in 52.925s
   
   153 packages are looking for funding
     run `npm fund` for details
   
   
   > [email protected] seed /tmp/build_cc6cc312/server
   > node config/seeds.js
   
   seeded
   products seeded
   users seeded
   added 68 packages in 75.215s

-----> Build
Running build

   > [email protected] build /tmp/build_cc6cc312
   > cd react-ui/ && npm run build
   
   
   > [email protected] build /tmp/build_cc6cc312/react-ui
   > craco build
   
   Creating an optimized production build...
   Compiled successfully.
   
   File sizes after gzip:
   
     133.76 KB (+91.8 KB)  build/static/js/2.b084d92d.chunk.js
     9.81 KB (+9.33 KB)    build/static/js/main.33d3c584.chunk.js
     4.43 KB (+2.31 KB)    build/static/css/main.d7f9a0fe.chunk.css
     772 B                 build/static/js/runtime-main.7545a8a1.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 57 packages and audited 11 packages in 2.491s

   6 packages are looking for funding
     run `npm fund` for details
   
   found 0 vulnerabilities

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

API call failed: fresh install

1. fresh clone & install & start

hub clone mars/heroku-cra-node
cd heroku-cra-node/
npm install && npm start

# in a new tab
cd heroku-cra-node/react-ui
npm install && npm start

2. load localhost:3000

3. assert the api request to /api fails as 404

question

Did I miss a step somewhere?

I can't get this to work with apple app site association.

I migrated over my CRA app to this from the old buildpack.

This solved it for me before, mars/create-react-app-buildpack#19, but with this new buildpack, I don't think static.json is used, right?

In index.js, I've tried...

app.get('/apple-app-site-association', function(request, response) {
  response.sendFile(path.resolve(__dirname, '../react-ui/build', 'apple-app-site-association'))
})

Doesn't seem to do anything.

Unnecessary polyfill

Polyfilling fetch is unnecessary, create-react-app already does so among others.

Development deploying on cloud9 error

I am trying to get this to work on Cloud9 for development. It works on Heroku as intended.
I changed the port in server/index.js to 8080 from 5000, because this is what I think Cloud9 uses.
Following the local deployment instruction, after running the npm start in the react-ui directory, i get the error Something is already running on port 8080, and asks if you want to use another port. Then it uses port 8081.
Both ports 8080 and 8081 display the error: "Error: ENOENT: no such file or directory, stat '~/react-ui/build/index.html' at Error (native)"