无法获取/ NodeJS-Heroku-ReactJS

问题描述 投票:0回答:1

我在部署我的应用程序(NodeJS的新版本时遇到了麻烦,它在我的机器上都运行良好,但是在尝试进入该应用程序时,我从heroku中遇到了一个错误

无法获取/

我唯一的BE逻辑已连接到我的Contact.js组件中的表单我试图找到不同的解决方案,但似乎没有任何效果。

文件夹结构

reactapp (FE folder)
 ..build
   ..index.html
 ..src
   ..components
     ..pages
       ..Contact
         ..Contact.js

node_modules
.env
.gitignore
Index.js
package.json
Procfile

Contact.js(逻辑)

  async handleSubmit(e) {
    e.preventDefault();
    this.setState({ name: "", email: "", message: "", isClicked: true });
    setTimeout(() => {
      this.setState({ isClicked: false });
    }, 1000);
    document.querySelector(".form").reset();
    const { name, message, email } = this.state;
    const form = await axios.post("/api/form", {
      name,
      email,
      message
    });
  }

Index.js(BE)

require("dotenv").config();
const express = require("express");
const bodyParser = require("body-parser");
const nodemailer = require("nodemailer");
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.post("/api/form", (req, res) => {
  nodemailer.createTestAccount((err, account) => {
    const htmlEmail = `
  <h3>####</h3>
    <ul>
    <li>###: ${req.body.name}</li>
    <li>Email: ${req.body.email}</li>
    </ul>
    <h3>####</h3>
    <p>${req.body.message}</p>
  `;

    let transporter = nodemailer.createTransport({
      service: "gmail",
      auth: {
        user: process.env.EMAIL,
        pass: process.env.PASSWORD
      }
    });

    let mailOptions = {
      to: "#######@gmail.com",
      replyTo: req.body.email,
      subject: "######",
      text: req.body.message,
      html: htmlEmail
    };

    transporter.sendMail(mailOptions, (err, info) => {
      if (err) {
        return console.log(err);
      } else {
        console.log("Message sent: %s", info.message);
        console.log("Message URL: %s", nodemailer.getTestMessageUrl(info));
      }
    });
  });
});

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`server is listening on port ${PORT}`);
});

package.json

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "server": "nodemon index.js",
    "client": "npm start start --prefix reactapp",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "concurrently": "^5.0.2",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "nodemailer": "^6.4.2",
    "nodemailer-mailgun-transport": "^2.0.0",
    "nodemon": "^2.0.2"
  }
}

我在部署我的应用程序(NodeJS的新手)时遇到了麻烦,它在我的机器上都正常运行,但是尝试进入应用程序时,我从heroku中遇到了一个错误。无法获取/我唯一的BE逻辑是.. 。

node.js reactjs heroku backend contact-form
1个回答
1
投票

Heroku在主文件夹中运行npm install,但是您还必须在reactapp文件夹中运行它。我建议将此添加到您的package.json:

© www.soinside.com 2019 - 2024. All rights reserved.