如何使用Gulp将Express添加到React应用程序?
我在写一个React应用程序,它现在状态良好。现在,我想添加一个后端来访问Mongodb文档并创建一个REST API,就像在现有项目的顶部添加一个图层一样。我希望Express可以在相同端口上收听我的React应用程序。我正在使用Gulp,使用其默认任务启动应用程序。如何使用Gulp将Express添加到React应用程序?
我找不到一种方法来做到这一点,如果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']);
这可能吗?如果是这样,我该怎么做?
只是想出了一个办法。正如我在问题中所说的(但有更多细节):将当前的React应用程序与Express生成的应用程序相结合是正确的方法。所以我所做的基本上是:
- 添加垃圾桶,观点&路线文件夹和文件app.js的阵营项目文件夹
- 加入这一行
app.js
以服务为做出反应生成的目标JS文件组件:app.use(express.static(path.join(__dirname, 'dist')));
- 编辑连接任务以删除端口配置。它将在稍后启动服务器时计算出来。在gulpfile.js添加一个任务:
gulp.task('dev', ['html', 'js', 'css','lint', 'connect', 'watch']);
- 在的package.json,编辑启动脚本调用新一饮而尽任务:
gulp dev && node ./bin/www
- 复制并粘贴快递应用的package.json文件的依赖关系到新阵营项目之一。
- 删除node_modules文件夹,然后重新运行
npm install
- 运行
npm start
启动全栈的应用程序。
希望这可以帮助任何人。
额外信息:使用[Express Generator](https://www.npmjs.com/package/express-generator)生成ExpressApp。 &&不要忘记调整你的路线。 – Hideya
根据您的意见给予额外的信息,我建议做两个选项之一:API分别
- 主机。在一个单独的端口,甚至可能在一个单独的存储库。关注点分离。
或
- 调整你一口任务启动Express服务器并为您的静态内容特急应用程序。然后你可以设置你的api路径来返回json并通过AJAX请求或其他方式从静态内容(html)请求json。
无论哪种方式,你可以使用Nodemon住刷新你的API & /或您的静态内容服务器。
希望有所帮助。使用express generator生成快速应用程序很容易。
谢谢帕特里克。但是,我知道我有这些选项,但这并不能解决我的问题。最重要的是在同一个端口上添加Express。 – Hideya
它确实回答你的问题。您可以将其托管在不同的端口上,也可以通过browserify停止托管静态内容,而是通过将其托管在与api相同的端口上(它将位于同一项目中)。您不能在同一个端口上托管两个应用程序。另外,我没有让你失望,所以请不要低估我。 :) –
您真正需要的是通过您的快车应用程序为您的反应应用程序提供服务。或者您在不同的端口上为您的快递应用提供服务。 –
当你说“我想添加一个后端Express”时,你的意思并不完全清楚。你后端的目标是什么?它看起来像你已经有吞吐任务,启动一个简单的服务器,并生活重新加载文件的变化。你想要快递服务器做什么? –
我想添加一个REST API并管理mongodb文档。 是的,该应用程序状态良好,但它只是一个前端应用程序。关键是我希望它是一个完整的应用程序。 – Hideya
好的。你打算主持这个项目的计划是什么? AWS? Digital Oceaen上的专用服务器/微滴? Azure的? –