Font Awesome not working with Edeliver

The site I’m working on renders font awesome using copycat and brunch locally, but when I build, deploy, and start edeliver production server, it isn’t showing.

This is the last issue holding up a site for a client, and of all things I’ve installed with phoenix, font awesome has been the hardest, so I’m not sure if I’m doing things right.

Can someone please help me fix this?

(thanks)

  1. Why not use FA from a CDN?
  2. How do you try to integrate FA into your project? I’d like to see some code… But since you are talking about “client” I think you won’t be able to showcase that project, but are you able to put together a fresh codebase which reproduces that problem?

Not all environments allow external hosting dependencies. The most common reason I have heard is “What if the CDN gets hacked and start sending out malware infested javascript to our customers/users?”

1 Like

I’m aware of restrictrions of some environments, customers and whatever, this question was meant in a rhetorical way, just to make sure that the possibility has been considered.

What exactly files is missing and does it not exist in your priv/static folder pre-deploy?

1 Like

Make sure edeliver is running npm i and npm run deploy and mix phx.digest.

See https://github.com/edeliver/edeliver/wiki/Run-additional-build-tasks

(Their example script is a little out of date. If you’re on Phoenix 1.3 you’ll want to cd into assets/ before running the npm commands, then cd back out to run mix phx.digest. npm run deploy runs the deploy script defined in package.json, which compiles the static assets for production using brunch.)

1 Like

Thanks,

Here’s the additional task part of the edeliver config I’m using from:

Deploy Early and Often: Deploying Phoenix with Edeliver and Distillery (Part Two)

pre_erlang_clean_compile() {
  status "Running phoenix.digest" # log output prepended with "----->"
  __sync_remote " # runs the commands on the build host
    # [ -f ~/.profile ] && source ~/.profile # load profile (optional)
    source ~/.profile
    # echo \$PATH # check if rbenv is in the path
    set -e # fail if any command fails (recommended)
    cd '$BUILD_AT' # enter the build directory on the build host (required)
    # prepare something
    mkdir -p priv/static # required by the phoenix.digest task
    npm install

    ./node_modules/brunch/bin/brunch build --production

    # run your custom task
    APP='$APP' MIX_ENV='$TARGET_MIX_ENV' $MIX_CMD phoenix.digest $SILENCE
  "
}

I’m still using Phoenix 1.2, but so tired/confused about what to edit above and how to then deploy if I have to also run npm commands for deployment.

Can you please advise?

Thanks,

Yeah font awesome is in priv/static, under css and fonts, but tbh, I can’t remember if I had to manually copy them there or not.

I’ve used the copycat as per Front-end packages with Phoenix and Brunch but can’t remember how well it worked as I’ve been juggling client jobs, and not long ago I asked here about how to install font awesome.

That looks right to me.

Make sure the priv/static directory containing your fonts or the font files themselves are specified in your plug Plug.Static, ..., only: ~w(css ...) call in your endpoint.ex. For example, if your fonts are copied to priv/static/fonts, then you should specify it only: ~w(css fonts ...).

Thanks net,

The font awesome fonts are in priv/static/fonts

and

myapp/lib/myapp/endpoint.ex shows

plug Plug.Static,
    at: "/", from: :myapp, gzip: false,
    only: ~w(css fonts images js favicon.ico robots.txt)

But the fonts are not being included in the build that is uploaded via edelivery.

What should I be checking next?