Comments (4)
This version of package https://github.com/facebook/create-react-app/blob/next/packages/react-dev-utils/webpackHotDevClient.js
It used in create-react-app
from browser-sync-webpack-plugin.
hi @romanlex
i'm not sure i understand what you're trying to achieve. what is the reason for using package with webpackHotDevClient directly?
the code you sent (webpackHotDevClient) seems to be a client code for create-react-app implementation of webpack-dev-server. browser-sync itself has the similar code as it serves a similar purpose. for ones who want to use both browser-sync and webpack-dev-server simultaneously, there's an example in package docs. in this case nobody really cares for what browser-sync or webpack-dev-server really does on client, your just need to match ports and other options on backend.
from browser-sync-webpack-plugin.
this client has another link for RHL /sockjs-node
but browser-sync-plugin doesn't has websocket proxy connection or support rewrite rules for this
new BrowserSyncPlugin(
{
host: HOST,
port: port,
notify: BROWSER_NOTIFY === 'true',
open: BROWSER_OPEN === 'true',
injectCss: true,
https: process.env.HTTPS === 'true',
logLevel: 'info',
cors: true,
proxy: {
target: `${protocol}://${HOST}:${port + 1}`,
ws: true,
},
ui: { port: port + 2 },
},
{
reload: false,
},
),
In my case I use nginx as proxy for all local domains and sockjs connection not work properly. May be this info help someone
location /sockjs-node {
proxy_pass http://127.0.0.1:3001; // webpack hot client
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
location / {
proxy_http_version 1.1;
proxy_set_header Host $http_host;
proxy_set_header Connection "upgrade";
proxy_set_header Upgrade $http_upgrade;
proxy_read_timeout 300;
proxy_send_timeout 300;
proxy_buffering off;
proxy_cache off;
proxy_redirect off;
proxy_pass http://127.0.0.1:3000; // BrowserSync plugin
}
from browser-sync-webpack-plugin.
sorry for delay. i'm glad you've figured this exotic use-case out. gonna close the issue now. thanks
from browser-sync-webpack-plugin.
Related Issues (20)
- failed: Error during WebSocket handshake: Unexpected response code: 503 HOT 2
- Browser CSS is always version behind HOT 1
- How don't restrict CORS? HOT 1
- Browser reloads when build fails HOT 1
- Detect compilation trigger instead of referencing emitted assets when determining whether to inject css or reload HOT 5
- Module installation fails HOT 2
- enable only on certian ENV HOT 2
- 404
- Webpack 5 compatibility HOT 4
- Option to hide snippet info and access url HOT 1
- Doesn't work with WSL (Windows Subsystem for Linux) HOT 1
- Not reloading php partials in WordPress HOT 4
- When files array populated, browsersync forces a page reload HOT 1
- BrowserSync with MiniCssExtractPlugin and reload on inject changes from scss HOT 1
- Feature request: show complition errors via browserSync fullscreen message HOT 1
- Laravel Mix copy
- how to get the instance from node and trigger a reload?
- Incorrect Comparison in axios #1
- Webpack unable to find browser-sync-webpack-plugin unless browser-sync package is installed. HOT 1
- Add support for browser-sync 3 HOT 10
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from browser-sync-webpack-plugin.