Deploying dockerized version to production

[drKreso]

I have Docker image with node 19.9.0

How do I setup assets. Phoenix stuff is working.

If I use asssets.deploy alias it complains about .svelte components.

➜  holiday_shops git:(master) ✗  mix assets.deploy
✘ [ERROR] [plugin esbuild-svelte] Expected >

    svelte/OpenToday.svelte:40:2:
      40 │   <thead class="w-full">
         ╵   ^

  The plugin "esbuild-svelte" was triggered by this import

    import-glob:../svelte/**/*.svelte:2:85:
      2 │ ...* as module1 from '../svelte/OpenToday.svelte';import * as modul...
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] [plugin esbuild-svelte] Expected >

    svelte/OpenToday.svelte:40:2:
      40 │   <thead class="w-full">
         ╵   ^

  The plugin "esbuild-svelte" was triggered by this import

    import-glob:../svelte/**/*.svelte:2:85:
      2 │ ...* as module1 from '../svelte/OpenToday.svelte';import * as modul...
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1 error

If I use watcher for build it complains about esbuild module not being present.

Can someone share Docker setup and general approach

If I run docker build . on original example project and I avoid issue with copy rel rel I still get this (like in my docker)

 => ERROR [builder 18/21] RUN mix assets.deploy                                                                                                                                                                                                 1.7s
------
 > [builder 18/21] RUN mix assets.deploy:
#29 0.596 ✘ [ERROR] Could not resolve "live_svelte"
#29 0.596
#29 0.596     js/server.js:2:24:
#29 0.596       2 │ import {getRender} from "live_svelte"
#29 0.596         ╵                         ~~~~~~~~~~~~~
#29 0.596
#29 0.596   You can mark the path "live_svelte" as external to exclude it from the bundle, which will remove this error.
#29 0.596
#29 0.596 ✘ [ERROR] Could not resolve "live_svelte"
#29 0.596
#29 0.596     js/app.js:25:23:
#29 0.596       25 │ import {getHooks} from "live_svelte"
#29 0.596          ╵                        ~~~~~~~~~~~~~
#29 0.596
#29 0.596   You can mark the path "live_svelte" as external to exclude it from the bundle, which will remove this error.
#29 0.596
#29 0.962 1 error
#29 0.981 /app/assets/node_modules/esbuild/lib/main.js:1604
#29 0.981   let error = new Error(`${text}${summary}`);
#29 0.981               ^
#29 0.981
#29 0.981 Error: Build failed with 1 error:
#29 0.981 js/app.js:25:23: ERROR: Could not resolve "live_svelte"
#29 0.981     at failureErrorWithLog (/app/assets/node_modules/esbuild/lib/main.js:1604:15)
#29 0.981     at /app/assets/node_modules/esbuild/lib/main.js:1056:28
#29 0.981     at runOnEndCallbacks (/app/assets/node_modules/esbuild/lib/main.js:1476:61)
#29 0.981     at buildResponseToResult (/app/assets/node_modules/esbuild/lib/main.js:1054:7)
#29 0.981     at /app/assets/node_modules/esbuild/lib/main.js:1166:14
#29 0.981     at responseCallbacks.<computed> (/app/assets/node_modules/esbuild/lib/main.js:701:9)
#29 0.981     at handleIncomingPacket (/app/assets/node_modules/esbuild/lib/main.js:756:9)
#29 0.981     at Socket.readFromStdout (/app/assets/node_modules/esbuild/lib/main.js:677:7)
#29 0.981     at Socket.emit (node:events:513:28)
#29 0.981     at addChunk (node:internal/streams/readable:324:12) {
#29 0.981   errors: [
#29 0.981     {
#29 0.981       detail: undefined,
#29 0.981       id: '',
#29 0.981       location: {...

[AlmAnderson]

drKreso Did you ever find a fix?

I'm dealing with this right now too.

