Installation on Rails 6 via Webpacker

[neiljohari]

How should we handle importing the assets via Rails 6 webpacker? The proposed solutions online involve using ERB to hackily import it, when the best solution might be to try and create an npm module with the assets.

[cilim]

@neiljohari we are planning on extending Phrasing to support Rails 6 and Webpacker. However, there are some uncertainties we need to investigate in order to provide an optimal approach to achieve seamless integration for both old and new projects.

In the meantime, if you have a working solution, PR is welcome. :)

[neiljohari]

Awesome! I have a very hacky patch that I am not super proud of, but I needed it to work for my project. Here's how I handled it so that it was "technically" using Webpacker.

Essentially what https://github.com/rails/webpacker/issues/57#issuecomment-491317195 describes:

I created a "custom" js module under app/javascript/custom and inside of it have a file "phrasing.js.erb":

<%= File.read(File.join(Gem.loaded_specs['phrasing'].full_gem_path, 'app', 'assets', 'javascripts', 'editor.js')) %>

<%= File.read(File.join(Gem.loaded_specs['phrasing'].full_gem_path, 'app', 'assets', 'javascripts', 'phrasing.js')) %>

import "<%= File.join(Gem.loaded_specs['phrasing'].full_gem_path, 'app', 'assets', 'fonts', 'icomoon.eot') %>";
import "<%= File.join(Gem.loaded_specs['phrasing'].full_gem_path, 'app', 'assets', 'stylesheets', 'phrasing.scss') %>";

[neiljohari]

@cilim I am starting a new Rails 6 project soon that will likely use phrasing again. Is there any update on this?

I am willing to spend some time exploring better options to extend Phrasing's support. Do you have any current ideas / additional thoughts?

[cilim]

Hi @neiljohari 👋

So far, the plan is to use plain JS instead of jQuery and have it extracted into an npm module. A new Phrasing major version will be dedicated for using Phrasing with webpacker.

But it's going to take some time because of higher priority projects.

In the meantime, I found a way to easily use Phrasing as is with Rails 6, Webpacker and the asset pipeline:

It[WebPacker] coexists with the asset pipeline, as the primary purpose for webpack is app-like JavaScript, not images, CSS, or even JavaScript Sprinkles (that all continues to live in app/assets).

ref: https://github.com/rails/webpacker

Follow these steps to make it work (tried it out on a Rails 6 project that only used webpacker):

1. Install gem sassc-rails

2. Add the HTML head tags for the asset pipeline in your layout file:

= stylesheet_link_tag 'application', media: 'all'
= javascript_include_tag 'application'

3. create file app/assets/javascripts/application.js:

//= require jquery
//= require phrasing
//= require_tree .

4. create file app/assets/stylesheets/application.css:

*= require_tree .
*= require phrasing
*= require_self

5. append to app/assets/config/manifest.js:

//= link application.css
//= link application.js

Let me know if this works for you. Cheers!