Preact-cli: feature: preact build --watch

Created on 6 Apr 2018  路  4Comments  路  Source: preactjs/preact-cli

I am testing beakerbrowser.com and would like to create a preact web app with it. So I ran:

preact create material beaker-webapp
cd beaker-webapp
yarn
yarn build

As beaker browser is able to serve a folder with hot reload, I would like to automatically build my webapp on every changes of any files. I did not find a way to build --watch.
The watch command run a standalone server and I got an error if I try yarn build -- --watch.

Any ideas to help decentralized web development?

discussion need more info stale

Most helpful comment

@developit @zouhir I misspoke myself. I do not want to watch on production build, I would like a preact watch without the development server. But you are right, there is no special needs to have files served by beaker browser rather than the development server. I was too much into the documentation of beaker browser when testing out preact development with beaker browser. See their documentation and the paragraph about livereloading embeded in the browser.

Maybe @lukeed's solution is a good answer: having webpack-dev-server to write bundle files to the file system.

All 4 comments

@enguerran I'm assuming you don't want to use the existing preact watch functionality?

Building on every file change is an expensive and slow operation, build command means creating a pre-render index.html with optimised & production ready JS bundle, chuncks & CSS. Do you need that to happen on every file change? now, we don't have watch for production builds and not sure any other CLI has or supports it, but we sure have watch and hot reload for dev mode!

potential solution idea:

If I was you, I would use preact watch while I am developing, and point beaker browser to serve my static build folder where I run yarn build on git commit hook. check out husky to see how you run build and update beaker folder when you commit your code: https://www.npmjs.com/package/husky

please let us know if that helps!

I haven't tested it, but this plugin may be what you're after. We don't pass along flags to the webpack binary directly, which is why build --watch wasn't working for you.

@developit @zouhir I misspoke myself. I do not want to watch on production build, I would like a preact watch without the development server. But you are right, there is no special needs to have files served by beaker browser rather than the development server. I was too much into the documentation of beaker browser when testing out preact development with beaker browser. See their documentation and the paragraph about livereloading embeded in the browser.

Maybe @lukeed's solution is a good answer: having webpack-dev-server to write bundle files to the file system.

Was this page helpful?
0 / 5 - 0 ratings