search

webpack / webpack-dev-server

Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.
MIT License
7.8k stars 1.43k forks source link

Question: What is the status of HTTP/2 support? #1713

Closed Aghassi closed 2 months ago

Aghassi commented 5 years ago

I spent about an hour digging around yesterday and couldn't find the answer to this question, so I wanted to post here and get some insight.

I read through https://github.com/webpack/webpack-dev-server/issues/516, which seems to indicate there is HTTP/2 supported, but I couldn't find any docs on how to enable it. All I found in the official docs was the line under this section https://webpack.js.org/configuration/dev-server/#devserverhttps saying that it can run with HTTP/2.

In the code in this repo I found this https://github.com/webpack/webpack-dev-server/blob/21687c3bfc95752957d16470b97d281001dc6a07/lib/Server.js#L633-L660

All of which links to issues and other repos which have either been closed or have no work being done on them. And according to this comment https://github.com/webpack/webpack-dev-server/issues/1493#issuecomment-419493497, it is planned for v4, but nothing in the 4.0.0 milestone https://github.com/webpack/webpack-dev-server/milestone/4 seems to support that statement.

Ultimately, I'm confused as to the current situation. Does Webpack-Dev-Server support HTTP/2? If not, will it be supported in the future?

alexander-akait commented 5 years ago

We support http2 using spdy module for backward compatibility with old node version, to enable http2 you should enable https option and spdy option, but i agree it is misleading, and looks we doesn't respect spdy (https://github.com/webpack/webpack-dev-server/blob/master/bin/options.js), thanks for issue. We need:

  1. Respect spdy (add alias http2) in CLI
  2. Add tests

For future version use http2 module instead node-spdy

Aghassi commented 5 years ago

As an added note, will respecting the spdy option in the CLI also reflect if I am using this programmatically by importing webpack-dev-server?

alexander-akait commented 5 years ago

@Aghassi no, but fix it very easy

JakobJingleheimer commented 5 years ago

@evilebottnawi I'm a bit confused: the options file you linked contains no mention of spdy or http2 (or http/2). I've played around with this all evening, and I cannot get webpack-dev-server to serve over http2. Setting a CLI option does nothing, and the same is true for devServer.https.spdy: true (devServer.spdy causes a validation error).

I see it looks like it's coming in #1721, but it sounds like it was there before?

alexander-akait commented 5 years ago

@jshado1 yep, now it is broken, this PR solve problem, next week release

alexander-akait commented 5 years ago

Fixed https://github.com/webpack/webpack-dev-server/issues/1713, http2 doesn't support on node >= 10 due express doesn't support this right now, we fix it after express was released

alexander-akait commented 5 years ago

Mark as feature, we implement support after express do this

hullevive commented 5 years ago

Any updates on this?

alexander-akait commented 5 years ago

@hullevive we use express under webpack-dev-server, so if you want http2 support please write this in express issue, we can't do something on our side

ereztdev commented 4 years ago

Still an issue in 2020? Trying to setup a localhost with https. I'm getting : HTTP/2 is currently unsupported for Node 10.0.0 and above, but will be supported once Express supports it Is there a release that has some sort of workaround? Even if it's dirty, I just need HTTPS for my vue app that uses webpack, thanks!

alexander-akait commented 4 years ago

@ereztdev please write about it in express repo, they still not implement http2 support in 2020

JakobJingleheimer commented 4 years ago

expressjs/express#2761

Herz3h commented 4 years ago

@evilebottnawi Is there a workaround in the meantime with node > 10.0 ? Using http/1.1 is so slow for development...

Edit: Here is example of a caddyfile to run a caddy reverse proxy for http/2:

localhost:3001

reverse_proxy 127.0.0.1:3000
tls localhost.pem localhost-key.pem

devServer should be run on port 3000 in this case. And caddy reverse proxy listens on port 3001. If you need to generate local certificates, I recommend mkcert

7rulnik commented 4 years ago

@Herz3h you can launch nginx or caddy and setup proxy to webpack-dev-server

wojtekmaj commented 4 years ago

spdy is effectively unmaintained

It just got an update this year after a long break, perhaps we should reconsider using it when developers explicitly want to? I'm using spdy for my personal project (it serves HTTP/2 well - unlike http2) and so far have no major issues with it on newest Node (14.x).

isrmicha commented 4 years ago

We should revive this

dflock commented 3 years ago

The issues preventing spdy from working on node > 11.1 are now fixed, btw: https://github.com/spdy-http2/handle-thing/pull/13

isrmicha commented 3 years ago

Node 15.0.1 have HTTP/3 QUIC experimental support. webpack-dev-server will implement that ?

csvan commented 3 years ago

How feasible would it be to use a different framework than Express to power webpack-dev-server? Express 5.0, which is tilted to have full http2 support, has been in alpha for about 7 years now, and there is no clear roadmap indicating when it will be released. Competing frameworks (koa, fastify etc) have all supported it for years and are actively maintained.

I asked the developers about the maintenance status and roadmap, and it seems to mostly boil down to them not having the resources and hoping the community will pitch in: https://github.com/expressjs/express/issues/4451

alexander-akait commented 3 years ago

