browser sync - React - webpack hmr -


tinkering webpack , associated stuff first time. trying combine benefits of webpack-dev-server , browser-sync make when update react component browser doesn't reload, uses hot module replacement. there plenty of boilerplates guess, starting scratch.

im point hmr on , listening changes. edit component , receives change , says app date. view doesn't change few seconds later web socket error. error

if hard read says web socket error, socket closed before completing handshake...

my webpack config

const webpack = require("webpack"); const path = require("path"); const src_dir = path.resolve(__dirname,'src'); const dist_dir = path.resolve(__dirname,'dist'); const htmlwebpackplugin = require('html-webpack-plugin'); const cleanwebpackplugin = require('clean-webpack-plugin'); const extracttextplugin = require("extract-text-webpack-plugin"); const browsersyncplugin = require('browser-sync-webpack-plugin');  module.exports = {      entry: [         'react-hot-loader/patch',         'webpack/hot/only-dev-server',         `${src_dir}/index.js`     ],     output: {         path: dist_dir,         publicpath: '',         filename: 'bundle.js'      },      module: {         rules: [             {                 test: /\.scss$/,                 use: extracttextplugin.extract({                     fallback: 'style-loader',                     use: ['css-loader','sass-loader']                 })             },             {                 test: /\.(png|svg|jpg|gif)$/,                 use: ['file-loader']             },             {                 test: /\.js?$/,                 use: ['babel-loader'],                 include: src_dir             }             ]     },      plugins: [         new cleanwebpackplugin(['dist']),         new htmlwebpackplugin({             inject: false,             template: require('html-webpack-template'),             appmountid: 'root',             devserver: '0.0.0.0' +':'+ 8081,             title: "webpack 4 react"         }),         new extracttextplugin("styles.css"),         new webpack.hotmodulereplacementplugin(),         new webpack.namedmodulesplugin(),         new browsersyncplugin({             host: process.env.ip,             port: process.env.port,             //server: { basedir: ['dist'] },             ui: {                 port: 8082             },             proxy: process.env.ip +':'+ 8081         },         {             reload: false         }         )         ],      devtool: 'source-map',      devserver: {         publicpath:'',         host: process.env.ip,         port: 8081,         hot: true     } };

babel portion of package.json

  "babel": {     "presets":["es2015","react"],     "plugins": ["react-hot-loader/babel"] }

many moving pieces , approaches make tough thing pin down. feel if isn't optimal setup, close getting work. after all, browser-sync page getting hmr json wds. maybe have missed simple. 1 strange thing concept of public path example, can't seem work unless empty string. said day 1 webpack, still have lot learn here. thanks.

i should add index.js, entry point webpack

import { appcontainer } 'react-hot-loader'; import react 'react'; import reactdom 'react-dom'; import app './components/app'; import './styles.scss';  const root = document.getelementbyid("root"); //reactdom.render(<app/>,root);  const render = component =>   reactdom.render(     <appcontainer>       <component />     </appcontainer>,     root   );  render(app);  if (module.hot) module.hot.accept('./components/app', () => render(app));

just follow have got things working, minor changes code above. first thing in index.js. missing declaration new updated component. so:

if (module.hot) module.hot.accept('./components/app', () => render(app));

is replaced following:

if (module.hot) module.hot.accept('./components/app', () => {   const newapp = require("./components/app").default;   render(newapp); });

since using react , react-hot-loader, magic done , changes take effect without page reload , losing state. 1 caveat have found if changes involve creating constructor , state component cause page reload, makes sense.

i had change way dealt scss files. using extracttextplugin. after research found better production, , doesn't support hmr. straight webpack docs. had alter webpack.config.js. comment out use of plugin in plugins section , change scss rule following.

{                 test: /\.scss$/,                 use: [                     {                         loader: 'style-loader'                     },{                         loader: 'css-loader'                     },{                         loader: 'sass-loader'                     }                     ]                 /* no hmr better production                 use: extracttextplugin.extract({                     fallback: 'style-loader',                     use: ['css-loader','sass-loader']                 })*/             },

the above entire scss rule old stuff commented out can add webpack production config file in future. on next, bringing in redux , react router.


Comments

Post a Comment

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -

here tables: create table customer ( cid int primary key, name varchar(32) ) create table ord ( oid int primary key, cid int foreign key references customer, address varchar(20) ) here's linq-to-sql statement: var aaa = c in db.customer select new { c, o = c.ord.tolist() }; and here's inexplicable query generated linq-to-sql: select [t0].[cid] [cid], [t0].[name] [name], [t1].[oid] [oid], [t1].[cid] [cid2], [t1].[address] [address], (select count(*) [dbo].[ord] [t2] [t2].[cid] = [t0].[cid]) [value] [dbo].[customer] [t0] left outer join [dbo].[ord] [t1] on [t1].[cid] = [t0].[cid] order [t0].[cid], [t1].[oid] i want understand how rid of count(*) part. it's entirely uncalled for! linq needs count(*) in order determine number of entries returned o = c.ord.tolist() .
Read more