8

I installed Rails 6 RC1 and I wanted to create a new project with it, however it turn out to a nightmare because of the webpack default feature, am facing a hard time installing third party JS libraries, if you want to add jQuery and bootstrap for example you should do some weird setup in your environment.js like this

environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
        $: 'jquery',
        JQuery: 'jquery',
        jquery: 'jquery',
        Popper: ['popper.js', 'default'], // for Bootstrap 4
    })
)

and if you want to add jQuery-ui you have to search and hopefully you can find some link that show you how like this one

// jquery
import $ from 'jquery';

global.$ = $
global.jQuery = $


require('jquery-ui');

// jquery-ui theme
require.context('file-loader?name=[path][name].[ext]&context=node_modules/jquery-ui-dist!jquery-ui-dist', true,    /jquery-ui\.css/ );
require.context('file-loader?name=[path][name].[ext]&context=node_modules/jquery-ui-dist!jquery-ui-dist', true,    /jquery-ui\.theme\.css/ );

Now what if you want to add QuillJS ? you might do a research like me and end up in the QuillJS doc which tells you to add :

import Quill from 'quill/core';

import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';


Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header
});


export default Quill;

Just to find out that the QuillJs UI doesn't show up !!

As you see a lot of code just to install 2 or 3 libraries, then I spent a lot of time just searching how to a add things, or how to make the code you already found/added working...

The asset pipeline was a lot easier and fast, why complicate our lives with webpack just because it's the new thing in the JS world ??

Is there any way to just install JS libraries easily ? I prefer to add them manually than to use this webpack thing!

Community
  • 1
  • 1
medBouzid
  • 7,484
  • 10
  • 56
  • 86
  • One step is probably to run `yarn add quill@1.3.6`, but I am a bit lost afterwards (adding the import things to application.js does not expose Quill in the javascript console). Did you manage to come further? This one might help a bit: https://devwoot.com/article/blog/rubyonrails/2018/09/16/%E0%B9%83%E0%B8%8A%E0%B9%89+quill+js+%E0%B8%A3%E0%B9%88%E0%B8%A7%E0%B8%A1%E0%B8%81%E0%B8%B1%E0%B8%9A+rails+5/ – Felix Sep 24 '19 at 10:50
  • @Felix it's been a while since I posted this, at that time to solve this issue with QuillJS I added it via CDN links in my application layout which is the easiest way, but since then I got more chance to get deeper within webpack things... I will try to get back to you within a solution whenever I find some free time, in the meanwhile go ahead and use Quilljs via script tag and link tag (for the css) you can adjust things later – medBouzid Sep 30 '19 at 14:04
  • if anyone interested to answer this question please put a comment bellow, and I will do my best to write a good explanation for you guys – medBouzid Sep 30 '19 at 14:06
  • couldn't agree more with the OP - I assume webpack on rails 6 has been introduced to automate things for developers and make our lives easier but so far issues like this are just making things more complex - I've added it via CDN for now until someone sheds some light on the right way to do it here! – Sami Birnbaum Oct 28 '19 at 12:52
  • @SamiBirnbaum I will try to find some time and post a detailed answer by tomorrow, it's not that difficult :) but for now, yeah you can add it via CDN – medBouzid Oct 28 '19 at 14:01
  • @medBouzid that would be amazing. I'm developing on it today using the CDN but will wait on your answer and then will make changes, our company wants to try manage all the frontend libraries with Yarn. – Sami Birnbaum Oct 28 '19 at 16:16
  • @medBouzid any progress made on this? – Sami Birnbaum Nov 04 '19 at 11:04
  • @SamiBirnbaum so so sorry I was so busy lately and had some personal problems... I have written an article where I explain in it how to install QuillJS, I need maybe to update it with more examples because I have a lot more to say, please if you have any question let me know and I will try to answer it – medBouzid Nov 13 '19 at 14:20
  • @medBouzid Thank you so much for this, I will try and take a proper look when I can. Hope things are ok for you personally! – Sami Birnbaum Nov 13 '19 at 16:27

1 Answers1

2

To answer my question... there is no thing such as a "unified way", you can surely create some kind of folder within your javascript folder and download the third-party library you want then import it in your application.js and that's will work fine, But if you are doing this then why using a package manager (Yarn) or webpacker at all?

I wrote an article that explains some few tips about webpack on rails and I explained how you can install and use QuillJS for example... here is the link:

https://medium.com/@technoblogueur/rails-6-and-webpacker-what-you-need-to-know-e3534fded7ff

I will try to find some time and get back to this answer to update it with more code and examples but in the meantime the article above can save your day :)

medBouzid
  • 7,484
  • 10
  • 56
  • 86