Giter VIP home page Giter VIP logo

Comments (8)

catamphetamine avatar catamphetamine commented on May 24, 2024

However because the servers compiled file builds every time the client components change, the server reloads, breaking HMR.

It doesn't break any HMR because HMR is handled by webpack-dev-server and not by nodemon.
Btw webpack-serve is recommended instead of webpack-dev-server.

from universal-webpack.

tavurth avatar tavurth commented on May 24, 2024

@catamphetamine I'm actually using webpack-serve but it's still giving me a 503 error.

from universal-webpack.

catamphetamine avatar catamphetamine commented on May 24, 2024

See https://github.com/catamphetamine/webpack-react-redux-server-side-render-example
If you happen to catch the error there then you can post here.
Otherwise the issue is considered specific to your setup.

from universal-webpack.

tavurth avatar tavurth commented on May 24, 2024

In my package.json I have the following scripts:

"scripts": {
        "watch:dev:ssr": "NODE_ENV=development nodemon ./webpack/run-ssr --watch ./dist/server",
	"watch:server": "NODE_ENV=development webpack --progress --watch --config ./webpack/config.server.babel.js",
	"watch:client": "NODE_ENV=development webpack-serve --progress --watch --port 3002 --host 0.0.0.0 --config ./webpack/config.client.babel.js",
}

And I see that from the attached example you use the delay script:

"scripts": {
	"dev": "npm-run-all development:client:rendering-service:build:prepare development",
	"development": "npm-run-all --parallel development:client:build development:client:rendering-service:build development:services",
	"development:client:rendering-service:build:prepare": "universal-webpack --settings ./webpack/universal-webpack-settings.json prepare",
	"development:client:build": "webpack-serve --hot --require babel-register --config webpack/webpack.config.client.development.babel.js",
	"development:client:rendering-service:build": "webpack --mode development --config ./webpack/webpack.config.server.development.babel.js --watch --colors --display-error-details",
	"development:api": "nodemon ./api-server/index.entry.js --watch ./api",
	"development:client:rendering-service": "nodemon ./rendering-service/index.entry.js --watch ./rendering-service --watch ./build/server",
	"development:client:rendering-service:delayed": "npm-run-all delay development:client:rendering-service",
	"development:proxy": "nodemon ./proxy-server/index.entry.js --watch ./proxy-server",
	"development:proxy:delayed": "npm-run-all delay delay development:proxy",
	"development:services": "npm-run-all --parallel development:api development:client:rendering-service:delayed development:proxy:delayed",
}

However running scripts such as

"development:proxy:delayed": "npm-run-all delay delay development:proxy", seems very hacky, and dependent on the development machines compilation speed.

Perhaps we could integrate a watching system for webpack-serve so that it can delay until the server has finished building and restarting?

from universal-webpack.

catamphetamine avatar catamphetamine commented on May 24, 2024

delay is only for fixing nodemon bug when it crashes when running several nodemons at once.

from universal-webpack.

catamphetamine avatar catamphetamine commented on May 24, 2024

They don't want to fix it by the way.
remy/nodemon#709
So there's no other way other than delaying things.

from universal-webpack.

catamphetamine avatar catamphetamine commented on May 24, 2024

Oh, actually, seems that they finally merged someone's fix for that.
I'll remove the delay then since it's no longer needed.

from universal-webpack.

catamphetamine avatar catamphetamine commented on May 24, 2024

Removed delays from the example project. Seems to be working on my machine.

from universal-webpack.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.