Webpack-dev-server + node + c9


#1

Having a heck of a time getting hot reloading to work.

I looked at this answer: Mixed content with webpack-dev-server

I made the changes to the sockJS function but having no luck.

XMLHttpRequest cannot load https://mondood-ngalluzzo.c9users.io:8080/sockjs-node/info?t=1465100013788. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://mondood-ngalluzzo.c9users.io:8081' is therefore not allowed access. The response had HTTP status code 404.

webpack.config.js

entry: {
app: [
‘webpack-dev-server/client?https://’ + process.env.IP + ‘:8080’,
‘webpack/hot/only-dev-server’,
’./client/js/main’
]
},
output: {
path: path.join(__dirname, ‘dist’),
filename: ‘bundle.js’,
publicPath: ‘/static/’
}

server.js (using koa)

app.use(convert(webpackMiddleware(webpack(wpConfig), {
publicPath: wpConfig.output.publicPath,
historyApiFallback: true,
hot: true,
ignorePath: true,
changeOrigin: true,
secure: false,
host: ‘0.0.0.0’,
port: 8080,
proxy: {
"*": “https://0.0.0.0:8081
}
})));

I tried switching off several things… including relative / absolute paths… just not sure what to try anymore. Thinking it’ll be best to just keep developing locally. Any ideas?


#2

Hi @ngalluzzo,

I’m not able to solve your problem, because I don’t use webpack. But when you send a request from port 8081 to port 8080, you’ll always run into the issue with Access Control. (Unless you flag your browser to disable security, I guess)

Cheers!


#3

Thanks @b2m9,

I had mentioned trying tons of things trying to get this to work, one of them was using a cors middleware but I was running into the same issue. Anyways, I’ve already figured out the problem – I’ll be putting together a tutorial real soon for c9 + webpack + koa


#4

@ngalluzzo hope you’ll link to the tutorial here when you’re done.


#5

Looking forward to your tutorial, @ngalluzzo.


#6

Hello @ngalluzzo, I have a plain JS template for webpack on c9:

The main issue for me was realizing that the main JS entry point, my /src/app.js file,
needed the following chunk of code BEFORE all my imports (I’m using babel with es2015 presets):

  module.hot.accept();
}```

This is necessary because the webpack babel-loader is not HMR friendly, unlike css/sass/style loaders.
So, this code chunk allows webpack to detect and hot reload any changes in the file and any imported modules.
Could there be a similar issue with your koa app's main JS file and any loaders you are using for koa or express?

Hope this helps.
-Ben