Gitpod: Live reload does not work for parcel/webpack

[maksimr]

Example project:

https://github.com/maksimr/playground

STR:

• Open gitpod.io/#https://github.com/maksimr/playground
• Open terminal npm ci
• Run task npm start
• In popup select Make port public and Open preview
• Change index.js

AR: Preview show old result
ER: Preview refreshed/reloaded and show new result

If manually press “Refresh” it would show new result

The same problem with webpack configuration
https://github.com/maksimr/y

OS: iPadOS 14

[akosyakov]

I'm not sure whether it is gitpod issue or misconfiguration of parcel. The preview listens to file changes when an opened URL is pointing to a file. In this case though the content is fetch from a server started by parcel. I would expect that parcel or webpack devserver is responsible to trigger hot reload, and it should work in the preview and in a new browser window.

Could you point to docs about how to configure live reload for parcel?

[maksimr]

@akosyakov parcel already has preconfigured server with live reload. There are not so much room to configure it manually :(

Parcel has a development server built in, which will automatically rebuild your app as you change files and supports hot module replacement for fast development. Point it at your entry file:
https://parceljs.org/getting_started.html

But live reload works locally and in codesandbox (which use parcel by default)

I could create minimal example with webpack if it would help. Because webpack also doesn’t work for me in gitpod

[maksimr]

@akosyakov I believe that I have not configured something properly on gitpod because for example
https://github.com/4GeeksAcademy/react-hello-webapp works for me but only for port 3000 if I change port on 8080 for example it would not reload the page so I believe there are some configuration for gitpod

[maksimr]

Playground with webpack - https://github.com/maksimr/playground/tree/webpack

[akosyakov]

Parcel tries to establish a web socket to hot reload server but fails:

We expect that external URLs shoudl be consrcuted like ${port}-${windowl.location.href} and all on the same port. Parcel though does ${windowl.location.href}:${port).

@svenefftinge Maybe you have an idea how to deal with?

Not sure about webpack yet. https://github.com/4GeeksAcademy/react-hello-webapp works for me on both ports 3000 and 8080.

[akosyakov]

Something like https://github.com/parcel-bundler/parcel/issues/2275 could help. It would be helpful if someone comments this use case on the issue. Maybe they can provide hints how to work it around. Glitch seems to use the proxy for it, but it would be nicer if it works out of the box.

[maksimr]

@akosyakov thanks a lot! I have created an example with webpack.

I have tried to run in on PC to debug and see that requests to fetch changes failed

[maksimr]

Hm... in webpack examples it tries to go on port 3000

[akosyakov]

@alesanchezr Hi, sorry to bother. Maybe you can shed some light how you managed to enable hot reload for https://github.com/4GeeksAcademy/react-hello-webapp and what is missing in https://github.com/maksimr/playground/tree/webpack?

[akosyakov]

It works with [email protected], but now with latest :(

[maksimr]

@akosyakov I was able to run live reload in latest webpack by passing --sockPort=443. Otherwise, webpack try to poll <host>:<serverPort> but gitpod.io proxy only 443(for https) port

[maksimr]

Another solution use --public and gp url

webpack-dev-server -d --disable-host-check --host 0.0.0.0 --port 3000 --public $(gp url 3000)

[akosyakov]

Maybe something worthwhile to document here: https://www.gitpod.io/docs/languages-and-frameworks/

[nisarhassan12]

I have opened an issue for it on the documentation website repo https://github.com/gitpod-io/website/issues/771. Will make a Pr soon.

[maksimr]

@nisarhassan12 but currently parcel doesn't have proper solution due their implementation, only webpack

[nisarhassan12]

@maksimr Thanks. You're right. https://github.com/parcel-bundler/parcel/pull/3324

We will hopefully try to make a PR and have a proper solution implemented in Parcel soon in the future.

For now, We are planning to document something like this which is a hack we used to make Live reload work for Svelte which uses Rollup as a module bundler.

[fabrizim]

I got this working using a similar approach as the svelte patch, adding the following to the init task in the .gitpod.yml file:

sed -ri "s/hostname\s+\s':'\s+\sprocess\.env\.HMR_PORT/hostname.replace(\/^(\\d+)\/, process.env.HMR_PORT) + ':443'/" ./node_modules/parcel-bundler/src/builtins/hmr-runtime.js

Hope that helps someone else. FYI - this is only for parcel v1.

[nisarhassan12]

Thanks, @fabrizim for sharing this.

@jankeromnes is probably working on a Pr for parcel v2 once that is merged we will no longer have to hack our way around this and we will be able to do it like it's done here https://github.com/gitpod-io/sveltejs-template.

The time this https://github.com/nisarhassan12/svelte/blob/7145c752efe1531d9523ff48bfad21e373d418aa/.gitpod.yml#L7 was wriiten I think there were no clientUrl option available to help.

[alesanchezr]

I don't know if I'm too late @jankeromnes @maksimr but here is how @unocongafas was able to fix this issue within our boilerplates: Add this into your webpack.config:

const [schema, host] = process.env.GITPOD_WORKSPACE_URL.split('://')
const publicUrl = `3000-${host}`

module.exports = {
    ...
    devServer: {
        ...
        public: publicUrl
    },
}