在 Rails 中使用 Yarn 管理三方 assets

jiazhen — Fri, 18 Nov 2016 07:24:27 +0800

近期觉得 Rails asset 不是那么顺畅，又刚好弄了一下 Yarn，故整合了一下。以下是我的原文 :)

Background

As the rise of Javascript, it's undeniable that we would need to use Javascript libraries to get better user experiences on the web application. In Rails, however, adding a Javascript library is not as smoonth as adding a gem.

You could download the javascript library and manually put it in vendor. However, the responsiblities of configurations and correcting font paths are on you. Or maybe rely on a relavant gem if luckily find it. But what if the gem is no longer maintained?

Look at Javascript ecosystem, npm, bower and the most recent - yarn, they are meant to manage Javascript libraries, so why don't we use one of them?

Install Yarn

I decided to use Yarn in which is a fascinating package manament tool as introduced in my previous post. So firstly we need to install Yarn. With MacOS just install it with brew

brew update
brew install yarn

And add export PATH="$PATH:$HOME/.yarn/bin" to your profile (this may be in your .profile, .bashrc, .zshrc, etc.)

Test that Yarn is installed by running:

yarn --version
# 0.16.1

Initialise a Rails project

First of all, initialise a new Rails project, run:

rails new yarn-with-rails
cd yarn-with-rails

And create a test page

rails g controller static_pages show
rails s

You should be able to see the test page on http://localhost:3000/static_pages/show as below

Next to initialise yarn

yarn init

OK, it's time to do the actual experiment.

Rails with Yarn

I will use FontAwesome for this experiment. Run:

yarn add font-awesome --modules-folder ./vendor/assets/components/

The latest font-awesome library is now installed in the Rails project! Add the following to config/initializers/assets.rb:

Rails.application.config.assets.paths << Rails.root.join("vendor", "assets", "components")

Rename app/assets/stylesheets/application.css to app/assets/stylesheets/application.scss and change the contents to the following:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 *= require font-awesome/scss/font-awesome
 */

Now can use awesome icons on our test page! In app/views/static_pages/show.html.erb, add

<p>
  I <i class="fa fa-heart" aria-hidden="true"></i> Ruby
</p>

Restart the server and visit http://localhost:3000/static_pages/show, font-awesome is on the page! \o/

Font path dependency

On development it's now perfect. However, if we deploy to production (on Heroku in my case), the icon is not showing and has issue with incorrect font path. We need to overwrite $fa-font-path to point to the correct path.

Create app/assets/stylesheets/font-path-overwrite.scss and add:

$fa-font-path: "font-awesome/fonts/";

Then change app/assets/stylesheets/application.css:


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 *= require font_path_overwrite
 *= require font-awesome/scss/font-awesome
 */

That's it!

Conclusion

So now with Yarn, we can easily retrieve the appropriate Javascript libraries and manage them. The feeling is as using the right tool for the job, saving time with the most elegant way. I love Ruby, Rails is my most favourite web framework, hope this can make it better. If you have any question, feel free to comment or drop me a line.

Show RC - ReleaseHub

jiazhen — Wed, 30 Dec 2015 22:12:59 +0800

自己做的部署请求 app，集成了 github 和 slack。公司内部用了几个月反响不错，决定开源。欢迎大家指教 :)

Github link - https://github.com/jiazhen/releasehub

Virtual Conference - hacksummit

jiazhen — Wed, 12 Nov 2014 20:17:33 +0800

RT, looks coo :)

https://hacksummit.org/

jiazhen (Jiazhen Xie)