search

trunk-rs / trunk

Build, bundle & ship your Rust WASM application to the web.
https://trunkrs.dev/
Apache License 2.0
3.4k stars 246 forks source link

Hot Reload fails for index.scss mounted as file into docker container #282

Closed jonsson-nils closed 9 months ago

jonsson-nils commented 2 years ago

Setup

For the development of my multi-service application I use a set of Dockerfiles and docker-compose.*.ymls to describe the environment. Therefore I bind-mount several top-level files (Cargo.*, index.*, etc) and my src folder into my container.

I use yew as UI library. You can probably use any of the example from the yew repository to reproduce.

[package]
name = "webui"
version = "0.1.0"
edition = "2021"

[dependencies.instant]
version = "0.1"
features = ["wasm-bindgen"]

[dependencies.lipsum]
version = "0.8"

[dependencies.log]
version = "0.4"

[dependencies.getrandom]
version = "0.2"
features = ["js"]

[dependencies.rand]
version = "0.8"
features = ["small_rng"]

[dependencies.wasm-logger]
version = "0.2"

[dependencies.serde]
version = "1.0"
features = ["derive"]

[dependencies.lazy_static]
version = "1.4.0"

[dependencies.gloo-timers]
version = "0.2"

[dependencies.yew]
git = "https://github.com/yewstack/yew"
branch = "master"

[dependencies.yew-router]
git = "https://github.com/yewstack/yew"
branch = "master"

[dev-dependencies]
wasm-bindgen-test = "0.3"

[profile.dev]
opt-level = 0

[profile.web]
inherits = "release"
opt-level = 3
services:
  webui:
    build:
      context: webui
      dockerfile: docker/Development.Dockerfile
      args:
        RUST_TOOLCHAIN: ${RUST_TOOLCHAIN}
        RUST_PROFILE: dev
    volumes:
      - webui-cache-target:/app/code/target:delegated
      - webui-cache-dist:/app/code/dist:delegated
      - ${PWD}/webui/Cargo.toml:/app/code/Cargo.toml:ro,cached
      - ${PWD}/webui/Cargo.lock:/app/code/Cargo.lock:ro,cached
      - ${PWD}/webui/index.html:/app/code/index.html:ro,cached
      - ${PWD}/webui/index.scss:/app/code/index.scss:ro,cached
      - ${PWD}/webui/src:/app/code/src:ro,cached
volumes:
  webui-cache-target: null
  webui-cache-dist: null
FROM rust:latest

ARG RUST_TOOLCHAIN
RUN [ ! -z "${RUST_TOOLCHAIN}" ]

ARG RUST_PROFILE
RUN [ ! -z "${RUST_PROFILE}" ]

RUN rustup toolchain install ${RUST_TOOLCHAIN} \
 && rustup default ${RUST_TOOLCHAIN}
RUN rustup target add wasm32-unknown-unknown

RUN cargo install --locked trunk
RUN cargo install wasm-bindgen-cli

WORKDIR /app/code

VOLUME [ "/app/code/src" ]
VOLUME [ "/app/code/target" ]
VOLUME [ "/app/code/dist" ]

CMD [ "trunk", "serve" ]

Background

The goal of this approach is to keep the target and dist folder within the container and outside of the container seperate such that the container does not corrupt stuff for the IDE and vice versa.

Known workarounds:

Bind-mount the root folder of your project into the container.

SledNeck666Qc commented 2 years ago

Setup

For the development of my multi-service application I use a set of Dockerfiles and docker-compose.*.ymls to describe the environment. Therefore I bind-mount several top-level files (Cargo.*, index.*, etc) and my src folder into my container.

I use yew as UI library. You can probably use any of the example from the yew repository to reproduce.

[package]
name = "webui"
version = "0.1.0"
edition = "2021"

[dependencies.instant]
version = "0.1"
features = ["wasm-bindgen"]

[dependencies.lipsum]
version = "0.8"

[dependencies.log]
version = "0.4"

[dependencies.getrandom]
version = "0.2"
features = ["js"]

[dependencies.rand]
version = "0.8"
features = ["small_rng"]

[dependencies.wasm-logger]
version = "0.2"

[dependencies.serde]
version = "1.0"
features = ["derive"]

[dependencies.lazy_static]
version = "1.4.0"

[dependencies.gloo-timers]
version = "0.2"

[dependencies.yew]
git = "https://github.com/yewstack/yew"
branch = "master"

[dependencies.yew-router]
git = "https://github.com/yewstack/yew"
branch = "master"

[dev-dependencies]
wasm-bindgen-test = "0.3"

[profile.dev]
opt-level = 0

[profile.web]
inherits = "release"
opt-level = 3
services:
  webui:
    build:
      context: webui
      dockerfile: docker/Development.Dockerfile
      args:
        RUST_TOOLCHAIN: ${RUST_TOOLCHAIN}
        RUST_PROFILE: dev
    volumes:
      - webui-cache-target:/app/code/target:delegated
      - webui-cache-dist:/app/code/dist:delegated
      - ${PWD}/webui/Cargo.toml:/app/code/Cargo.toml:ro,cached
      - ${PWD}/webui/Cargo.lock:/app/code/Cargo.lock:ro,cached
      - ${PWD}/webui/index.html:/app/code/index.html:ro,cached
      - ${PWD}/webui/index.scss:/app/code/index.scss:ro,cached
      - ${PWD}/webui/src:/app/code/src:ro,cached
volumes:
  webui-cache-target: null
  webui-cache-dist: null
FROM rust:latest

ARG RUST_TOOLCHAIN
RUN [ ! -z "${RUST_TOOLCHAIN}" ]

ARG RUST_PROFILE
RUN [ ! -z "${RUST_PROFILE}" ]

RUN rustup toolchain install ${RUST_TOOLCHAIN} \
 && rustup default ${RUST_TOOLCHAIN}
RUN rustup target add wasm32-unknown-unknown

RUN cargo install --locked trunk
RUN cargo install wasm-bindgen-cli

WORKDIR /app/code

VOLUME [ "/app/code/src" ]
VOLUME [ "/app/code/target" ]
VOLUME [ "/app/code/dist" ]

CMD [ "trunk", "serve" ]

Background

The goal of this approach is to keep the target and dist folder within the container and outside of the container seperate such that the container does not corrupt stuff for the IDE and vice versa.

Known workarounds:

Bind-mount the root folder of your project into the container.

github-actions[bot] commented 9 months ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

github-actions[bot] commented 9 months ago

This issue was closed because it has been stalled for 5 days with no activity.