How to add an Express to a React app using Gulp?
<p>I am writing a React app that is in a good shape now. Now, I want to add a backend to access Mongodb documents and to create a REST API, as in add a layer on top of the existing project. I want Express to listen on the <strong>same port</strong> as my React app. I am using Gulp, starting the app using its default task.</p>
<p>I can't figure out a way to do that, if the <code>app.listen</code> uses the same port as the react part of it, I get <code>port already in use</code> (obviously).</p>
<p>Here is my gulpfile.js</p>
<pre><code>&quot;use strict&quot;;
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']);
</code></pre>
<p>I tried to combine a generated express app, so my folder looked like this:
<a href="https://i.stack.imgur.com/AZxs7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AZxs7.png" alt="Folder structure after adding Express parts" /></a></p>
<p>Is this possible? If so, how can I do it?</p>