I am trying to deploy my React js app (uses react-router v4 and webpack) to heroku.
Everything builds without errors according to heroku as its going through its deployment scripts (see below) unfortunately when actually visiting the page it says page is not found.
originally Heroku was giving build errors but I was able to eliminate the build errors, now that it successfully builds I dont know where to troubleshoot next.
my entire project code: https://github.com/aronlmin/react_doesnt_work/blob/master/webpack.config.js
aronlilland:backbone_cac_client (master)$ git push heroku master
Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 315 bytes | 0 bytes/s, done.
Total 3 (delta 2), 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.10.3...
remote: Using default npm version: 3.10.10
remote: Resolving yarn version (latest) via semver.io...
remote: Downloading and installing yarn (0.23.4)...
remote: Installed yarn 0.23.4
remote:
remote: -----> Restoring cache
remote: ! node_modules checked into source control
remote: https://blog.heroku.com/node-habits-2016#9-only-git-the-important-bits
remote:
remote: Loading 2 from cacheDirectories (default):
remote: - node_modules
remote: - bower_components (not cached - skipping)
remote:
remote: -----> Building dependencies
remote: Installing node modules (yarn.lock)
remote: yarn install v0.23.4
remote: [1/4] Resolving packages...
remote: [2/4] Fetching packages...
remote: warning [email protected]: The platform "linux" is incompatible with this module.
remote: info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote: [3/4] Linking dependencies...
remote: [4/4] Building fresh packages...
remote: $ npm run build
remote:
remote: > [email protected] build /tmp/build_c94a0cec125e5c3a562ef7e154841a47
remote: > webpack -p
remote:
remote: Hash: d28b920eb76ccc581c9a
remote: Version: webpack 2.5.0
remote: Time: 13581ms
remote: Asset Size Chunks Chunk Names
remote: bundle.js 386 kB 0 [emitted] [big] main
remote: index.html 383 bytes [emitted]
remote: [0] ./~/react/react.js 56 bytes {0} [built]
remote: [1] ./~/fbjs/lib/invariant.js 1.63 kB {0} [built]
remote: [26] ./~/react-dom/index.js 59 bytes {0} [built]
remote: [35] ./~/react/lib/React.js 3.32 kB {0} [built]
remote: [43] ./~/react-dom/lib/EventPluginHub.js 9.11 kB {0} [built]
remote: [67] ./~/react-grid-system/build/index.js 1.32 kB {0} [built]
remote: [182] ./src/app/App.jsx 4.01 kB {0} [built]
remote: [183] ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 1.04 kB {0} [built]
remote: [185] ./src/app/Router.jsx 3.75 kB {0} [built]
remote: [191] ./src/index.js 723 bytes {0} [built]
remote: [310] ./~/material-ui/styles/MuiThemeProvider.js 2.15 kB {0} [built]
remote: [342] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
remote: [405] ./~/react-router-dom/BrowserRouter.js 2.57 kB {0} [built]
remote: [428] ./~/react-tap-event-plugin/src/defaultClickRejectionStrategy.js 151 bytes {0} [built]
remote: [446] ./src/app/App.css 1 kB {0} [built]
remote: + 437 hidden modules
remote: Child html-webpack-plugin for "index.html":
remote: [0] ./~/lodash/lodash.js 540 kB {0} [built]
remote: [1] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 694 bytes {0} [built]
remote: [2] (webpack)/buildin/global.js 509 bytes {0} [built]
remote: [3] (webpack)/buildin/module.js 517 bytes {0} [built]
remote: Done in 43.06s.
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: =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
remote: =====> Detected Framework: React.js (create-react-app)
remote: Using existing `static.json`
remote: Enabling runtime environment variables
remote:
remote: > [email protected] build /tmp/build_c94a0cec125e5c3a562ef7e154841a47
remote: > webpack -p
remote:
remote: Hash: d28b920eb76ccc581c9a
remote: Version: webpack 2.5.0
remote: Time: 13451ms
remote: Asset Size Chunks Chunk Names
remote: bundle.js 386 kB 0 [emitted] [big] main
remote: index.html 383 bytes [emitted]
remote: [0] ./~/react/react.js 56 bytes {0} [built]
remote: [1] ./~/fbjs/lib/invariant.js 1.63 kB {0} [built]
remote: [26] ./~/react-dom/index.js 59 bytes {0} [built]
remote: [35] ./~/react/lib/React.js 3.32 kB {0} [built]
remote: [43] ./~/react-dom/lib/EventPluginHub.js 9.11 kB {0} [built]
remote: [67] ./~/react-grid-system/build/index.js 1.32 kB {0} [built]
remote: [182] ./src/app/App.jsx 4.01 kB {0} [built]
remote: [183] ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 1.04 kB {0} [built]
remote: [185] ./src/app/Router.jsx 3.75 kB {0} [built]
remote: [191] ./src/index.js 723 bytes {0} [built]
remote: [310] ./~/material-ui/styles/MuiThemeProvider.js 2.15 kB {0} [built]
remote: [342] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
remote: [405] ./~/react-router-dom/BrowserRouter.js 2.57 kB {0} [built]
remote: [428] ./~/react-tap-event-plugin/src/defaultClickRejectionStrategy.js 151 bytes {0} [built]
remote: [446] ./src/app/App.css 1 kB {0} [built]
remote: + 437 hidden modules
remote: Child html-webpack-plugin for "index.html":
remote: [0] ./~/lodash/lodash.js 540 kB {0} [built]
remote: [1] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 694 bytes {0} [built]
remote: [2] (webpack)/buildin/global.js 509 bytes {0} [built]
remote: [3] (webpack)/buildin/module.js 517 bytes {0} [built]
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
remote: =====> Detected Framework: Static HTML
remote: % Total % Received % Xferd Average Speed Time Time Time Current
remote: Dload Upload Total Spent Left Speed
remote: 100 838k 100 838k 0 0 17.5M 0 --:--:-- --:--:-- --:--:-- 17.8M
remote: -----> Installed directory to /app/bin
remote: Using release configuration from last framework (Static HTML).
remote: -----> Discovering process types
remote: Procfile declares types -> (none)
remote: Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote: Done: 31.7M
remote: -----> Launching...
remote: Released v5
remote: https://cacbackboneclient.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/cacbackboneclient.git
9c5b5c6..d6cd99c master -> master
The error was a buildpack issue, the buildpack I was using (a specific third party buildpack recommended by a third party service to deploy a default bare bones react app)
My app was unable to be located because the buildpack wasnt pointing the server to my index.html file inside the dist folder I had created, it was looking for a different folder entirely
PLEASE TAKE NOTE
if you are having deployment issues with ANY single page application, use the following buildpack and make sure you are specifying the root folder of your bundled application