Push rejected, failed to compile Node.js app (using Reactjs) - reactjs

I'm trying to deploy a react app to Heroku, but I keep getting the error "Push rejected, failed to compile Node.js app".
I've looked back at the other two react-apps I've deployed to Heroku to see if I forgot to add anything and I can't find any discrepancies. I see that it says it can't locate the index.html file, but I see that it is there. I then see something about "failing at portfolio#.1.0 build".
-----> Build
remote: Running build
remote:
remote: > portfolio#0.1.0 build
/tmp/build_fcb9f920aefd93116879e7ef6c75d3cc
remote: > react-scripts build
remote:
remote: Could not find a required file.
remote: Name: index.html
remote: Searched in:
/tmp/build_fcb9f920aefd93116879e7ef6c75d3cc/public
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! portfolio#0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the portfolio#0.1.0 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! /tmp/npmcache.L4l4f/_logs/2019-09-
03T15_47_28_491Z-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
remote: help: https://help.heroku.com/
remote:
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 arcane-earth-93557.
Here is my package.json file as well
{
"name": "portfolio",
"version": "0.1.0",
"private": true,
"engines": {
"npm": "6.9.0",
"node": "10.16.0"
},
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-icons": "^3.7.0",
"react-router": "^2.0.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.1.1",
"react-scroll": "^1.7.13"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I just want to know why I can't deploy.

Related

cannot deploy to heroku using google map api dependency

Heroku errors:
Total 13 (delta 9), reused 0 (delta 0), pack-reused 0
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Building on the Heroku-20 stack
remote: -----> Determining which buildpack to use for this app
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): 16.x
remote: engines.npm (package.json): unspecified (use default)
remote: Resolving node version 16.x...
remote: Downloading and installing node 16.16.0...
remote: Using default npm version: 8.11.0
remote:
remote: -----> Installing dependencies
remote: Installing node modules
remote: npm ERR! code ERESOLVE
remote: npm ERR! ERESOLVE could not resolve
remote: npm ERR! While resolving: #reach/combobox#0.16.5
remote: npm ERR! Found: react#18.2.0
remote: npm ERR! node_modules/react
remote: npm ERR! react#"^18.2.0" from the root project
remote: npm ERR! peer react#"^16.8 || ^17 || ^18" from #react-google-maps/api#2.12.0
remote: npm ERR! node_modules/#react-google-maps/api
remote: npm ERR! #react-google-maps/api#"^2.12.0" from the root project
remote: npm ERR! 9 more (#testing-library/react, react-avatar, react-dom, ...)
remote: npm ERR! Could not resolve dependency:
remote: npm ERR! peer react#"^16.8.0 || 17.x" from #reach/combobox#0.16.5
remote: npm ERR! node_modules/#reach/combobox
remote: npm ERR! #reach/combobox#"^0.16.5" from the root project
remote: npm ERR!
remote: npm ERR! Conflicting peer dependency: react#17.0.2
remote: npm ERR! node_modules/react
remote: npm ERR! peer react#"^16.8.0 || 17.x" from #reach/combobox#0.16.5
remote: npm ERR! node_modules/#reach/combobox
remote: npm ERR! #reach/combobox#"^0.16.5" from the root project
I am trying to deploy this react mern-stack app to heroku for class, which uses certain google map api and dependencies. I tried --legacy-peer-deps and even --force (force completely broke my code), tried almost everything. Nothing seems to be working. Been trying at this for a while now and am completely blocked. I don't know what else to do. I appreciate any insight to this.
Heres my package.json
{
"name": "find-furry-friends",
"version": "0.1.0",
"engines": {
"node": "16.x"
},
"private": true,
"dependencies": {
"#hookform/resolvers": "^2.9.4",
"#reach/combobox": "^0.16.5",
"#react-google-maps/api": "^2.12.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"bcrypt": "^5.0.1",
"bootstrap": "^5.1.3",
"dotenv": "^16.0.1",
"express": "^4.18.1",
"jsonwebtoken": "^8.5.1",
"moment": "^2.29.4",
"mongoose": "^6.4.0",
"morgan": "^1.10.0",
"petfinder-client": "^1.0.2",
"react": "^18.2.0",
"react-avatar": "^5.0.1",
"react-dom": "^18.0.2",
"react-file-base64": "^1.0.3",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-tilty": "^2.0.3",
"serve-favicon": "^2.5.0",
"use-places-autocomplete": "^4.0.0",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:3001"
}
The problem is that #reach/combobox wants an older version of React (either 16 0r 17) but you have React 18.2.0 installed at the top level of your package.json. Try downgrading React to version 17:
npm install react#17
Then push to Heroku again.

Heroku push failing with Create-React-App

I'm trying to deploy my create-react-app using Heroku. When I do git push heroku master, the build fails.
This is the error log:
-----> 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
NODE_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 12.x...
Downloading and installing node 12.16.3...
Using default npm version: 6.14.4
-----> Installing dependencies
Installing node modules (package.json + package-lock)
> nodemailer#6.4.6 postinstall /tmp/build_258ba2b79ac9e7091bc7dd79a031dd4f/node_modules/nodemailer
> node -e "try{require('./postinstall')}catch(e){}"
=== Nodemailer 6.4.6 ===
Thank you for using Nodemailer for your email sending needs! While Nodemailer
itself is mostly meant to be a SMTP client there are other related projects in
the Nodemailer project as well.
For example:
> IMAP API ( https://imapapi.com ) is a server application to easily access
IMAP accounts via REST API
> NodemailerApp ( https://nodemailer.com/app/ ) is a cross platform GUI app to
debug emails
> styled-components#4.2.0 postinstall /tmp/build_258ba2b79ac9e7091bc7dd79a031dd4f/node_modules/styled-components
> node ./scripts/postinstall.js || exit 0
Use styled-components at work? Consider supporting our development efforts at https://opencollective.com/styled-components
added 1914 packages from 1179 contributors and audited 2053 packages in 49.627s
1 package is looking for funding
run `npm fund` for details
found 56466 vulnerabilities (39341 low, 26 moderate, 17098 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
-----> Build
Running build
> juliesong#0.1.0 build /tmp/build_258ba2b79ac9e7091bc7dd79a031dd4f
> react-scripts build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`
Failed to compile.
./src/components/PageIntro.js
Cannot find module: 'axios'. Make sure this package is installed.
You can install this package by running: npm install axios.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! juliesong#0.1.0 build: `react-scripts build `
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the juliesong#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.6BFeR/_logs/2020-05-17T06_58_22_399Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
Some possible problems:
- Node version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
- A module may be missing from 'dependencies' in package.json
https://devcenter.heroku.com/articles/troubleshooting-node-deploys#ensure-you-aren-t-relying-on-untracked-dependencies
Love,
Heroku
! Push rejected, failed to compile React.js (create-react-app) multi app.
! Push failed
Here's my package.json file, in case it helps:
{
"name": "juliesong",
"version": "0.1.0",
"private": true,
"homepage": "https://www.juliesong.me",
"dependencies": {
"cors": "^2.8.5",
"express": "^4.17.1",
"nodemailer": "^6.4.6",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-preloaders": "^3.0.3",
"react-responsive": "^6.1.2",
"react-responsive-carousel": "^3.1.49",
"react-responsive-simple": "^0.1.2",
"react-router-dom": "^4.1.1",
"react-router-hash-link": "^1.2.1",
"react-scripts": "^3.0.0",
"styled-components": "^4.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build ",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public",
"predeploy": "npm run build && cp build/index.html build/404.html",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/core": "^7.4.3",
"#storybook/addon-actions": "^5.0.6",
"#storybook/addon-links": "^5.0.6",
"#storybook/addons": "^5.0.6",
"#storybook/react": "^5.0.6",
"babel-loader": "^8.0.5",
"gh-pages": "^2.2.0"
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/jiyoonee/Website-Portfolio.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/jiyoonee/Website-Portfolio/issues"
}
}
I did try to work around with gh-pages but it didn't seem to work so I tried switching to Heroku. It's my first time using it so any help on this issue would be appreciated. Thanks!

react push to heroku and getting following errors

newbie here - first time trying to push react frontend to heroku. i have tried what heroku has asked for and is still not working. think i made it worse by implementing suggestions when googling...(btw i have this is my index.js file: import {Provider} from 'react-redux')
following list of errors
♥ git push heroku master
Enumerating objects: 39, done.
Counting objects: 100% (39/39), done.
Delta compression using up to 8 threads
Compressing objects: 100% (37/37), done.
Writing objects: 100% (39/39), 140.24 KiB | 6.37 MiB/s, done.
Total 39 (delta 5), 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_ENV=production
remote: NODE_MODULES_CACHE=true
remote: NODE_VERBOSE=false
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version 10.x...
remote: Downloading and installing node 10.16.3...
remote: Using default npm version: 6.9.0
remote:
remote: -----> Installing dependencies
remote: Installing node modules (package.json + package-lock)
remote:
remote: > core-js#2.6.9 postinstall /tmp/build_59a9e22c84972b1649248fcdd072b559/node_modules/babel-runtime/node_modules/core-js
remote: > node scripts/postinstall || echo "ignore"
remote:
remote:
remote: > core-js-pure#3.1.4 postinstall /tmp/build_59a9e22c84972b1649248fcdd072b559/node_modules/core-js-pure
remote: > node scripts/postinstall || echo "ignore"
remote:
remote: added 1386 packages from 676 contributors and audited 902051 packages in 34.626s
remote: found 2 vulnerabilities (1 high, 1 critical)
remote: run `npm audit fix` to fix them, or `npm audit` for details
remote:
remote: -----> Build
remote: Running build
remote:
remote: > kayaks#0.1.0 build /tmp/build_59a9e22c84972b1649248fcdd072b559
remote: > react-scripts build
remote:
remote: Creating an optimized production build...
remote: Failed to compile.
remote:
remote: ./src/index.js
remote: Cannot find module: 'react-redux'. Make sure this package is installed.
remote:
remote: You can install this package by running: npm install react-redux.
remote:
remote:
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! kayaks#0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the kayaks#0.1.0 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! /tmp/npmcache.P3JWe/_logs/2019-10-08T00_50_49_274Z-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: - A module may be missing from 'dependencies' in package.json
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys#ensure-you-aren-t-relying-on-untracked-dependencies
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 kayaks-frontend.
remote:
package.json
{
"name": "kayaks",
"version": "0.1.0",
"private": true,
"engines": {
"npm": "6.11.3",
"node": "12.11.0",
},
"dependencies": {
"cuid": "^1.3.8",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-date-picker": "^7.8.1",
"react-datepicker": "^2.8.0",
"react-dom": "^16.8.6",
"react-dropdown-select": "^3.3.1",
"react-redux": "^7.1.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"react-semantic-ui-datepickers": "^1.11.0",
"redux": "^4.0.4",
"redux-form": "^8.1.0",
"redux-thunk": "^2.3.0",
"semantic-ui": "^2.4.2",
"semantic-ui-calendar-react": "^0.15.2",
"semantic-ui-css": "2.4.1",
"semantic-ui-react": "^0.87.3",
"typescript": "^3.6.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Cannot find module: 'react-redux'. Make sure this package is installed
This is your problem. Have you installed this? Try running npm i and then deploying.
To host a create-react-app on Heroku you must serve the /build folder. You can do it very easily with a node.js express server.
First you'll need to install express so you can run npm i express --save or yarn add express.
Then just add a server.js file to the root of your project serving the /build folder as static content and routing all request to /build/index.html.
const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
app.use(express.static(path.join(__dirname, 'build')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'build/index.html'));
});
app.listen(port, () => {
console.log(`The server is running on port ${port}!`);
});
Lastly, you need to update your npm run start script to node server.js, and use react-scripts start only during development.
"scripts": {
"start": "node server.js",
"dev": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Heroku will run your npm run build and then your npm run start scripts when a new version is deployed.

Heroku deployment failure - cannot import Sass files

Im trying to deploy using Heroku, but im getting an error regarding node-sass, importing sass files.
its seems to be a common problem with node-sass, but I couldn't find why the import of scss files is causing the problem. I've re-installed node-sass but that didn't help.
//package.json
{
"name": "crown-clothing",
"version": "0.1.0",
"private": true,
"dependencies": {
"firebase": "^6.3.5",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.1.0",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"react-stripe-checkout": "^2.6.3",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"reselect": "^4.0.0"
},
"scripts": {
"start": "BROWSER=firefox react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
//error message
Creating an optimized production build...
remote: Failed to compile.
remote:
remote: ./src/components/directory/directory.styles.scss
remote: To import Sass files, you first need to install node-sass.
remote: Run `npm install node-sass` or `yarn add node-sass` inside your workspace.
remote:
remote:
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! crown-clothing#0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the crown-clothing#0.1.0 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! /tmp/npmcache.7gDk8/_logs/2019-08-26T17_18_16_441Z-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
As you can see, the import of sass files is what causing the problem.
Weirdly enough, all I had to do was remove my node-modules folder, reinstall node-sass, and push to github before pushing to heroku. I can't say that they were all necessary but it is working, and didn't have to convert and css filetypes.
So after trying several things like clearing Heroku cache, re-installing node-models and re-deploy that didn't seem to work, I took the following steps:
change all of my .css files to .sass files.
install node-sass(which I already had) and then updating my git repository to the newest version of the app. that did the trick!

npm ERR! missing script: build in REACT DEPLOYED IN HEROKU

I'm trying to deploy a project in Heroku with create-react-app using Node as my server and MongoDB for my database but I'm getting an error. this is my first to deploy a project with React. I have 2 package.json files. One for create-react-app the other is for my node server.
What I did was:
run the build in React,
commit,
create a Heroku app using heroku create -b https://github.com/mars/create-react-app-buildpack.git
I pushed it to Heroku master.
Here are the logs.
Counting objects: 203, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (187/187), done.
Writing objects: 100% (203/203), 191.40 KiB | 5.80 MiB/s, done.
Total 203 (delta 91), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> React.js (create-react-app) multi app detected
remote: -----> Configure create-react-app build environment
remote: Using `NODE_ENV=development`
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 8.x...
remote: Downloading and installing node 8.11.4...
remote: Using default npm version: 5.6.0
remote:
remote: -----> Restoring cache
remote: Skipping cache restore (not-found)
remote:
remote: -----> Building dependencies
remote: Installing node modules (package.json + package-lock)
remote: added 85 packages in 3.391s
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: -----> Pruning devDependencies
remote: Skipping because NODE_ENV is not 'production'
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: Writing `static.json` to support create-react-app
remote: Enabling runtime environment variables
remote: npm ERR! missing script: build
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /app/.npm/_logs/2018-09-04T05_56_24_845Z-debug.log
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 klikie.
remote:
To https://git.heroku.com/klikie.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/klikie.git
this is my package.json in create-react-app
{
"name": "klikme",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8000/",
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.5",
"styled-components": "^3.4.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
this is for my server dep:
{
"name": "klikme",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nodemon server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.18.3",
"express": "^4.16.3",
"mongoose": "^5.2.12",
"morgan": "^1.9.0"
}
}
I added this in my server too since its in the documentation:
app.use(express.static(path.join(__dirname, 'client/build')));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});
So a couple of things I notice based on what you shared here. You are not using the engines section of your package.json file to specify the Node.js version to use on Heroku. It would look something like this:
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"engines": {
"node": "9.3.0",
"npm": "5.6.0"
},
You will also see the version of npm separated out above, Node.js comes bundled with npm, so most of the time you don’t need to specify a separate npm version. However, if you intentionally use a different version of npm locally, you can specify the same version of npm on Heroku.
Lastly, there are Heroku build steps and I do not see that in your main package.json file. Keep in mind that what I have written here does not apply to your create-react-app package.json file because that will be blown away when you deploy to Heroku. create-react-app will cease to exist in Heroku.
So for Heroku specific actions you will want to add something like this to your main package.json file:
"heroku-postbuild":
"NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
In regards to what you added in your server, try writing it this way:
if (process.env.NODE_ENV === 'production') {
// Express will serve up production assets
// like main.js or main.css
app.use(express.static('client/build'));
// Express will serve up the index.html file if
// it doesnt recognize the route
const path = require('path');
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
}
Also, I am assuming this is in your main index.js file and you should also have these two lines of code at the bottom of the file:
const PORT = process.env.PORT || 5000;
app.listen(PORT);

Resources