Skip to content

Gitpod: Allow webpack dev server to run with hot module reloading

Overview

We currently set webpack to compile static assets

Every time a frontend asset changes, all of the JavaScript needs to be recompiled. This is slow and not a good DX experience.

Proposal (optional)

  • We should disable webpack.static: true and in favor of webpack.live_reload: false. This will allow for incremental compilation. However hot module reloading is not functioning with this setting, so a user will have to reload the page.
  • Properly support hot module reloading:

Not a lot is needed for this:

Only caveat, in GitPod the webpack dev server runs under https://3808-<fooo>.gitpod.io/ while gitlab itself runs under https://3000-<fooo>.gitpod.io/. There are two potential approaches:

  1. Proxy webpack dev server via nginx. Since !2437 (merged) we can do that. The gdk.yml should look like this for webpack:

    webpack:
  public_address: 'wss://3000-<fooo>.gitpod.io/_hmr/'

    This should be easily settable, similar to this: https://gitlab.com/gitlab-org/gitlab/-/blob/e75607ff97e42f48abf1e5f4f37a4df8be2b35d4/.gitpod.yml#L48

    However: the gitpod image doesn't have nginx installed and when I tried to get it to work, it didn't.

  2. Use webpack dev server directly. Then the webpack config would look like:

    webpack:
  public_address: 'wss://3808-<fooo>.gitpod.io/ws/'

    In order to get this to work, we need to set two things:

    • Correct CSP in gitlab.yml which would get easier with gitlab!80303 (merged).
    • the env variable DEV_SERVER_ALLOWED_HOSTS=.gitpod.io (leading dot important) in order to tell webpack it is okay to get connections from gitpod addresses.
Edited by Lukas Eipert