How to implement webpack-dev-server to share cookie from server-side rendered page?

Question

I am currently building reactjs application which uses server side cookie for authentication. I am trying using webpack-dev-server for the development.

In current scenario, I have webpack-dev-server hosted on one domain and application server on other domain, but I need to share cookie in both of them.

I figured cookies do not work across different domains, but is there a way I can hack around this to make them share it for development environment ?

Currently, I am trying to embed an iframe of the devserver in url of application server. Still, since they have different hostnames cookies cannot be shared. Then, I figured out that cookies can be shared across subdomains but cannot figure out how to assign different ports under local host to different subdomain.

Suggestion and feedback would be really appreciated.

Answer 1

I ended up solving this scenario using proxy server feature of webpack-dev-server.

//dev-server.js

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.config')

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  inline: true,
  historyApiFallback: true,
  proxy: {
    "**": "http://localhost:8000"
  }
}).listen(3000, '0.0.0.0', function (err, result) {
  if (err) {
    console.log(err)
  }

  console.log('Listening at 0.0.0.0:3000')
});

This way devServer (port: 3000) renders the page from server (port: 8000) which allows frontend to receive and use cookie from server.