Getting started with Elixir Dockerfile build fails with Phoenix 1.6

Phoenix
1

Hi all,

I am new to Elixir so I might have missed something, but Getting Started · Fly Docs appears to be out of date with the newer versions of Elixir and Phoenix. From the Phoenix 1.6 blog post:

In addition to the new HTML engine, we’ve also had a major change on the way the phx.new project generators handles assets. We have dropped webpack and node entirely from the equation. You can now build your js and css bundles without having node or npm on your system!

The Dockerfile tries to copy the Node assets which fails if you ran mix phx.new hello_elixir with Phoenix 1.6.

That is my best guess at why it is failing at least…here is the error:

Error error building: error rendering build status stream: COPY failed: file not found in build context or excluded by .dockerignore: stat assets/package.json: file does not exist

I deleted the .dockerignore file just in case that was the culprit, especially because I am using --remote-only (M1 Macs are awesome until it is Docker build time…).

Deleting anything relating to Node/npm in the Dockerfile results in a successful build.

2

Thanks for letting us know, we’ll take a look.

3

Yup, here’s the diff that makes Fly’s Dockerfile work & compile assets for Phoenix 1.6:

diff --git a/Dockerfile b/Dockerfile
index 69900e6..b0dbf21 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -4,7 +4,7 @@
 FROM hexpm/elixir:1.12.1-erlang-24.0.1-alpine-3.13.3 AS build
 
 # install build dependencies
-RUN apk add --no-cache build-base npm
+RUN apk add --no-cache build-base
 
 # prepare build dir
 WORKDIR /app
@@ -28,10 +28,6 @@ COPY config config
 RUN mix deps.get --only prod && \
     mix deps.compile
 
-# install npm dependencies
-COPY assets/package.json assets/package-lock.json ./assets/
-RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error
-
 COPY priv priv
 COPY assets assets
 
@@ -41,8 +37,7 @@ COPY assets assets
 # COPY lib lib
 
 # build assets
-RUN npm run --prefix ./assets deploy
-RUN mix phx.digest
+RUN mix assets.deploy
 
 # copy source here if not using TailwindCSS
 COPY lib lib

In other words, the following has changed:

  • no need to install npm (yay for the build time! double yay for not having to do separate stage if npm versioning is your thing)
  • no need to install npm dependencies
  • run mix assets.deploy (provided by generator in mix.exs) instead of npm deploy + mix phx.digest

Remember to run mix release.init or it will fail on copying rel.

Btw, you may alternatively stick to npm while using the rest of 1.6 goodies including esbuild in order to still take advantage of all the node packages for js, fonts etc. IMO this is The Way to Go™ and I’ve recently written a guide about this: https://cloudless.studio/wrapping-your-head-around-assets-in-phoenix-1-6. If you follow it, then the current Fly’s Dockerfile should work without changes.

@michael Perhaps I’ll get to commit this fix to the guide soon. :wink:

1 Like