Deployment React/Node App in Heroku fails

Question

1. I cant figure out whats wrong, please help!

   -----> 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 8.x... Downloading and installing node 8.11.4... Using default npm version: 5.6.0 -----> Restoring cache Loading 2 from cacheDirectories (default):

   • node_modules
   • bower_components (not cached - skipping) -----> Building dependencies Installing node modules (package.json + package-lock) up to date in 5.321s -----> Caching build Clearing previous node cache Saving 2 cacheDirectories (default):
   • node_modules

   • bower_components (nothing to cache) -----> Pruning devDependencies Skipping because npm 5.6.0 sometimes fails when running 'npm prune' due to a known issue https://github.com/npm/npm/issues/19356

     You can silence this warning by updating to at least npm 5.7.1 in your package.json https://devcenter.heroku.com/articles/nodejs-support#specifying-an-npm-version -----> Build succeeded! -----> Discovering process types Procfile declares types -> (none) Default types for buildpack -> web -----> Compressing... Done: 33.9M -----> Launching... Released v36 https://space-hangman.herokuapp.com/ deployed to Heroku

Here is my package.json:

{
  "name": "github-fetcher-fullstack-v2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "react-dev": "webpack -d --watch",
    "start": "nodemon server/index.js"
  },
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "webpack": "^2.2.1"
  },
  "dependencies": {
    "angular": "^1.6.3",
    "animate.css": "^3.7.0",
    "bluebird": "^3.5.1",
    "body-parser": "^1.17.2",
    "bootstrap": "^4.1.3",
    "express": "^4.15.0",
    "jquery": "^3.1.1",
    "moment": "^2.22.2",
    "mongoose": "^4.8.6",
    "mysql": "^2.13.0",
    "popper.js": "^1.14.4",
    "react": "^15.4.2",
    "react-animated-css": "^1.0.4",
    "react-dom": "^15.4.2",
    "react-router-dom": "^4.3.1",
    "react-simple-popover": "^0.2.4",
    "request": "^2.88.0",
    "unirest": "^0.5.1"
  }
}

Answer 1

You can run easily your project under heroku using express.js. Your all dependencies must be under dependencies

package.json

  "scripts": {
    "build": "Add yours",
    "postinstall": "Same with build",
    "start": "node server.js" // Heroku looks for this
  },
  "dependencies": {
     Add all your dependencies here
  }

Create server.js file under root

//Install express server
const express = require('express');
const path = require('path');

const app = express();

// Your dist folder
app.use(express.static(__dirname + '/react-client/dist/'));

app.get('/*', function(req,res) {
  res.sendFile(path.join(__dirname+'/react-client/dist/index.html'));
});

// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);

SynonymFinder.js

.header("X-Mashape-Key", process.env.SYNONYMKEY) // You can use Environment Variables for API Key

Add your API Key to Config Vars under your Heroku Project Settings Page

Answer 2

Try specifying your Node and npm versions in engines as an object;

package.json:

{
"name": "github-fetcher-fullstack-v2", 
  ...

//starts here 

 "engines": {    
    "node": "10.x"  
    "npm": ""       
  }

 //ends here

and you might also need a server if your site is static, check out this link