Question

我有一个用例，我认为它不是太独特但我遇到了挑战。我的应用程序是用express / EJS编写的，并且在端口35上运行，我想包括反应，所以我正在关注一个教程，并在我现有的应用程序中编写这个应用程序，并在另一个端口上运行。我可以看到两个应用程序在不同的端口上，如果我试图将它们放在他们冲突的同一个端口上。咄。但我想在我的应用程序中运行React以获取某些功能，我该如何实现？如何运行我的节点应用程序并同时做出反应？

我的反应应用程序的依赖项是：

#include <Arduino.h>
#define DEBUG_ESP_HTTP_CLIENT
#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>

//#include <ESP8266HTTPClient.h>

#define USE_SERIAL Serial

#include "ESP8266HTTPClient2.h"

ESP8266WiFiMulti WiFiMulti;

void setup() {
    USE_SERIAL.begin(115200);

    USE_SERIAL.println();

    for(uint8_t t = 4; t > 0; t--) {
        USE_SERIAL.printf("[SETUP] WAIT %d...\n", t);
        USE_SERIAL.flush();
        delay(1000);
    }

    WiFiMulti.addAP("xxxxxxxxxxxx", "yyyyyyyyyyyyyy");
}

void loop() {
 // wait for WiFi connection
    if((WiFiMulti.run() == WL_CONNECTED)) {

        HTTPClient http;

        USE_SERIAL.print("\n---------------------\n[HTTP] begin...\n");
        // configure traged server and url

        http.setReuse(true);
        http.begin("iotmmsp1941648609trial.hanatrial.ondemand.com",
                    443,
                    "/com.sap.iotservices.mms/v1/api/http/data/ab5b0ae0-9e2c-47e2-ac93-0deea935a588");

        http.setAuthorization("Bearer 77eb2493769bb566f5bc346f6d598e7");
        //http.addHeader("Authorization", "Bearer 77eb2493769bb566f5bc346f6d598e7");
        http.addHeader("Content-Type", "application/json;charset=utf-8");
        http.addHeader("cache-control", "no-cache");

        USE_SERIAL.print("[HTTP] POST...\n");
        // start connection and send HTTP header and body
        int httpCode = http.POST("{\"mode\":\"sync\",\"messageType\":\"4a0f64bf6fc780e39a51\",\"messages\":[{\"Humidity\":90,\"Temperature\":50,\"Brightness\":60,\"timestamp\":1}]}");

        // httpCode will be negative on error
        if(httpCode > 0) {
            // HTTP header has been send and Server response header has been handled
            USE_SERIAL.printf("[HTTP] POST... code: %d\n", httpCode);

            // file found at server
            if(httpCode == HTTP_CODE_OK) {
                String payload = http.getString();
                USE_SERIAL.println(payload);
            }
        } else {
            USE_SERIAL.printf("[HTTP] POST... failed, error: %s\n", http.errorToString(httpCode).c_str());
        }

        http.end();
    }

    delay(3000);
}

我的整个依赖树是

"babel": "^6.5.2",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"

顶部列表就是我为教程加载的列表。所以也许在节点中运行React我不需要webserver方面的反应，如果有的话？或者只是使用节点？

这是webpack.config.js文件。

 "dependencies": {
    "async": "^2.1.4",
    "babel": "^6.5.2",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "bcrypt-nodejs": "0.0.3",
    "bluebird": "^3.4.6",
    "body-parser": "^1.15.2",
    "cloudinary": "^1.4.6",
    "cookie-parser": "^1.4.3",
    "ejs": "^2.5.2",
    "express": "^4.14.0",
    "express-flash": "0.0.2",
    "express-session": "^1.14.2",
    "method-override": "^2.3.7",
    "moment": "^2.17.0",
    "mongoose": "^4.6.8",
    "morgan": "^1.7.0",
    "multer": "^1.2.0",
    "nodemailer": "^2.7.0",
    "passport-local-mongoose": "^4.0.0",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "serve-favicon": "^2.3.2",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2",
    "xoauth2": "^1.2.0"
  },

这是pacakge.json文件中的脚本。这有代码与端口等：

const webpack =require('webpack'),
path    =require('path');

const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");

const config =  {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            }
        ]
    }
};

module.exports = config;

Answer 1

要运行nodejs和reactjs应用，只需执行以下步骤：

npm我同时-保存
然后将这些脚本添加到您的nodejs应用的 composer.json 中，

"scripts": { "start": "node server.js", //For starting node server with **npm run start** "react": "npm start --prefix react", // --prefix react indicates the folder of your react app "dev": "concurrently \"npm run start\" \"npm run react\"" },
然后添加

"proxy": "http://localhost:5000" //Add your own port where nodejs app is running

到您的react composer.json 文件。
然后最终运行 npm run dev 来同时启动react和node应用。

有关更多信息，请访问https://www.npmjs.com/package/concurrently。

同时运行React和Node。

1 个答案: