overtune

overtune

NPM dependancy and production build

Hi!

I’m struggling a bit with Phoenix and assets.
I have added a dependancy from npm (installed it in the assets-folder according to the docs).
It works fine for development, but I’m having problems with deployments/production.

I use the generated Dockerfile, but when it tries to build it can’t find the npm-package (npm install has not been runned).

What I find a bit lacking in the docs is if I’m supposed to handle this myself? Or should the esbuild task handle this?

(E.g. do I need to add a buildstep in the Dockerfile where I use node to install the package?)

Thanks!

Marked As Solved

LostKobrakai

LostKobrakai

That’s the case. The phoenix boilerplate does use neither node nor npm. So if you want to use those you need to add them to all the necessary places including the docker setup.

Also Liked

overtune

overtune

I ended up adding a nodejs stage which installs the dependancies first.
Like this:

ARG NODE_BUILDER_IMAGE="node:18.17.1-alpine"

########################################
# 1. Build nodejs frontend
########################################
FROM ${NODE_BUILDER_IMAGE} as node-builder

# prepare build dir
RUN mkdir -p /app/assets
WORKDIR /app

# set build ENV
ENV NODE_ENV=prod

# install npm dependencies
COPY assets/package.json assets/package-lock.json ./assets/
RUN cd assets && npm ci

# build assets
COPY assets assets

And on the builder stage, instead of copying the assets from the host, I copy them from the node builder:

# COPY assets assets
COPY --from=node-builder --chown=nobody:root /app/assets ./assets

This seems to work (at least for my current project/setup).

I also feel that this perhaps should be a part of the generator? Like if it detects a package.json in the assets folder it adds an install step to the Dockerfile.

Last Post!

overtune

overtune

Ok! Yes, it can be bit of a pain :slight_smile:

Where Next?

Popular in Questions Top

New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New

Other popular topics Top

Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

We're in Beta

About us Mission Statement