🧩 Plasmo Developers•2mo ago

Is there anyway to get the plasmo dev server working in a docker container? pnpm dev works on host

The server is all up and running using node:18-bullseye. However when i load unpacked into chrome it says that it cannot connect with the websockets running on ws://localhost:1815 and ws://localhost:1816.

function A(e) {
    if (typeof globalThis.WebSocket > "u") return;
    let t = new WebSocket(C());
    return t.addEventListener("message", async function(o) {
        let s = JSON.parse(o.data);
        if (s.type === "update" && await e(s.assets), s.type === "error") for (let r of s.diagnostics.ansi){
            let l = r.codeframe || r.stack;
            f("[plasmo/parcel-runtime]: " + r.message + `
` + l + `

function A(e) {
    if (typeof globalThis.WebSocket > "u") return;
    let t = new WebSocket(C());
    return t.addEventListener("message", async function(o) {
        let s = JSON.parse(o.data);
        if (s.type === "update" && await e(s.assets), s.type === "error") for (let r of s.diagnostics.ansi){
            let l = r.codeframe || r.stack;
            f("[plasmo/parcel-runtime]: " + r.message + `
` + l + `

I have attempted to - add host permissions to allow for all localhost connection in the manifest. - put the container network in host mode - changed ip address binding for the container around from 0.0.0.0 to 127.0.0.1 As mentioned when running on the host machine this connection is completely fine. Thanks!

7 Replies

Sam•2mo ago

If you're running the extension built in Docker from the host machine you'll need to expose the port from within docker. and even then I'm not sure if you'll be able to connect to the Docker container VIA localhost.

sharkeatbearOP•2mo ago

Hi @Sam I am indeed exposing the port from with in the container. In the Dockerfile i expose the following ports.

EXPOSE 1012
EXPOSE 1815
EXPOSE 1816

EXPOSE 1012
EXPOSE 1815
EXPOSE 1816

1815 is for the HMR and 1816 i think is for the reporting. I then use a docker-compose file.

version: '3.8'
services:  
  forager:
    build:
      context: .
      target: builder
    volumes:
      - ./build:/app/build
      - ./src:/app/src
      - ./assets:/app/assets
      - ./package.json:/app/package.json
      - ./tailwind.config.js:/app/tailwind.config.js
      - ./postcss.config.js:/app/postcss.config.js
      - ./tsconfig.json:/app/tsconfig.json
      - ./next-env.d.ts:/app/next-env.d.ts
      - ./.plasmo:/app/.plasmo
    ports:
      - "127.0.0.1:1012:1012"
      - "127.0.0.1:1815:1815"
      - "127.0.0.1:1816:1816"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    # network_mode: "host"
    command: pnpm dev
    stdin_open: true
    tty: true

version: '3.8'
services:  
  forager:
    build:
      context: .
      target: builder
    volumes:
      - ./build:/app/build
      - ./src:/app/src
      - ./assets:/app/assets
      - ./package.json:/app/package.json
      - ./tailwind.config.js:/app/tailwind.config.js
      - ./postcss.config.js:/app/postcss.config.js
      - ./tsconfig.json:/app/tsconfig.json
      - ./next-env.d.ts:/app/next-env.d.ts
      - ./.plasmo:/app/.plasmo
    ports:
      - "127.0.0.1:1012:1012"
      - "127.0.0.1:1815:1815"
      - "127.0.0.1:1816:1816"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    # network_mode: "host"
    command: pnpm dev
    stdin_open: true
    tty: true

I try to bing directly to the local network interface. I've also tried leaving it out, but nothing lets me connect to port 1815 or 1816. I've also tried binding to 0.0.0.0 which also doesn't work. I've commented out network_mode: "host" as well because i tried that to no avail. I am on a MacOS if that helps. But i'm genuinely curious if anybody else has got this working. I'm sure i'm missing something dumb. It could be to do with local firewall settings?

Arcane•2mo ago

@sharkeatbear has reached level 1. GG!

Sam•2mo ago

Is there a particular reason you're trying to do the development work within docker?

sharkeatbearOP•2mo ago

Portability, and it is a better developer experience when first spinning up. I just like having consistent environments to develop with. I'm happy to help with any kind of debugging here if need be. Or if it's not possible then I can at least cut my losses.

Sam•4w ago

I feel as though the JS ecosystem has achieved a high level of portability. This project uses PNPM by default which I always recommend. I think if you add an .nvmrc and use the packageManager property in the package.json that should make it portable. Using Docker is quite heavy IMO. You have a lot of ports to forward and you won't get the build output in your console. If you use nvm or a similar node management tool you can configure your shell to auto switch. Now if you use something that has to be compiled that can get a little tricky. But if you follow best practices it should be very portable. For example I always pin my dependencies. It might be a little more management but it will provide consistent results.

sharkeatbearOP•4w ago

It's nothing against the JS ecosystem, and perhaps Docker is not as 'lightweight' as running it on the host, but that IMO is a fine trade off to be able to run docker-compose up and have all my monorepo dev services spun up including plasmo. I don't disagree all of those tools you mentioned certainly enhance portability, but i'm sure you can understand why I still might opt for a container. If it's not feasible without too much effort then no worries.

Gaming

Programming

Is there anyway to get the plasmo dev server working in a docker container? pnpm dev works on host