CODEWITHSUNDEEP
node.jsreactjsheroku
JayS
JayS

Reputation: 1

My react node app not reading data from backend after deploying on heroku

I am able to run my project locally without any errors but on heroku it's stuck on initial login/signup page. I assume that's because it's not interacting with the backend and only displaying frontend.

This is what my project structure looks like,

Project Structure

Content of package.json of my root folder which is react frontend

frontend/package.json

{
  "name": "cook-it",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/react-hooks": "4.0.0",
    "@material-ui/core": "4.11.3",
    "@material-ui/lab": "4.0.0-alpha.57",
    "@testing-library/jest-dom": "5.11.9",
    "@testing-library/react": "11.2.5",
    "@testing-library/user-event": "12.8.0",
    "add": "2.0.6",
    "antd": "4.15.0",
    "apollo-cache-inmemory": "1.6.6",
    "apollo-client": "2.6.10",
    "apollo-link-context": "1.0.20",
    "apollo-link-http": "1.5.17",
    "firebase": "8.3.1",
    "graphql": "15.5.0",
    "graphql-tag": "2.11.0",
    "jwt-decode": "3.1.2",
    "react": "17.0.1",
    "react-bootstrap": "1.5.1",
    "react-dom": "17.0.1",
    "react-router-dom": "5.2.0",
    "react-scripts": "4.0.3",
    "semantic-ui-css": "2.4.1",
    "semantic-ui-react": "2.0.3",
    "web-vitals": "1.1.0",
    "yarn": "^1.22.10"
  },
  "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"
    ]
  }
}

frontend/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import 'antd/dist/antd.css';
import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { AuthProvider } from './context/auth';
import 'semantic-ui-css/semantic.min.css'
const httpLink = createHttpLink({
    uri: 'http://localhost:5000/'
});

const authLink = setContext(() => {
    const token = localStorage.getItem('jwtToken');
    return {
        headers: {
            Authorization: token ? `Bearer ${token}` : ''
        }
    };
});

const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
});




ReactDOM.render(

    <ApolloProvider client={client}>
        <AuthProvider>
            <App />
        </AuthProvider>
    </ApolloProvider>,
    document.getElementById('root')
);

frontend/backend/package.json

{
  "name": "merng",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "nodemon index",
    "start": "node index"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "apollo-server": "^2.24.0",
    "bcryptjs": "^2.4.3",
    "csvtojson": "^2.0.10",
    "graphql": "^14.3.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.12.7",
    "react-router-dom": "^5.0.1",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.87.2"
  },
  "devDependencies": {
    "nodemon": "^1.19.1"
  }
}

frontend/backend/index.js

const { ApolloServer } = require('apollo-server');
const mongoose = require('mongoose');

const typeDefs = require('./graphql/typeDefs');
const resolvers = require('./graphql/resolvers');
const { MONGODB } = require('./config.js');

const ports = process.env.PORT || 5000
const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: ({ req }) => ({ req })
});

mongoose
  .connect(MONGODB, { useNewUrlParser: true,useUnifiedTopology: true })
  .then(() => {
    console.log('MongoDB Connected');
    return server.listen({ port: ports });
  })
  .then((res) => {
    console.log(`Server running at ${res.url}`);
  });

Upvotes: 0

Views: 329

Answers (1)

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

You deployed your backend to heroku

But did not update backend url in your frontend app

const httpLink = createHttpLink({
    uri: 'http://localhost:5000/' // <-- here
});

Upvotes: 0

Related Questions