Logo

dev-resources.site

for different kinds of informations.

Configuring TravisCI for phoenix with dart-sass

Published at
4/2/2022
Categories
travisci
deployment
elixir
phoenixframework
Author
javierg
Author
7 person written this
javierg
open
Configuring TravisCI for phoenix with dart-sass

After a couple of years with our full-stack PhoenixFramework app on production, there have been a constant: node-sass breaks a lot. Every couple of weeks not paying attention to node modules, resulted in security patches to apply, that where blocked by node-sass not being able to compile because some random reason.

When Phoenix 1.6 was released, with node and WebPack free asset build, We decided to plan the migration out of WebPack and the main motivator, was get rid of as many node dependencies as possible. At the end we keep some node modules, all related to bootstrap.

The process we follow was based on the documentation provided by:

https://github.com/phoenixframework/esbuild
https://github.com/CargoSense/dart_sass

The decision to use Dart Sass was due to the decision by the sass project to not add more features to it. Also, if we could get rid of the single binary dependency that is the cause for most of the issues, was a big plus.

Everything went smoothly, until we try to deploy.

Our infrastructure deploys to VMs in RackSpace. We use the Travis CI process to compile and deploy the application. We are able to just build a tar file that gets pushed and deployed to the RS servers with Capistrano. Very little dependencies on the server side, no build tools on there, no ruby, elixir or OTP installed, just basic Linux installation.

So we followed instructions and installed Linux Homebrew (linuxbrew):

before_install:
  - /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  - export PATH=/home/linuxbrew/.linuxbrew/bin:$PATH
  - test -r ~/.bash_profile && echo "eval \"\$($(brew --prefix)/bin/brew shellenv)\"" >> ~/.bashrc
  - brew install sass/sass/sass
Enter fullscreen mode Exit fullscreen mode

Which resulted in this error:

pub get
Because sass depends on cli_pkg ^2.1.0 which doesn't match any versions, version solving failed.
Enter fullscreen mode Exit fullscreen mode

After some research I found the culprit:

https://github.com/sass/dart-sass/issues/1660

Tl;DR: A dart-sass dependency (cli_pkg) publish version 2.1.0, people start including it in their libraries, then retracted, so now dart-sass can't build the package.

So I start looking for alternatives, and my first try was override the tapped version because, why not?

 - brew tap sass/sass
  - sed -i 's/archive\/1\.49\.10/archive\/1.49.9/' /home/linuxbrew/.linuxbrew/Homebrew/Library/Taps/sass/homebrew-sass/sass.rb
  - sed -i 's/3887b89d99fd52e49e5a33ec78b3705a25a6267bd9f85c16fc85a6f4bdf154e5/0df1e9d5ff73a752fe864fac58d8a010c3a089b07d9ba9a05f54d493fd26af8b/' /home/linuxbrew/.linuxbrew/Homebrew/Library/Taps/sass/homebrew-sass/sass.rb
Author
Enter fullscreen mode Exit fullscreen mode

After realizing how terrible this is, and reading again the documentation from dart-sass I saw how clear they recommend using the prebuilt binaries, so I did that:

before_install:
  - rvm install 'ruby-3.0.0'
  - curl -L https://github.com/sass/dart-sass/releases/download/1.49.10/dart-sass-1.49.10-linux-x64.tar.gz > dart-sass-1.49.10-linux-x64.tar.gz
  - tar -xvf dart-sass-1.49.10-linux-x64.tar.gz
  - echo 'export PATH="$PATH:$HOME/build/amco/contentinator/dart-sass:$PATH"' >> ~/.bashrc
Enter fullscreen mode Exit fullscreen mode

Which works great!

The issue was a problem for me from yesterday, today I found the workaround and by now the bug has been resolved. I haven't try again to use Linuxbrew, and probably I will not, I might just keep the standalone library and just write some task insdie capistrano to handle versioning.

The PR was pushed and my package-lock.json file wen't from 13k+ lines, to just 75. ๐ŸŽ‰

phoenixframework Article's
27 articles in total
Favicon
Leverage ETS for Shared State in Phoenix
Favicon
Masters of Elixir: A Comprehensive Collection of Learning Resources
Favicon
Harness PubSub for Real-Time Features in Phoenix Framework
Favicon
Optimize LiveView Performance with Temporary Assigns
Favicon
Mastering Phoenix Framework - Part 3
Favicon
Mastering Phoenix Framework - Part 1
Favicon
Mastering Phoenix Framework - Introduction
Favicon
Ash AshSqlite - Aggregates not supported
Favicon
Definindo item ativo no menu no Phoenix Framework usando Short-circuit Evaluation
Favicon
Defining active menu item in Phoenix Framework through Short-circuit Evaluation
Favicon
Avoid Trips To The Database With Nebulex - Phoenix Series
Favicon
Optimizing Elixir Phoenix action with huge json response by responding by cached, gzipped values.
Favicon
How to Build a Phoenix LiveView Todo List App with Testing.
Favicon
Configuring TravisCI for phoenix with dart-sass
Favicon
Deploying an Elixir Release using Docker on Fly.io
Favicon
Taming Github OAuth integrations in Phoenix with the help of Ueberauth and Guardian (but then actually no just Ueberauth)
Favicon
Taming Phoenix (Framework)'s Wild West amid the crippling indifference of Lockdown San Francisco
Favicon
A Collection of Tips for Elixirโ€™s Interactive Shell (IEx)
Favicon
Phoenix umbrella proxy application.
Favicon
Phoenix for Rails developers: a practical example - Part 1
Favicon
Phoenix for Rails developers: a practical example - Part 2
Favicon
Web FullStack menggunakan Phoenix LiveView - Publisher Subscriber
Favicon
Web FullStack menggunakan Phoenix LiveView - Membangun Operasi CRUD
Favicon
Web FullStack menggunakan Phoenix LiveView - Memulai Pembangunan
Favicon
Phoenix LiveView live_link
Favicon
Handling PostgreSQL slow counting onย Elixir
Favicon
Web FullStack menggunakan Phoenix LiveView - Javascript Interoperability

Featured ones: