# elixir alpinejs on fly fail to install

**URL:** <https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542>\
**Category:** General\
**Tags:** elixir\
**Created:** [June 7, 2022, 11:20pm UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542 "2022-06-07T23:20:15Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![semdinsp](https://sea1.discourse-cdn.com/fly1/user_avatar/community.fly.io/semdinsp/32/13253_2.png) [@semdinsp](https://community.fly.io/u/semdinsp)\
**Post date:** [June 7, 2022, 11:20pm UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/1 "2022-06-07T23:20:16Z")

</div>

I am struggling with Alpine and fly. The app works well locally and does not produce any errors.

flyctl launch produces the following:

Downloading esbuild from [https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.29.tgz](https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.29.tgz)  
#22 1.625 ✘ [ERROR] Could not resolve “alpinejs”  
#22 1.625  
#22 1.625 js/app.js:23:19:  
#22 1.625 23 │ import Alpine from “alpinejs”

Alpine is in dependencies

when I remove the import line the fly app deploys and seems to work. However, all the css code does not as one would expect.

If you have pointers to try I would appreciate it.

---

<div class="post-metadata">

**Author:** ![chrismccord](https://sea1.discourse-cdn.com/fly1/user_avatar/community.fly.io/chrismccord/32/50976_2.png) [@chrismccord](https://community.fly.io/u/chrismccord)\
**Post date:** [June 8, 2022, 5:42pm UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/2 "2022-06-08T17:42:47Z")

</div>

are you using npm? The default Dockerfile generated by phoenix does not include npm. If you need npm deps, you need to modify your docker file to do your node things:

```auto
# Initial setup
$ mix deps.get --only prod
$ MIX_ENV=prod mix compile

# Install / update JavaScript dependencies
$ npm install --prefix ./assets

# Compile assets
$ npm run deploy --prefix ./assets
$ mix phx.digest

```

ref: [Deploying with Releases — Phoenix v1.5.13](https://hexdocs.pm/phoenix/1.5.13/releases.html)

---

<div class="post-metadata">

**Author:** ![semdinsp](https://sea1.discourse-cdn.com/fly1/user_avatar/community.fly.io/semdinsp/32/13253_2.png) [@semdinsp](https://community.fly.io/u/semdinsp)\
**Post date:** [June 8, 2022, 7:40pm UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/3 "2022-06-08T19:40:20Z")

</div>

Thank you. I will play around with this. Since fly builds the docker file I will need to figure out how to add these commands with the correct image.

---

<div class="post-metadata">

**Author:** ![semdinsp](https://sea1.discourse-cdn.com/fly1/user_avatar/community.fly.io/semdinsp/32/13253_2.png) [@semdinsp](https://community.fly.io/u/semdinsp)\
**Post date:** [June 8, 2022, 9:45pm UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/4 "2022-06-08T21:45:03Z")

</div>

Thank you. Figure it out with your hint and your previous help to Andrew Barr at  
[https://andrewbarr.io/posts/removing-npm/show](https://andrewbarr.io/posts/removing-npm/show)

I appreciate your help immensely

---

<div class="post-metadata">

**Author:** ![johnsonlincoln](https://avatars.discourse-cdn.com/v4/letter/j/7c8e57/32.png) [@johnsonlincoln](https://community.fly.io/u/johnsonlincoln)\
**Post date:** [June 23, 2022, 1:02am UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/5 "2022-06-23T01:02:10Z")

</div>

hi @semdinsp could you please share the Dockerfile you used to do this successfully ? My Dockerfile generated by Fly does not have npm so the great tutorial by Andrew Barr to set up tailwind did not work for me. I’ve tried adding npm and nodejs to docker image but still end up with

````auto
#24 4.928 ✘ [ERROR] Could not resolve "alpinejs"
#24 4.928
#24 4.928 js/app.js:27:19:
#24 4.928 27 │ import Alpine from "alpinejs"
#24 4.928 ╵ ~~~~~~~~~~
#24 4.928
#24 4.928 You can mark the path "alpinejs" as external to exclude it from the bundle, which will remove this error.```

Both tailwind and alpine are working fine in dev however i cant `fly deploy` successfully :/
thank you!!!
````

---

<div class="post-metadata">

**Author:** ![msimonborg](https://sea1.discourse-cdn.com/fly1/user_avatar/community.fly.io/msimonborg/32/3652_2.png) [@msimonborg](https://community.fly.io/u/msimonborg)\
**Post date:** [June 23, 2022, 3:11am UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/7 "2022-06-23T03:11:21Z")

</div>

@johnsonlincoln What did you try in your Dockerfile? The lines to use npm are included in the file on the tutorial, they are just commented out.

Although, are you using Phoenix 1.6 with esbuild? And are you using npm for anything besides Alpine? If you are on 1.6 and only using npm for alpine, another option is to skip npm completely and just vendor the JS directly in your assets folder. This is what I do and it works fine for me locally and in prod on fly, with no changes to the vanilla Dockerfile.

1. visit [unpkg.com/alpinejs](http://unpkg.com/alpinejs) to get source code of the latest version of Alpine
2. create a file `assets/vendor/alpine.js` and paste the Alpine code
3. in `assets/js/app.js` add the line `import Alpine from "../vendor/alpine"`

That’s it!

---

<div class="post-metadata">

**Author:** ![semdinsp](https://sea1.discourse-cdn.com/fly1/user_avatar/community.fly.io/semdinsp/32/13253_2.png) [@semdinsp](https://community.fly.io/u/semdinsp)\
**Post date:** [June 23, 2022, 3:50am UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/8 "2022-06-23T03:50:12Z")

</div>

Sorry. I was able to get it working.  
I used mr mccords and mr Barr suggestions to get rid of npm…

[https://andrewbarr.io/posts/removing-npm/show](https://andrewbarr.io/posts/removing-npm/show)

I then added alpine to my root.html.heex file

Obviously you could download this file and put it into your directory structure.  
This all seems to work and seems simpler than using npm

Your mileage will vary day by day. 🙂

S

---

<div class="post-metadata">

**Author:** ![johnsonlincoln](https://avatars.discourse-cdn.com/v4/letter/j/7c8e57/32.png) [@johnsonlincoln](https://community.fly.io/u/johnsonlincoln)\
**Post date:** [June 23, 2022, 8:17am UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/9 "2022-06-23T08:17:51Z")

</div>

hey! This worked !!! thank you so much!!  
just for posterity:

- using phoenix ` {:phoenix, "~> 1.6.10"},`
- not using npm for anything besides alpine
- no changes Dockerfile created by Fly

thank you!!!

---

<div class="post-metadata">

**Author:** ![johnsonlincoln](https://avatars.discourse-cdn.com/v4/letter/j/7c8e57/32.png) [@johnsonlincoln](https://community.fly.io/u/johnsonlincoln)\
**Post date:** [June 23, 2022, 8:23am UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/10 "2022-06-23T08:23:19Z")

</div>

thank you @semdinsp . @msimonborg 's solution worked perfectly for me!

just for my own edification though; what do you mean by adding alpine to `root.html.heex` , do you mean in the header as script from cdn? would you mind posting that part of your your `root.html.heex` file please 🙂 ?

i ended up just saving alpine source to `assets/vendor/alpine.js` and adding `import Alpine from "../vendor/alpine"` in `app.js` and all good 🙂

---

<div class="post-metadata">

**Author:** ![msimonborg](https://sea1.discourse-cdn.com/fly1/user_avatar/community.fly.io/msimonborg/32/3652_2.png) [@msimonborg](https://community.fly.io/u/msimonborg)\
**Post date:** [June 23, 2022, 11:41am UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/11 "2022-06-23T11:41:18Z")

</div>

> [@johnsonlincoln](#):
>
> what do you mean by adding alpine to `root.html.heex` , do you mean in the header as script from cdn?

I think it would be exactly that, following the snippet from the Alpine landing page

```auto
<script src="//unpkg.com/alpinejs" defer></script>

```

I started off with this but quickly switched to vendoring for a few reasons:

1. Version control. `unpkg.com/alpinejs` always returns the latest version, so if you’re pulling it in on every page load eventually something could break. Vendoring locks the version until you decide to hit that url yourself to copy and replace the code
2. Bundles everything with your response to avoid the extra http call on page load to fetch the JS
3. Vendoring is more secure than hitting a CDN

As @semdinsp said, YMMV of course!

---

<div class="post-metadata">

**Author:** ![semdinsp](https://sea1.discourse-cdn.com/fly1/user_avatar/community.fly.io/semdinsp/32/13253_2.png) [@semdinsp](https://community.fly.io/u/semdinsp)\
**Post date:** [June 23, 2022, 5:25pm UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/12 "2022-06-23T17:25:25Z")

</div>

Yes your explanation for my poor communication skills is exactly correct.  
I added a script tag to root.html.heex to pull in alpine in the header section

I was also trying to say that if you did not like that approach (ie pulling from the web) you could install the same file ‘alpinejs’ in your project file system and pull it in from there

Here is header of root.html.heex  
The body section is normal

\<%= live\_title\_tag assigns[:page\_title] || “Mwcweb”, suffix: " · Phoenix Framework" %\>

---

<div class="post-metadata">

**Author:** ![johnsonlincoln](https://avatars.discourse-cdn.com/v4/letter/j/7c8e57/32.png) [@johnsonlincoln](https://community.fly.io/u/johnsonlincoln)\
**Post date:** [June 24, 2022, 4:35pm UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/13 "2022-06-24T16:35:36Z")

</div>

thank you for all your help!!!

---

<div class="post-metadata">

**Author:** ![johnsonlincoln](https://avatars.discourse-cdn.com/v4/letter/j/7c8e57/32.png) [@johnsonlincoln](https://community.fly.io/u/johnsonlincoln)\
**Post date:** [June 24, 2022, 4:36pm UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/14 "2022-06-24T16:36:07Z")

</div>

awesome, thank you!!

---

<div class="post-metadata">

**Author:** ![d71](https://sea1.discourse-cdn.com/fly1/user_avatar/community.fly.io/d71/32/4147_2.png) [@d71](https://community.fly.io/u/d71)\
**Post date:** [June 29, 2022, 9:55pm UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/15 "2022-06-29T21:55:09Z")

</div>

> [@johnsonlincoln](#):
>
> import Alpine from “…/vendor/alpine”

@johnsonlincoln I tried to save the alpine source to `assets/vendor/alpine.js` and added this to my `app.js` file.

```auto
import Alpine from "../vendor/alpine"

window.Alpine = Alpine
Alpine.start()

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
  params: {_csrf_token: csrfToken},
  dom: {
    onBeforeElUpdated(from, to) {
      if (from._x_dataStack) {
        window.Alpine.clone(from, to)
      }
    }
  }
})

```

Alpine seems to load, but I get an error in the console that breaks form bindings LiveView. Removing the alpine import fixes the form binding issue, but of course, breaks alpine.

Have you experienced the same thing?

Here’s the error I get

```auto
Uncaught TypeError: import_alpine.default.start is not a function

```

---

<div class="post-metadata">

**Author:** ![d71](https://sea1.discourse-cdn.com/fly1/user_avatar/community.fly.io/d71/32/4147_2.png) [@d71](https://community.fly.io/u/d71)\
**Post date:** [June 29, 2022, 11:31pm UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/16 "2022-06-29T23:31:35Z")

</div>

Looks like this might be an issue with Alpine.

I removed these lines and things _appear_ to be working fine now…

```diff
import Alpine from "../vendor/alpine"

-window.Alpine = Alpine
-Alpine.start()

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
  params: {_csrf_token: csrfToken},
  dom: {
    onBeforeElUpdated(from, to) {
      if (from._x_dataStack) {
        window.Alpine.clone(from, to)
      }
    }
  }
})

```

---

<div class="post-metadata">

**Author:** ![msimonborg](https://sea1.discourse-cdn.com/fly1/user_avatar/community.fly.io/msimonborg/32/3652_2.png) [@msimonborg](https://community.fly.io/u/msimonborg)\
**Post date:** [June 30, 2022, 6:31pm UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/17 "2022-06-30T18:31:26Z")

</div>

it’s not an issue with Alpine, you just don’t need those lines on the latest versions!

your app.js looks good 👍

---

<div class="post-metadata">

**Author:** ![mvdev](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@mvdev](https://community.fly.io/u/mvdev)\
**Post date:** [September 6, 2022, 10:17am UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/18 "2022-09-06T10:17:50Z")

</div>

I found myself here with a project that needed Node/NPM to install other packages in addition to Alpine. If you’re in a similar situation, you can add Node/NPM as dependencies in your Dockerfile, in between `COPY assets assets` and `RUN mix assets.deploy`. I understand these deps were recently removed from the default Dockerfile with the advent of esbuild, but should you need Node/NPM for any reason, the below advice will work.

I followed a StackOverflow answer on how to add Node to my Dockerfile using NVM:

```auto
COPY assets assets

ENV NODE_VERSION=16.17.0
RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
ENV NVM_DIR=/root/.nvm
RUN . "$NVM_DIR/nvm.sh" && nvm install ${NODE_VERSION}
RUN . "$NVM_DIR/nvm.sh" && nvm use v${NODE_VERSION}
RUN . "$NVM_DIR/nvm.sh" && nvm alias default v${NODE_VERSION}
ENV PATH="/root/.nvm/versions/node/v${NODE_VERSION}/bin/:${PATH}"
RUN node --version
RUN npm --version

# install npm deps before running esbuild
RUN npm install --prefix ./assets

# compile assets
RUN mix assets.deploy

```

You’ll also need to add curl as a dependency to your package for this installation script to work, so the RUN line at line 25 needs to be modified slightly:

```auto
# install build dependencies
RUN apt-get update -y && apt-get install -y build-essential git curl \
    && apt-get clean && rm -f /var/lib/apt/lists/*_*

```

That being said, if you’re just using Alpine and don’t expect the JS footprint of your app to grow significantly, inlining Alpine as per @msimonborg’s answer works too, with fewer modifications required.

---

<div class="post-metadata">

**Author:** ![lucasmanual](https://avatars.discourse-cdn.com/v4/letter/l/9dc877/32.png) [@lucasmanual](https://community.fly.io/u/lucasmanual)\
**Post date:** [January 2, 2023, 10:39pm UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/19 "2023-01-02T22:39:42Z")

</div>

What is the correct solution as of Jan 2023?

> npm run deploy --prefix ./assets  
> npm ERR! Missing script: “deploy”  
> npm ERR!  
> npm ERR! To see a list of scripts, run:  
> npm ERR! npm run
> 
> npm ERR! A complete log of this run can be found in:

original error I’m trying to solve:\>

> =\> CACHED [builder 11/17] COPY lib lib 0.0s  
> =\> CACHED [builder 12/17] COPY assets assets 0.0s  
> =\> ERROR [builder 13/17] RUN mix assets.deploy
> 
> > [builder 13/17] RUN mix assets.deploy:  
> > #22 0.676  
> > #22 0.676 22:37:52.496 [debug] Downloading esbuild from [https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.0.tgz](https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.0.tgz)  
> > #22 0.964 \> js/app.js:24:19: error: Could not resolve “alpinejs” (mark it as external to exclude it from the bundle)  
> > #22 0.964 24 │ import Alpine from “alpinejs”  
> > #22 0.964 ╵ ~~~~~~~~~~  
> > #22 0.964  
> > #22 0.965 \> js/hooks/home.hooks.js:2:25: error: Could not resolve “ftellipsis” (mark it as external to exclude it from the bundle)  
> > #22 0.965 2 │ import { Ellipsis } from “ftellipsis”;  
> > #22 0.965 ╵ ~~~~~~~~~~~~  
> > #22 0.965  
> > #22 0.966 \> js/hooks/article.hooks.js:2:25: error: Could not resolve “ftcolumnflow” (mark it as external to exclude it from the bundle)  
> > #22 0.966 2 │ import FTColumnflow from “ftcolumnflow”;  
> > #22 0.966 ╵ ~~~~~~~~~~~~~~  
> > #22 0.966  
> > #22 0.975 3 errors  
> > #22 0.982 \*\* (Mix) `mix esbuild default --minify` exited with 1
> 
> * * *
> 
> Error failed to fetch an image or build from source: error building: executor failed running [/bin/sh -c mix assets.deploy]: exit code: 1

Thanks  
Lucas

---

<div class="post-metadata">

**Author:** ![lucasmanual](https://avatars.discourse-cdn.com/v4/letter/l/9dc877/32.png) [@lucasmanual](https://community.fly.io/u/lucasmanual)\
**Post date:** [January 3, 2023, 8:24pm UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/20 "2023-01-03T20:24:46Z")

</div>

I guess to summarize it more.

- It looks like the 3 packages are not packeged by esbuild. (not sure why)
- Dockerfile by default uses:  
ARG DEBIAN\_VERSION=bullseye-20210902-slim
- You need to install npm inside docker
- since debian removed npm from main, you can only get it from backports.  
– you could add backports repo as:  
#adding backports  
RUN echo ‘deb [Index of /debian](http://deb.debian.org/debian) bullseye-backports main’ \>\>/etc/apt/sources.list

but package nodejs i still not found,  
**How can I troubleshoot and see what is the output of below ??**  
RUN apt search nodejs

search continues…

---

<div class="post-metadata">

**Author:** ![lucasmanual](https://avatars.discourse-cdn.com/v4/letter/l/9dc877/32.png) [@lucasmanual](https://community.fly.io/u/lucasmanual)\
**Post date:** [January 3, 2023, 9:25pm UTC](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542/21 "2023-01-03T21:25:37Z")

</div>

One way to add (not my preferred way), is to add a foreign repository  
So if you need npm add this to your Dockerfile (note you might need to add curl right after apt -get install …git

> # get install script and pass it to execute:
> 
> RUN curl -sL [https://deb.nodesource.com/setup\_16.x](https://deb.nodesource.com/setup_16.x) | bash
> 
> # and install node
> 
> RUN apt-get install nodejs

and  
after copy assets assets (this copies the assets folder, its not there before this command)  
add:  
RUN npm install --prefix assets/

[Next page](https://community.fly.io/t/elixir-alpinejs-on-fly-fail-to-install/5542.md?page=2)