node.js - Cannot get HotModuleReplace plugin with react-hot to be enabled in the browser, though file watching is working -

-

i'm trying use webpack's hot module replacement plugin. i've managed randomly working, still isn't doing quite hope to.

basically, no messages in console it's active, though it's building without issue , file watching working, messages webpack: bundle valid , webpack: bundle invalid when update.

webpack, webpack-dev-server, , react-hot installed locally.

but in browser's console, thing see is:

download react devtools better development experience: https://fb.me/react-devtools

i'm using laravel update index file based on environment variable , working fine.

here index.php file:

<!doctype html> <html>     <head>         <title></title>     </head>     <body>         <div id="content"></div>          @if(env("app_hotreload"))             <script src="http://localhost:8080/js/vendor.js"></script>             <script src="http://localhost:8080/js/app.js"></script>         @else             <script src="js/vendor.js"></script>             <script src="js/app.js"></script>         @endif     </body> </html>

here webpack config file (webpack.hot-reload.config.js):

var path = require("path"); var webpack = require("webpack"); var node_modules = path.resolve(__dirname, "node_modules"); var public_dir = path.resolve(__dirname, "public");  module.exports = {      debug: (process.env.node_env === "production"),      entry: {         vendor: [             "es5-shim",             "es5-shim/es5-sham",             "babel-core/polyfill",             "babel-core/external-helpers",             "react",             "react-router-component"         ],         app: [             "webpack-dev-server/client?http://localhost:8080",             "webpack/hot/only-dev-server",             path.resolve(__dirname, "resources/assets/js/index.js")         ]     },      contentbase: public_dir,      output: {         path: path.resolve(public_dir, "js"),         filename: "app.js",         publicpath: "/"     },      plugins: [         new webpack.optimize.commonschunkplugin("vendor", "vendor.js"),         //this necessary react know whether it's supposed strip out         //addons , stuff when being minified.  essentially, becomes dead         //code , webpack take out.         new webpack.defineplugin({             "process.env": {"node_env": json.stringify(process.env.node_env)}         }),         new webpack.hotmodulereplacementplugin(),         new webpack.noerrorsplugin()     ],      module: {         loaders: [             {                 test: /\.(sa|c)ss$/,                 loader: "css!style!sass"             },             {                 test: /\.jsx?$/,                 exclude: /(node_modules|bower_components)/,                 loaders: [                     "react-hot",                     "strip-loader?strip[]=debug,strip[]=console.log,strip[]=console.error",                     "babel-loader"                 ]             }         ]     },      resolve: {         root: path.resolve(__dirname, "resources/assets/js"),         extensions: ["", ".js", ".json"]     } };

in order start webpack-dev-server, use separate server.js file, executed using node server.js:

var webpack = require('webpack'); var webpackdevserver = require('webpack-dev-server'); var config = require('./webpack.hot-reload.config');  new webpackdevserver(webpack(config), {     publicpath: config.output.publicpath,     contentbase: config.contentbase,     hot: true,     historyapifallback: true,     quiet: false,     noinfo: false,     stats: {         colors: true     } }).listen(8080, 'localhost', function (err, result) {         if (err) {             console.log(err);         }         console.log('listening @ localhost:8080');     });

it seems work randomly after waiting time, if change file or refresh page manually, seems break. i've tried using both firefox , chrome , doesn't make difference, i'm thinking it's in build.

what wrong?

i figured out. there was comment it on page notes how use webpack-dev-server, managed read on it.

if in config you'll see:

... output: {     path: path.resolve(public_dir, "js"),     filename: "app.js",     **publicpath: "/"** }, ...

i misinterpreted publicpath key , path.

however, example given in the docs shows:

module.exports = {   entry: {     app: ["./app/main.js"]   },   output: {     path: "./build",     publicpath: "/assets/",     filename: "bundle.js"   } };

and states:

this modified bundle served memory @ relative path specified in publicpath (see api). not written configured output directory. where bundle exists @ same url path bundle in memory take precedence.

however, example, bundle served /, not /assets/ because further down, the content base given build/. there's nothing notes directory scripts lie possibly aliased /assets/ @ all, that's why placed / path publicpath instead of the subdirectory js being served from..

the docs note that:

to teach webpack make requests (for chunk loading or hmr) webpack-dev-server need provide full url in output.publicpath option.

so changed:

    publicpath: "/"

to:

    publicpath: "http://localhost:8080/js/"

and files being served correctly. added /js/ because that's javascript served on actual server.


Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more