we are looking at fastify for the our next default development framework

JakobJingleheimer commented 3 years ago

Express have thrown in the towel on http2: They've essentially said they're married to an underlying dead lib, spdy, for http2 support, so Express is unfortunately dying a slow death.

wojtekmaj commented 3 years ago

Guys, this is awkward, but... I just checked and http2 flag.... Works? Looks like the specific check that prevented it from being enabled on Node 10+ is gone from lib/Server.js with this change:

https://github.com/webpack/webpack-dev-server/commit/b0161e9852cdf41730e82aa43efe7e88f44a4f9d#diff-b706bbadb3d2315d99678f05e1f4bfd78a4bb4a7a6c65f3e81f1386fee3c883aL669-L678

So webpack-dev-server 4.0.0-beta.0 and up should run http/2 just fine. And it does!

image

alexander-akait commented 3 years ago

Yep, should work

alexander-akait commented 3 years ago

Stable release will be today

csvan commented 3 years ago

Can confirm that https: true works great in 4.0. Awesome work @alexander-akait

snitin315 commented 3 years ago

Can we close this issue then?

csvan commented 3 years ago

...however, http2 is quite unstable. Pretty sure that has to do with the SPDY package though.

alexander-akait commented 3 years ago

Yep, if we need http2, we need fix compatibility with http2 module in express or migrate on fastify or other frameworks, it requires more work, firstly we should do compatibility inside webpack-dev-middleware, but there are more middleware which require compatibility too

computnik commented 2 years ago

Seems like http2 is being supported now, but I observed that the proxy downgrades requests from http2 to http1.1, which was weird 🤔 Is that a known issue?

alexander-akait commented 2 years ago

@computnik Can you clarify?

lilbumblebear commented 2 years ago

@computnik @alexander-akait I'm curious if anyone is seeing the following errors related to http2 and chrome:

net::ERR_HTTP2_PROTOCOL_ERROR 200

I'm getting these errors intermittently for both API requests using proxy and webpack chunks. I've gone through all of the normal checks for the error (server side settings) and everything looks ok. I did see that the requests are proxied through as HTTP1.1 not 2.

xavierfoucrier commented 8 months ago

Hello @alexander-akait 👋

HNY2024 to all developers 🎉

I am wondering about http2 support as well. Use of http2 flag is deprecated. SPDY is deprecated.

Currently using the https flag with a self-signed certificate build with mkcert, but site is still running under http/1.1. May be I am missing something? 🤔

Thanks! 🥭

alexander-akait commented 8 months ago

@xavierfoucrier I am afraid express doesn't support it :disappointed: , but we want to allow to customize the app option and allow to use any web server in future, if you want to help it will be great

xavierfoucrier commented 8 months ago

Thanks @alexander-akait for you fast reply, as usual 🚀

I can understand the main direction, express team look a little bit slow on this 😓

Of course I would really love to be part of the webpack team and help on all webpack repositories: I am already using most of them. Unfortunately it means stop all my current private/professional projects to focus on open source, earn money through Github Sponsoring, and so on.. I am already part of open source teams, give part of my time for community, I guess I won't be lost inside this wide universe 🦄 Anyway, this is something I am (still) interested in!

My plans for 2024 are not write into the stone, so feel free to send me a direct message if it's something that could be possible.

Always a pleasure to talk with you Alexander 😽

alexander-akait commented 2 months ago

HTTP2 support is ready https://github.com/webpack/webpack-dev-server/pull/5267/, unfortunately, there are sad news, it is only for connect and connect compatibility framework which support HTTP2, Express developers have stopped working on it and we can't do anything here, that's why we decided to switch to connect by default from express in the next major (good news, it is really fast, around 3x-10x faster then express), anyway we implemented the app option - https://webpack.js.org/configuration/dev-server/#devserverapp, so the transition will be painless, all changes will be in the migration guide.

The simple solution to use HTTP2 is:

"use strict";

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  devServer: {
    app: () => require("connect")(),
    server: "http2"
  },
};

I plan to close this issue after merge, unfortunately we really can't do anything on the express side.

alexander-akait commented 2 months ago

Improved by https://github.com/webpack/webpack-dev-server/pull/5267/, please read above message

Feel free to feedback

xavierfoucrier commented 1 month ago

Thanks @alexander-akait for the update 👏

I have planned to check this when I am back from vacations. Sounds great to switch to connect as well 😎

bigcakes commented 1 month ago

@alexander-akait Fantastic, very excited to have this available! When do you think the version with this available will be ready?

alexander-akait commented 1 month ago

@bigcakes I think this week

SunshowerC commented 1 month ago

@alexander-akait it seems that still not released?

alexander-akait commented 1 month ago

Yeah( Hope will finish it soon, just need to finish - https://github.com/webpack/webpack-dev-server/pull/5275/

xavierfoucrier commented 3 weeks ago

I just dive into this today and it works really fine / fast 🚀

For those who are working with pure ES Modules, here is how you can implement http2 with webpack-dev-server:

import Connect from 'connect';

export default {
  entry: './src/index.js',
  mode: 'development',
  devServer: {
    app: () => Connect(),
    server: 'http2'
  },
};