CODEWITHSUNDEEP
javascriptnode.jsreactjsheroku
Алексей Николаев
Алексей Николаев

Reputation: 117

Connecting React frontend and Node.js backend at Heroku

I have deployed my simple React app to Heroku - https://projectslist.herokuapp.com It works just fine except for the server part which doesn't work at all. I've seen the logs and it says that my only server method - /sendmail - returns error 404. How can i fix this problem? I suppose that I should edit something in package.json file but I'm not sure what I should change. Here's my github repo - https://github.com/VasVV/Projects-list

Upvotes: 1

Views: 631

Answers (2)

Andy
Andy

Reputation: 63524

Add a Procfile to your root folder that says something like:

web: node server/index.js -port 8000

And a small addition to the scripts part of your package.json that tells Heroku that once it's fetched all the dependencies for your project it should build it, although that may not be necessary now.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "heroku-postbuild": "npm run build"
},

Upvotes: 1

user14849955
user14849955

Reputation:

Try putting your server files in the root directory folder and everything else in a client folder within the root:

1.) Put your server.js into the root directory

2.) Add these commands to your root package.json...

"scripts": {
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },
  "proxy": "http://localhost:4242/"

3.) Create a client folder and put your src and public folders in it.

4.) Add these commands to your client folders package.json...

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Your file structure from root should look like this:

Root
  client
    Public
    Src
    package.json
  server.js
  package.json

enter image description here

5.) Move all your server-related stuff into the root folder, that way, you don't have to cd into any nested folders.

Upvotes: 1

Related Questions