Add the watch command

[jpbecotte]

What problem does this feature solve?

I love the new vue-cli. npm run serve and npm run build are very nice, but with Phoenix/Elixir, I don't want to use the dev server. Instead, I want that Webpack watches for changes and produces it's build in the dist directory.

What does the proposed API look like?

npm run watch

[LinusBorg]

So you don't want to use Hot Module reloading?

I don't know if you're aware, but the usual way to deal with "3rd party" backend API servers is to still use the dev-server, and proxy API requests through it to the API backend.

That way, you usually get the best of both worlds: A fully featured dev server with Hot module reloading for your frontend app, and your own instance of the backend server to go with it

However if you still want this, I think this would be a good feature to implement with a plugin, as I don't think this is a prime use case with this this tmplate.

[jpbecotte]

That’s a good question. And yes, I want HMR. Phoenix comes with a Hot Module Reloading that is enabled with websockets (I guess just as webpack-dev-server). I rather use Phoenix's one instead of webpack-dev-server. This way, only one instance of web server is running. I can manage my routes to distinguish between the API calls, etc. One workaround is to run the Phoenix server and the webpack server together, but that’s flacky. I wonder how other uses cases fonction (ex: with Node/Express). Thanks for the quick reply. JPB

…

Le 20 févr. 2018 à 16:51, Thorsten Lünborg ***@***.***> a écrit : So you don't want to use Hot Module reloading? I don't know if you're aware, but the usual way to deal with "3rd party" backend API servers is to still use the dev-server, and proxy API requests through it to the API backend. That way, you usually get the best of both worlds: A fully featured dev server with Hot module reloading for your frontend app, and your own instance of the backend server to go with it However if you still want this, I think this would be a good feature to implement with a plugin, as I don't think this is a prime use case with this this tmplate. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#860 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEaHzQxkHvQAXhe6d8EYb-idX6zcZ2mmks5tW0x2gaJpZM4SMxLR>.

[yyx990803]

I doubt Phoenix's HMR is the same web webpack-dev-server (WDS)'s - the former probably reloads the page when a new js bundle is delivered, while the latter has fine-grained HMR that preserves application state.

Also, since WDS performs compilation in memory, it should also result in faster dev builds than writing the whole bundle to disk on every change (and then waiting for that to be picked up by Phoenix).

Running Phoenix and WDS side by side is actually the recommended approach, and it isn't that complex: you just need to specify your phoenix server's local address in vue.config.js as devServer.proxy, and the dev server can automatically figure out what requests to proxy in most cases: https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy

[jpbecotte]

Thanks Evan, You’re right, running the two servers side by side might be a better approach. Thanks!

…

Le 21 févr. 2018 à 15:10, Evan You ***@***.***> a écrit : I doubt Phoenix's HMR is the same web webpack-dev-server (WDS)'s - the former probably reloads the page when a new js bundle is delivered, while the latter has fine-grained HMR that preserves application state. Also, since WDS performs compilation in memory, it should also result in faster dev builds than writing the whole bundle to disk on every change (and then waiting for that to be picked up by Phoenix). Running Phoenix and WDS side by side is actually the recommended approach, and it isn't that complex: you just need to specify your phoenix server's local address in vue.config.js as devServer.proxy, and the dev server can automatically figure out what requests to proxy in most cases: https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy <https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#860 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEaHzcx-noqGErw5nHsTJqv8YN4wdgw-ks5tXIYxgaJpZM4SMxLR>.

[biluochun]

If my index.html is like this (requires the server to render it)
DEMO:

<script>
window._ServerData = _SERVER_REPLACE_;
</script>

Need npm run watch
Or are there other recommendations?

[LinusBorg]

Please use the forum for support.

forum.vuejs.org