Adding a server side Express App

[refaelos]

I have a problem related to #160 trying to run my server side node.js app alongside browsersync and webpack as described here.

The problem is that when I go to the root path '/' I get the index.html generated by webpack but when I go to any other path '/login' I get an index.html from my server side app (which for some reason doesn't have my client side app.js included).

Any idea how it should be done?

[moravcik]

Why do you have your server-side index.html? I have my node.js express app, but I am using it only as an API. Are you building SPA?

In dev mode I have all client assets served via webpack, for production mode I use following snippet on server:

let environment = process.env.NODE_ENV || 'development';

if (environment === "production") {
  app.use(express.static(`${__dirname}/../dist`));

  app.get('/*', (req, res) => {
    res.sendFile(path.resolve(`${__dirname}/../dist/index.html`));
  });
}

[refaelos]

I got this resolved. Your solution is also good.

Thanks!

[dhavaln]

@refaelos I am trying to attach the API backend, but somehow its not working out as expected. Any chance you can help with the config files for Dev and Production!!!

[refaelos]

@dhavaln this is how my app.js looks like:

/**
 * Main application file
 */

'use strict';
// Set default node environment to development
process.env.NODE_ENV = process.env.NODE_ENV || 'development';

var _ = require('lodash');

var express = require('express');
var config  = require('./config/environment');

// Setup server
var app = express();

// we compile webpack only for development
if (process.env.NODE_ENV === 'development') {
  const webpack              = require('webpack');
  const webpackMiddleware    = require('webpack-dev-middleware');
  const webpackHotMiddleware = require('webpack-hot-middleware');
  const webpackConfig        = require('../webpack.dev.config.js');

  const compiler   = webpack(webpackConfig);
  const middleware = webpackMiddleware(compiler, {
    publicPath : webpackConfig.output.publicPath,
    contentBase: 'client',
    stats      : {
      colors      : true,
      hash        : false,
      timings     : true,
      chunks      : false,
      chunkModules: false,
      modules     : false
    }
  });

  app.use(middleware);
  app.use(webpackHotMiddleware(compiler));

  app.set('webpackMiddleware', middleware);
}

var server   = require('http').createServer(app);
var socketio = require('socket.io').listen(server);

require('./components/socketio')(socketio);
require('./config/express')(app);
require('./routes')(app);

// Start server
server.listen(config.port, config.ip, function () {
  console.info('Express server listening on %d, in %s mode', config.port, app.get('env'));
});

// Expose app
module.exports = app;

let me know if there's anything you need.

[dhavaln]

@refaelos I tried your configuration above, it starts the webpack and my server but doesn't really load the client side. I think I will have to move the part written in the original gulp file.

[dhavaln]

@refaelos After moving the gulp changes, its working now. Thanks for your help.

[refaelos]

@dhavaln 👍

[mocsharp]

Is there anyway to get live reloading working with express? Thanks.