How to use webpack-dev-server not managed by webpacker/Rails?

[cjbottaro]

Hi. I have a webpack-dev-server that is running as part of a project that is completely separate from my Rails app, yet I want my Rails app to use that webpack-dev-server for all its assets.

Here's the output of the webpack-dev-server...

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/cjbottaro/Work/project/assets
ℹ ｢wdm｣: Hash: 776c76a9ab44ca366263
Version: webpack 4.41.2
Time: 1043ms
Built at: 11/02/2019 1:20:59 PM
                                                                     Asset      Size       Chunks                         Chunk Names
                                      application-776c76a9ab44ca366263.css   721 KiB  application  [emitted] [immutable]  application
                                       application-776c76a9ab44ca366263.js   369 KiB  application  [emitted] [immutable]  application
                  fonts/fa-brands-400-3848279e1aaa521f3d241b7908734fb4.ttf   128 KiB               [emitted]
                  fonts/fa-brands-400-6c1d3d52c3959bd0b300877aed14520d.eot   128 KiB               [emitted]
                  fonts/fa-brands-400-f74b8457fd9c2d3575629cf1584704aa.svg   684 KiB               [emitted]
                 fonts/fa-duotone-900-7749cf4c98709996cdff690614fc9f3e.ttf   516 KiB               [emitted]
                 fonts/fa-duotone-900-a1636ded8465b995f65eaf7ae76380e9.svg  2.27 MiB               [emitted]
                 fonts/fa-duotone-900-fbe8fb86b71010892ad4985fec806cfb.eot   516 KiB               [emitted]
                   fonts/fa-light-300-8389adab18bf13013321c33076430a50.eot   442 KiB               [emitted]
                   fonts/fa-light-300-8ca375165a44ded899a24fa3264636fe.svg  2.08 MiB               [emitted]
                   fonts/fa-light-300-d58496a41fd013985a1498abf1be4e23.ttf   442 KiB               [emitted]
                 fonts/fa-regular-400-6d74740ab59023b4923f86e680f5e230.ttf   408 KiB               [emitted]
                 fonts/fa-regular-400-71f36b6cf34c758633b1fbe8ed083bb3.eot   408 KiB               [emitted]
                 fonts/fa-regular-400-d74dfd84ad08f922bf8ca61dd02469ac.svg  1.86 MiB               [emitted]
                   fonts/fa-solid-900-228fa19ba40f8b80ec58af7a3c44da56.eot   349 KiB               [emitted]
                   fonts/fa-solid-900-5eef26d6096e6688a0f7b9e0ee960e1b.svg  1.53 MiB               [emitted]
                   fonts/fa-solid-900-ba0b120fe013ca88a4da96fbbb2cda09.ttf   348 KiB               [emitted]
                      images/initials-f0dbf066d4d3a3ce5319293251c5899d.png    15 KiB               [emitted]
                          images/logo-f274fac4f8a5e9fd542e9850b6910c3e.png  10.9 KiB               [emitted]
                                                             manifest.json  2.34 KiB               [emitted]
Entrypoint application = application-776c76a9ab44ca366263.css application-776c76a9ab44ca366263.js

I thought setting my webpacker.yml to point to that webpack-dev-server would be enough:

development:
  <<: *default
  dev_server:
    host: localhost
    port: 8080

But it doesn't work.

How do I get webpacker to play nicely with a webpack-dev-server that is not managed by webpacker/Rails?

Thanks for the help.

[jakeNiemiec]

Did you follow this? Are you running ./bin/webpack-dev-server?

webpacker/docs/webpack-dev-server.md

Lines 4 to 14 in cc98e59

	## HTTPS
	If you're using the `webpack-dev-server` in development, you can serve your packs over HTTPS
	by setting the `https` option for `webpack-dev-server` to `true` in `config/webpacker.yml`,
	then start the dev server as usual with `./bin/webpack-dev-server`.
	Please note that the `webpack-dev-server` will use a self-signed certificate,
	so your web browser will display a warning/exception upon accessing the page. If you get
	`https://localhost:3035/sockjs-node/info?t=1503127986584 net::ERR_INSECURE_RESPONSE`
	in your console, simply open the link in your browser and accept the SSL exception.
	Now if you refresh your Rails view everything should work as expected.

