BrowserSync с Express Server - PullRequest
Новая
       9

BrowserSync с Express Server

0 голосов
/ 27 января 2019

Есть ли способ использовать browserSync с сервером Express. Я работаю с React-slingshot стартовым комплектом от Cory House, и BrowserSync использовался для обслуживания файлов. Тем не менее, я заинтересован в обслуживании файлов с помощью Express.

Я попытался создать новый файл server.js и добавить следующий код: 

/* eslint-disable no-console */
import express from 'express';
import http from 'http';
import path from 'path';

const app = express();
const server = http.createServer(app);
const port = 3000;

app.use(express.static(path.resolve(__dirname, '../src/*.html')));

server.listen(port, () => {
  console.log(`Express Dev Server started on port ${port}`);
});

И конфиг browserSync выглядит так: 

// This file configures the development web server
// which supports hot reloading and synchronized testing.

// Require Browsersync along with webpack and middleware for it
import browserSync from 'browser-sync';
// Required for react-router browserHistory
// see https://github.com/BrowserSync/browser-sync/issues/204#issuecomment-102623643
import historyApiFallback from 'connect-history-api-fallback';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import config from '../webpack.config.dev';

const bundler = webpack(config);

// Run Browsersync and use middleware for Hot Module Replacement
browserSync({
  port: 3000,
  ui: {
    port: 3001
  },
  server: {
    baseDir: 'src',

    middleware: [
      historyApiFallback(),

      webpackDevMiddleware(bundler, {
        // Dev middleware can't access config, so we provide publicPath
        publicPath: config.output.publicPath,

        // These settings suppress noisy webpack output so only errors are displayed to the console.
        noInfo: true,
        quiet: false,
        stats: {
          assets: false,
          colors: true,
          version: false,
          hash: false,
          timings: false,
          chunks: false,
          chunkModules: false
        },

        // for other settings see
        // https://webpack.js.org/guides/development/#using-webpack-dev-middleware
      }),

      // bundler should be the same as above
      webpackHotMiddleware(bundler)
    ]
  },

  // no need to watch '*.js' here, webpack will take care of it for us,
  // including full page reloads if HMR won't work
  files: [
    'src/*.html'
  ]
});

Затем я изменил package.json, чтобы одновременно запустить файл, содержащий конфигурацию browserSync, и файл, содержащий express js. Но по какой-то причине я получил сообщение о том, что порт уже используется.

Я понимаю, что это потому, что browserSync использовал порт, но есть ли способ запустить browserSync и Express JS одновременно.

Спасибо.

...