Reactjs app building successfully when deploying with Heroku but still getting Application Error

Question

I'm having a bit of trouble getting my React application successfully running with Heroku. It is building successfully but im getting the Application Error notice when visiting the URL.

I was wondering can you help. I've searched for the answer to my problem but no luck.

Here's some information on the application I've built an app with the create-react-app command.

I'm running Node v6.10.2 on my computer.

To deploy the app I entered the following command from my project folder:

npm run build

(This created a "build" folder.)

Then I entered the following command:

cd build

I created a package.json file (for the build folder) as there was none.

{
  "name": "alien_relatives",
"version": "0.1.0",
"private": true,

"dependencies": {
"classnames": "^2.2.5",  
"react": "^15.6.1",
"react-dom": "^15.6.1"
  },

"devDependencies": {  
"react-scripts": "1.0.10"
  },
 "scripts": {
    "start": "react-scripts start",
"build": "react-scripts build", 
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
  }
}

In the build folder I ran the following commands.

git init
git add .
git commit -m "all files"

heroku create alienrelatives
git push heroku master

The following was output to the console:

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):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:
remote:        Resolving node version 6.x...
remote:        Downloading and installing node 6.11.1...
remote:        Using default npm 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:        alien_relatives@0.1.0 /tmp/build_e0b8b2ea1ffb5d7006e8f910f2683e47

remote:        +-- classnames@2.2.5
remote:        +-- react@15.6.1
remote:        ¦ +-- create-react-class@15.6.0
remote:        ¦ +-- fbjs@0.8.14
remote:        ¦ ¦ +-- core-js@1.2.7
remote:        ¦ ¦ +-- isomorphic-fetch@2.2.1
remote:        ¦ ¦ ¦ +-- node-fetch@1.7.1
remote:        ¦ ¦ ¦ ¦ +-- encoding@0.1.12
remote:        ¦ ¦ ¦ ¦ ¦ +-- iconv-lite@0.4.18
remote:        ¦ ¦ ¦ ¦ +-- is-stream@1.1.0
remote:        ¦ ¦ ¦ +-- whatwg-fetch@2.0.3
remote:        ¦ ¦ +-- promise@7.3.1
remote:        ¦ ¦ ¦ +-- asap@2.0.6
remote:        ¦ ¦ +-- setimmediate@1.0.5
remote:        ¦ ¦ +-- ua-parser-js@0.7.14
remote:        ¦ +-- loose-envify@1.3.1
remote:        ¦ ¦ +-- js-tokens@3.0.2
remote:        ¦ +-- object-assign@4.1.1
remote:        ¦ +-- prop-types@15.5.10
remote:        +-- react-dom@15.6.1
remote:
remote:
remote: -----> Caching build
remote:        Clearing previous node cache
remote:        Saving 2 cacheDirectories (default):
remote:        - node_modules
remote:        - bower_components (nothing to cache)
remote:
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote:        Done: 16.7M
remote: -----> Launching...
remote:        Released v4
remote:        https://alienrelatives.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/alienrelatives.git
   caf3245..11c44c2  master -> master

But when i visit the URL it says

Application error
An error occurred in the application and your page could not be served. 
If you are the application owner, check your logs for details.

When I open the developer tools in the browser I see this in the console:

(unknown) Uncaught DOMException: Blocked a frame with origin "https://www.herokucdn.com" from accessing a cross-origin frame.

at <anonymous>:1:15

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

Answer 1

Clear and concise video explanation, works perfectly for your problem using Heroku's Builpack feature under Settings.

https://www.youtube.com/watch?v=tA4Fl1dZgjc

Answer 2

After I toke about a day searching about this, so I finally found this create-react-app-buildpack so you have to do this in your terminal:-

1. Go to your application file and run this command if you already have exist application: heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git.
2. then commit what you did like : git commit -am "create-react-buildpack.
3. Then Push to your Heroku repo git push heroku master.
4. after that you need to restart your dynos in heroku so run this command in your terminal heroku restart then heroku open

Answer 3

I contacted Heroku support and I got it sorted so here's the answer:

To deploy an app (on Heroku) which was created with the create-react-app command, you need to be using a custom buildpack, not the standard Node.js one.

For more details see: https://github.com/mars/create-react-app-buildpack#quick-start

So I needed to run the following commands (in my project folder) in order to set the new buildpack and then also push my project to heroku once again:

heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git

git push heroku master