Блог

Я могу запустить свой проект локально без каких-либо ошибок, но на heroku он застрял на начальной странице входа/регистрации. Я предполагаю, что это потому, что он не взаимодействует с бэкэндом и отображает только интерфейс.

Вот как выглядит структура моего проекта,

Структура проекта

Содержимое package.json моей корневой папки, которая является интерфейсом react

интерфейс/пакет.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')
);
 

интерфейс/серверная часть/пакет.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}`);
  });
 

Вы развернули свой сервер в heroku

Но вы не обновили внутренний URL-адрес в своем интерфейсном приложении

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