如何使用Gulp將Express添加到React應用程序？

Question

我在寫一個React應用程序，它現在狀態良好。現在，我想添加一個後端來訪問Mongodb文檔並創建一個REST API，就像在現有項目的頂部添加一個圖層一樣。我希望Express可以在相同端口上收聽我的React應用程序。我正在使用Gulp，使用其默認任務啓動應用程序。

我找不到一種方法來做到這一點，如果app.listen使用相同的端口作爲它的反應部分，我得到port already in use（顯然）。

這裏是我的gulpfile.js

"use strict"; 
var gulp = require('gulp'), 
connect = require('gulp-connect'), 
open = require('gulp-open'), 
browserify = require('browserify'), 
reactify = require('reactify'), 
source = require('vinyl-source-stream'), 
eslint = require('gulp-eslint'), 
http = require('http'), 
concat = require('gulp-concat'); 

var config = { 
port: process.env.PORT || 1991, 
devBaseUrl: 'http://localhost', 
paths: { 
    html: './src/*.html', 
    js: './src/**/*.jsx', 
    css: './public/stylesheets/**/*.css', 
    dist: './dist', 
    mainJs: './src/main.jsx' 
} 
}; 

//start a local dev server 
gulp.task('connect', function() { 
connect.server({ 
    root: ['dist'], 
    port: config.port, 
    base: config.devBaseUrl, 
    livereload: true 
}); 
}); 

gulp.task('open', ['connect'], function() { 
gulp.src('dist/index.html') 
    .pipe(open({uri: config.devBaseUrl + ':' + config.port + '/'})); 
}); 

gulp.task('html', function() { 
gulp.src(config.paths.html) 
    .pipe(gulp.dest(config.paths.dist)) 
    .pipe(connect.reload()); 
}); 

gulp.task('js', function() { 
browserify(config.paths.mainJs) 
    .transform(reactify) 
    .bundle() 
    .on('error', console.error.bind(console)) 
    .pipe(source('bundle.js')) 
    .pipe(gulp.dest(config.paths.dist + '/scripts')) 
    .pipe(connect.reload()); 
}); 

gulp.task('css', function() { 
gulp.src(config.paths.css) 
    .pipe(concat('bundle.css')) 
    .pipe(gulp.dest(config.paths.dist + '/css')) 
    .pipe(connect.reload()); 
}); 

gulp.task('lint', function() { 
return gulp.src(config.paths.js) 
    .pipe(eslint({configFile: 'eslint.config.json'})) 
    .pipe(eslint.format()); 
}); 

gulp.task('watch', function() { 
console.log('Files have been changed... Reloading...'); 
gulp.watch(config.paths.html, ['html']); 
gulp.watch(config.paths.css, ['css']); 
gulp.watch(config.paths.js, ['js']); 
}); 

gulp.task('default', ['html', 'js', 'css','lint', 'open', 'watch']); 

我試圖生成的快件應用結合起來，所以我的文件夾是這樣的：

這可能嗎？如果是這樣，我該怎麼做？

Answer 1

只是想出了一個辦法。正如我在問題中所說的（但有更多細節）：將當前的React應用程序與Express生成的應用程序相結合是正確的方法。所以我所做的基本上是：

1. 添加垃圾桶，觀點&路線文件夾和文件app.js的陣營項目文件夾
2. 加入這一行app.js以服務爲做出反應生成的目標JS文件組件： app.use(express.static(path.join(__dirname, 'dist')));
3. 編輯連接任務以刪除端口配置。它將在稍後啓動服務器時計算出來。在gulpfile.js添加一個任務： gulp.task('dev', ['html', 'js', 'css','lint', 'connect', 'watch']);
4. 在的package.json，編輯啓動腳本調用新一飲而盡任務：gulp dev && node ./bin/www
5. 複製並粘貼快遞應用的package.json文件的依賴關係到新陣營項目之一。
6. 刪除node_modules文件夾，然後重新運行npm install
7. 運行npm start啓動全棧的應用程序。

希望這可以幫助任何人。

Answer 2

根據您的意見給予額外的信息，我建議做兩個選項之一：API分別

• 主機。在一個單獨的端口，甚至可能在一個單獨的存儲庫。關注點分離。

或

• 調整你一口任務啓動Express服務器併爲您的靜態內容特急應用程序。然後你可以設置你的api路徑來返回json並通過AJAX請求或其他方式從靜態內容（html）請求json。

無論哪種方式，你可以使用Nodemon住刷新你的API & /或您的靜態內容服務器。

希望有所幫助。使用express generator生成快速應用程序很容易。