[cjbottaro]

Are you running ./bin/webpack-dev-server?

No. webpack-dev-server is being run by a completely separate project. Not a Rails project. It's not managed by the webpacker gem at all.

[jakeNiemiec]

My (batteries-not-included), DIY webpack comment might help: #1903 (comment)

[cjbottaro]

Cool, thanks for that link.

Just to be clear before closing this issue...

If using standalone webpack, it's probably best to forgo webpacker altogether and write your own helper methods that use manifest.json (which is also up to you to read and hot reload, etc)?

[jakeNiemiec]

If using standalone webpack, it's probably best to forgo webpacker altogether and write your own helper methods that use manifest.json

For the most part, the code around resolving & caching entrypoints is pretty useful even if you aren't within the bounds of webpacker. I'd personally like to see the general-use parts of webpacker exposed, enabling à la carte usage.

[jakeNiemiec]

@jakeNiemiec I'm with you on this one. I found Minipack but setup hasn't been seamless and I'm still running into some issues.

I mentioned the same concept in great detail over there too: nikushi/minipack#12 (comment)

[omarish]

Nice. I ended up biting the bullet and built my own lightweight rails <-> webpack integration so that I could run webpack-dev-server with a fully managed webpack configuration. Some thoughts (from a dilettante who has only been working on this problem for a couple days), and please bear in mind that my opinions are worth exactly as much as I pay to use Webpacker:

I probably would have stayed with Webpacker, but the reason I ended up migrating away was that there were too many layers of abstraction - there's already multiple layers of webpack config (production, development, test, common), and then webpacker adds its own webpacker.yml config on top of that. I appreciate that it's a very expressive configuration, but I needed really fine-grained control that I couldn't figure out how to get with webpacker. This makes debugging and profiling webpack hard as well.

Webpacker is absolutely the right step for Rails - I still swear by this ecosystem because of how quickly it helps me get things done. If this gem didn't exist, I have probably moved awa, or started bifurcating my apps into two separate repos, backend and frontend, which has always felt a little heavy-handed to me.

I'd love to see a world where webpacker does all of its config in javascript, and uses something like webpack-merge to make it DRY. That way, you get config but also are never too far from what's actually going on under the hood.

Perhaps this is why a lot of frameworks use the eject paradigm (like CRA and Expo). Nice defaults, but once you want to get into advanced mode, you see everything.

That said, I'm going to keep a close eye and try and be more active with the webpacker gem. This is probably one of the most impactful projects out there and is the linchpin to the Rails community. Huge shout-out and hat-tip to @gauravtiwari, @dhh, @jakeNiemiec and everyone who's contributed.

[cjbottaro]

I ended up writing my own standalone webpack <-> Rails code too. It took all of 5 mins (that's not counting how long it took me to learn webpack in the first place, heh, phew).

I simply wrote my own javascript_pack_tag and stylesheet_pack_tag in ApplicationHelper that query the webpack endpoint for manifest.json and then used the values in there to call out to javascript_include_tag, etc. I think a similar approach will work with asset_url so you can put images and everything else in webpack as well.

I would like to cache the contents of manifest.json but there doesn't seem to be a way to distinguish between regular page load and a page load that's caused by webpack's live reloading.

Anyway, thanks for the help and guidance!

[jakeNiemiec]

Perhaps this is why a lot of frameworks use the eject paradigm (like CRA and Expo).

If you look at the PR for the eject feature, you can see every time it had been linked to from a conversation like we are having right now. That user went on to make webpacker_ejector.

I really hope we can bring ejecting for advanced user to webpacker@5

[omarish]

Nice, I wasn't aware of that gem. Definitely would have used it + stuck with webpacker had I known it existed. +1 for ejecting in webpacker@5.

[tsrivishnu]

@cjbottaro Would you be able to provide a link to your standalone webpack <-> Rails code? Would be helpful to look at how your implemented javascript_pack_tag etc.