If I swap these commands the app runs locally, but when deployed on fly.io it doesn't load any of the styles

  "assets.deploy": [
    "esbuild blendwise_app --minify",
    "tailwind blendwise_app --minify",
    # "node build.js --deploy --prefix assets",
    "cmd --cd assets node build.js --deploy",
    "phx.digest",

[drKreso]

I think it was related to node verision(20 seems fine). I have this for deploy alias

      "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]

and this is my final Dockerfile(two phase, so I don't have elixir in prod)

I have this ARGs mumbo jumbo for Dockehub pipeline with hooks

ARG ELIXIR_VERSION=1.14.0
ARG OTP_VERSION=25.2
ARG DEBIAN_VERSION=bullseye-20221004-slim
ARG BUILDER_IMAGE="hexpm/elixir:${ELIXIR_VERSION}-erlang-${OTP_VERSION}-debian-${DEBIAN_VERSION}"
ARG RUNNER_IMAGE="debian:bullseye-20240110"

FROM ${BUILDER_IMAGE} as builder

ARG database_url
ENV DATABASE_URL=$database_url
ARG port
ENV PORT=$port
ARG secret_key_base
ENV SECRET_KEY_BASE=$secret_key_base
ARG release_level
ENV RELEASE_LEVEL=$release_level
ARG aws_access_key
ENV AWS_ACCESS_KEY=$aws_access_key
ARG aws_secret_key
ENV AWS_SECRET_KEY=$aws_secret_key
ARG aws_region
ENV AWS_REGION=$aws_region

# set build ENV
ENV MIX_ENV="prod"

# install build dependencies
RUN apt-get update -y && apt-get install -y build-essential git npm curl nodejs \
    && apt-get clean && rm -f /var/lib/apt/lists/*_*
RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && apt-get install -y nodejs

# prepare build dir
WORKDIR /app

# install hex + rebar
RUN mix local.hex --force && \
    mix local.rebar --force

# install mix dependencies
COPY mix.exs mix.lock ./
RUN mix deps.get --only $MIX_ENV
RUN mkdir config

# copy compile-time config files before we compile dependencies
# to ensure any relevant config change will trigger the dependencies
# to be re-compiled.
COPY config/config.exs config/${MIX_ENV}.exs config/

RUN mix deps.compile

COPY priv priv

COPY lib lib

COPY assets assets

# Install all npm packages
WORKDIR assets
RUN node --version
RUN npm install

WORKDIR ../

# compile assets
RUN mix assets.deploy

# Compile the release
RUN mix compile

# Changes to config/runtime.exs don't require recompiling the code
COPY config/runtime.exs config/

RUN mix release

COPY . .

# start a new build stage so that the final image will only contain
# the compiled release and other runtime necessities
FROM ${RUNNER_IMAGE}

RUN apt-get update -y && apt-get install -y libstdc++6 openssl libncurses5 locales curl nodejs imagemagick \
  && apt-get clean && rm -f /var/lib/apt/lists/*_*
  RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && apt-get install -y nodejs

# Set the locale
RUN sed -i '/en_US.UTF-8/s/^# //g' /etc/locale.gen && locale-gen

ENV LANG en_US.UTF-8
ENV LANGUAGE en_US:en
ENV LC_ALL en_US.UTF-8

WORKDIR "/app"
RUN chown nobody /app

# set runner ENV
ENV MIX_ENV="prod"

# Only copy the final release from the build stage
COPY --from=builder --chown=nobody:root /app/_build/${MIX_ENV}/rel/. ./

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]

USER nobody

CMD ["mix", "phx.server"]

hooks build file for Docker hub

#!/usr/bin/env sh

docker build \
        -t $docker_hub_repo_name \
        --build-arg database_url=$database_url \
        --build-arg port=$port \
        --build-arg secret_key_base=$secret_key_base \
        --build-arg aws_access_key=$aws_access_key \
        --build-arg aws_secret_key=$aws_secret_key \
        --build-arg aws_region=$aws_region \
        --build-arg mix_env=$mix_env \
        --build-arg release_level=$release_level .

I am not sure if this is relevant, I've never did anything on fly.io and have no idea how they work. This is classic Docker for Docker Swarm or K8 setup

[AlmAnderson]

So I was able to fix the issue. For some reason, the CSS file wasn't being generated for me.

But this fixed it for me, hopefully this helps someone else who ends up with the problem. I don't know enough about this stack & docker to understand why the file wasn't being generated.

compile assets section:
RUN mix cmd 'cd assets && node build.js --deploy'
RUN mix tailwind app_name --minify