如何使用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生成快速应用程序很容易。