# Webpack in Rails

All code is available in example app - https://github.com/maxivak/webpacker-rails-example-app


## Table of Contents

- [NPM and Yarn](#npm-and-yarn)
- [Webpack and Webpacker](#webpack-and-webpacker)

- [Installation](#installation)
  - [Webpack with Webpacker](#webpack-with-webpacker)
  - [Webpack without Webpacker in Rails app](#webpack-without-webpacker-in-rails-app)
  - [Webpacker with NPM without Yarn in Rails app](#webpacker-with-npm-without-yarn-in-rails-app)

- [Usage](#usage)
  - [Compile assets](#compile-assets)
  - [Configuration](#configuration)
  - [Basic configuration](#basic-configuration)
  - [Modules](#modules)
  - [Using third-party libraries](#using-third-party-libraries)
  - [Import from node modules](#import-from-node-modules)
  - [Javascript compilers](#javascript-compilers)
  - [Uglify JS](#uglify-js)
  - [CSS, SASS](#css-sass)  
  - [Images](#images)
  - [Erb](#erb)
  - [Import assets from Ruby Engine](#import-assets-from-ruby-engine)
  
- [Examples](#examples)
  - [Basic example - CSS, SCSS](#basic-example-css-scss)
  - [jQuery, jquery-ui](#jquery-jquery-ui)
  - [font-awesome](#font-awesome)
  - [Bootstrap 4](#bootstrap-4)
  - [TinyMCE](#tinymce)
  - [elFinder](#elfinder)
  
- [Resources](#resources)
  
  

# NPM and Yarn

NPM is a package manager for Node based environments. 
NPM manages dependencies and store its data in file `package.json`.

Yarn is a package manager that uses NPM registry as its backend.
Yarn is like modernized npm.
Yarn stores the exact versions of package dependencies in file `yarn.lock`. Yarn checks package.json file.

 
Read more:
* [Yarn vs NPM](https://www.sitepoint.com/yarn-vs-npm/)


# Webpack and Webpacker

**What's wrong with Sprockets**

Sprockets - Rails Asset Pipeline.
Sprockets is a rails-specific tool, but the frontend evolves by itself and the community prefers to use and create universal tools that don't have any specific limits. 

Sprockets (Rails Asset Pipeline) has become obsolete long time ago.
It has many problems:
* Limited support for new frontend tools. For example, with SASS.
* No support for ES2015 transpiling
* No support for javascript modules
* No support for sourcemaps




**Webpack**

Webpack is a manager for all your front-end code.

[Webpacker gem](https://github.com/rails/webpacker) makes it easy to use Webpack to manage application-like JavaScript in Rails. 


Webpack provides modularization for JavaScript.
Webpack implements a module system as well as a way to translate JavaScript code that doesn't work in any web browser to JavaScript code that works in most web browsers. 
The whole reason we are using Webpack is because JavaScript has no way to compose source files or package code in any useful way.


**Webpacker**

Webpacker is a Rails gem that provides integration with webpack module bundler and yarn package manager.

Webpacker coexists with the asset pipeline, as the primary purpose for webpack is app-like JavaScript, not images, CSS.
However, it is possible to use Webpacker for CSS, images and fonts assets as well, in which case you may not even need the asset pipeline.



* NOTE! Using Webpacker you won't need these gems: sass-rails, uglifier, jquery-rails, turbolinks, coffee-rails.





# Installation


## Webpack with Webpacker

* Install NPM, yarn in your system


* Install Webpacker


* for Webpacker 3.5

Gemfile:
```
gem 'webpacker', '~> 3.5'
```

* for Webpacker 4.x

Gemfile:
```
gem 'webpacker', '>= 4.0.x'
```

add package:
```
yarn add @rails/webpacker@4.0.0-pre.2 
```

* install

```
bundle exec rails webpacker:install
```


It generates the following file structure
```yml
app/javascript:
  ├── packs:
  │   # only webpack entry files here
  │   └── application.js
  └── src:
  │   └── application.css
  └── images:
      └── logo.svg
```




## Webpack without Webpacker in Rails app

You can use webpack in Rails app without Webpacker gem.

Use [Foreman](https://github.com/theforeman/foreman).


## Webpacker with NPM without Yarn in Rails app

Yarn is not necessary for Webpack.
You can replace Yarn with npm for Webpacker gem.


Read more:
* https://itnext.io/how-to-use-webpacker-with-npm-instead-of-yarn-a8a764e3a8ab
  




# Usage

By default, Webpacker builds JavaScript from source files located in `app/javascript` (a new folder in Rails app) and from `node_modules` installed via yarn. 


* use in View

```haml
= javascript_pack_tag 'application'
= stylesheet_pack_tag 'application'
```



* run webpack in development

In development, Webpacker compiles on demand rather than upfront by default. 

When in development run bin/webpack-dev-server - this will watch changes to your app and rebuild when required, pushing changes to the browser. 


```
./bin/webpack-dev-server 

# or 
ruby ./bin/webpack-dev-server
```

Use it in development when:
* you want live code reloading
* you have enough JavaScript that on-demand compilation is too slow

Webpacker will automatically start proxying all webpack asset requests to this server. When you stop the server, it'll revert back to on-demand compilation.




## Compile assets

When you are ready to compile run

```
bundle exec rails webpacker:compile
```

or
```
rails assets:precompile
```

new files should appear in public/packs/ folder.


* Webpacker hooks up a new webpacker:compile task to assets:precompile, which gets run whenever you run assets:precompile. If you are not using Sprockets, webpacker:compile is automatically aliased to assets:precompile. Similar to sprockets both rake tasks will compile packs in production mode but will use RAILS_ENV to load configuration from config/webpacker.yml (if available).


* compile in production
```
# compiles in production mode by default unless NODE_ENV is specified
bundle exec rails assets:precompile
bundle exec rails webpacker:compile
```





## Configuration

* `config/webpack` directory has corresponding configuration file for each Rails environment.
* `config/webpack/shared.js` - file, that is common for all environments
* `config/webpack/environment.js` - file responsible for processing settings from config/webpacker.yml.
* `webpacker.config.js` - file in the root folder of Rails app, used by Webpack
* `config/webpacker.yml` - config file (analog of `webpacker.config.js`) used by Webpacker



## Basic configuration

Webpack needs to know which directories to read from, what transformations it needs to apply to what files, and where to put everything once it’s completed its run. 

`package.json'
* add necessary packages for webpack
```
{
  "name": "webpacker-rails-example-app",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "3.5",
    "babel-core": "",
    "babel-loader": "",
    "webpack": "3.4.1"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2"
  }
}

```


`webpack.config.js`
```
const webpack = require("webpack");

module.exports = {
  context: __dirname + "/app/javascript/packs",

  entry: {
    application: ["application.js"],
  },

  output: {
    path: __dirname + "/public/packs",
  },
};

```

It takes an input (the "entry" block) from `app/javascript/packs` folder and producing an output (the "output" block).
It will read `application.js` file from `/app/javascript/packs`, perform actions required by this file, and output the resulting file to `/public/packs/application-__HASH_HERE__.js`.

Webpacker is appending hashes to all the assets by default.



* run in command line
```
rake webpacker:compile
```

* see new file(s) in `public/packs/`.

* include javascript in View
```
= javascript_pack_tag 'application'

```


## Modules


In contrast to Node.js modules, webpack modules can express their dependencies in a variety of ways. A few examples are:
* An ES2015 import statement
* A CommonJS require() statement
* An AMD define and require statement
* An @import statement inside of a css/sass/less file.
* An image url in a stylesheet (`url(...)`) or html (`<img src=...>`) file.




The webpack compiler can understand modules written as ES2015 modules, CommonJS or AMD.
Not all JS files can be used _directly_ with webpack. 
Webpack supports modules written in a variety of languages and preprocessors, via **loaders**. 
Loaders describe to webpack how to process non-JavaScript modules and include these dependencies into your bundles.

Webpack 1 supports two of the most common module formats out-of-the-box: CommonJS and AMD. 
Webpack 2 supports ES6 module syntax natively, meaning you can use import and export without a tool like babel to handle this for you. 




**Import ES6 modules**

* import - Statically import the exports of another module.

```
import MyModule from './my-module.js';
import { NamedExport } from './other-module.js';
```

* Example - import bootstrap module from node_modules
```
yarn add bootstrap@4.1.0
```

* `app/javascript/packs/application.js`
```
import 'bootstrap/dist/js/bootstrap';
```


**Import CommonJS modules**

* use `require`
* Synchronously retrieve the exports from another module.
```
var $ = require('jquery');
var myModule = require('my-module');
```

* `require.resolve` - Synchronously retrieve a module's ID
```
require.resolve(dependency: String);
```




**Loaders**

List of loaders - https://github.com/webpack/docs/wiki/list-of-loaders


* babel-loader - transpile from ECMA6 to ECMA5 script
* [file-loader](https://github.com/webpack-contrib/file-loader) -  A file loader module for webpack.
* [resolve-url-loader**](https://github.com/rails/webpacker/blob/master/docs/css.md#resolve-url-loader) - Loader that resolves relative paths in url() statements based on the original source file.






## Using third-party libraries

Using third-party libraries that are not CommonJS/AMD/ES6 modules

**Shimming**
* Some third party libraries may expect global dependencies (e.g. $ for jQuery). The libraries might also create globals which need to be exported. These "broken modules" can be used with shimming.



**imports-loader, exports-loader**

* Some dependencies use a module style in an unusual way that may conflict with webpack. In this case it may help to fool the third-party code that there is no module system at all. Most modules will then fall back to a global variable which you can export using the exports-loader.

* Use the imports-loader to configure `this`. Some legacy modules rely on `this` being the window object. This becomes a problem when the module is executed with webpack where this equals module.exports (in the style of CommonJS). In this case, you can override `this` with the imports-loader.


* install loaders

```
yarn add imports-loader exports-loader
```


* Example.

webpack.config.js
```

module.exports = {
  ...

  module: {
        loaders: [
            {
                test: require.resolve('tinymce/tinymce'),
                loaders: [
                    'imports?this=>window',
                    'exports?window.tinymce'
                ]
            },
            {
                test: /tinymce\/(themes|plugins)\//,
                loaders: [
                    'imports?this=>window'
                ]
            },
        ]
  }

}

```


* Examples

* Broken AMD
```
require("imports-loader?define=>false!./file.js")
```

* Broken CommonJs
```
require("imports-loader?require=>false!./file.js")
```







**script-loader**

* import scripts globally.
* If you don’t care about global variables and just want legacy scripts to work, you can use the [script-loader](https://github.com/webpack-contrib/script-loader). 
* The script-loader evaluates code in the global context, similar to inclusion via a <script> tag. In this mode, every normal library should work. require, module, etc. are undefined.

* When using the script-loader, the module is added as a string to the bundle. It is not minimized by webpack, so use a minimized version. There is also no devtool support for libraries added by this loader.


* `app/javascript/packs/application.js`

```
require("script-loader!myfile");
```


**noParse**

* Use `noParse` to include large dists.
* When there is no AMD/CommonJS version of the module and you want to include the dist, you can flag this module in `noParse`. This will cause webpack to include the module without parsing it or resolving require() and import statements. 
* This disables parsing by webpack. Therefore you cannot use dependencies. This may be useful for prepackaged libraries.

* This is also used to improve the build performance.

* This also means that any feature requiring the AST, like the ProvidePlugin, will not work inside this file. webpack just takes the source code without looking at it.


* Examples

```
{
	module: {
		noParse: [
			/XModule[\\\/]file\.js$/,
			path.join(__dirname, "web_modules", "XModule2")
		]
	}
}
```



read more:
* https://webpack.js.org/guides/shimming/



## Import from node_modules

You can import styles, javascript from node_modules. 

* import CSS
* use `~` to tell webpack that this is not a relative import

* Example

* `app/javascript/packs/stylesheets.sass`
```
@import '~bootstrap/dist/css/bootstrap'
```







## Erb

* rails-erb-loader - Embedded Ruby (.erb) webpack loader for Rails projects.
* add Erb support in your JS templates


```
run bundle exec rails webpacker:install:erb
```

```
yarn add rails-erb-loader
```


* An example `hello_erb.js.erb` file will also be added to your project in `app/javascript/packs` so that you can experiment with Erb-flavoured javascript.


* `webpack.config.js`

```
module.exports = {
    module: {
      rules: [
        {
          test: /\.erb$/,
          enforce: 'pre',
          loader: 'rails-erb-loader'
        },
      ]
    }
  }
};
```


* it is possible to link to assets that have been precompiled by Sprockets. 
* Add the .erb extension to your JavaScript file, then you can use Sprockets' asset helpers:

* `app/javascript/packs/example.js.erb`

```
<% helpers = ActionController::Base.helpers %>
const railsImagePath = "<%= helpers.image_path('rails.png') %>"
```


## Javascript compilers

* if you use import to reference JavaScript dependencies in your script you have to transpile it from ECMA6 to ECMA5 script using Babel. Webpack can do this on the fly by using loaders. 
* Babel is the library used to transpile ES6 to pure Javascript. 

* Install necessary modules
```
yarn add babel-core babel-preset-es2015 babel-polyfill babel-loader
```



* `webpack.config.js`
```

const webpack = require("webpack");

module.exports = {
    context: __dirname + "/app/javascript/packs",

    entry: {
        application: ["application.js"],
    },

    output: {
        path: __dirname + "/public/packs",
    },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      },
    ]
  },
};

```


## Uglify JS

* add plugin:
```
module.exports = {


    module: {
      ...
    }
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ]
```    


## CSS, SASS

* install the CSS and SASS libraries and the loaders 
```
yarn add css-loader style-loader sass-loader node-sass extract-text-webpack-plugin
```


* basic configuration for CSS, SASS

* `webpack.config.js`
```
...

module.exports = {
    ...
    module: {
        loaders: [
            ...,
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader" // creates style nodes from JS strings
                    },
                    {
                        loader: "css-loader" // translates CSS into CommonJS
                    },
                    {
                        loader: "sass-loader" // compiles Sass to CSS
                    }
                    ]
            },
            
```


* ExtractTextPlugin will handle moving CSS files to the output directory.

* configuration using ExtractTextPlugin

```
const webpack = require("webpack");

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
 ...
 
    module: {
        loaders: [
           ...,
           
          {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("css!sass")
          }
       ]   
   },
   
  plugins: [
     new ExtractTextPlugin("[name]-[hash].css"),
  ]
```






* Store CSS in a separate pack

* `app/javascript/packs/stylesheets.scss`
```

// import css
@import '../src/stylesheets/application';


```


* store your CSS/SASS files in `app/javascript/src/stylesheets/` folder

* `app/javascript/src/stylesheets/application.scss`:
```
// your css here

.mystyle {
   color: green;
 }


```


* include library from node_modules (see Examples below in this post)
```

// using library from node_modules
@import '~bootstrap/scss/bootstrap';



```

* NOTE! In sass or scss you have add a ~ to path, but in JS file you don't need to put `~`.



* use stylesheet in view

```haml
= stylesheet_pack_tag 'stylesheets'
```





## Images

Images should be placed in `app/javascript/images/`.

* Add `app/javascript/packs/application.js`:

```
require.context('../images/', true, /\.(gif|jpg|png|svg)$/i)
```

* use images in view - use `asset_pack_path` method inside the main asset helper:
```
= image_tag(asset_pack_path('images/logo.svg')) 
```

or use without Rails helpers
```
<img src="<%= asset_pack_path 'images/logo.png' %>" />

```





## Import assets from Ruby Engine

Using Webpacker in Rails Engines/gems

Problem:
* You have a Rails gem which comes with assets (scss, fonts, js) and you want that assets to be available from main Rails app.

Right now webpacker doesn't support Rails engines. 


Solutions:
* option 1. Copy assets from Gem to vendor folder of Rails app
* option 2. Convert Gem's assets into NPM pkgs



References:
* discussions
* https://github.com/rails/webpacker/issues/348
* https://github.com/rails/webpacker/issues/488
* https://github.com/rails/webpacker/issues/21




# Examples

## Basic example - CSS, SCSS

* CSS

* pack `app/javascript/packs/stylesheets.scss`

```
// css
@import '../src/stylesheets/application.scss'

```

* place your CSS code in `app/javascript/src/stylesheets/application.scss`

```
.mystyle {
  color: blue;
}
```



* include js and css in view (usually in layout file)

```
= javascript_pack_tag 'application'
= stylesheet_pack_tag 'stylesheets'
```

* use CSS styles in view

```
# app/views/home/index.html.haml

.container
  .mystyle
    I will be blue if webpacker's CSS is working.

```


* `package.json`

```
{
  "name": "webpacker-rails-example-app",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "3.5",
    "babel-core": "",
    "babel-loader": "",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^3.0.2",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "3.4.1"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2"
  }
}


```


## jQuery, jquery-ui

* add jQuery using NPM packages

```
yarn add jquery
```


* javascript
* `app/javascript/packs/application.js`
```
// jquery

import $ from 'jquery'
global.$ = $
global.jQuery = $



```

* make jQuery be seen by other .js files. 
For global access to jQuery.
  
* `config/webpack/environment.js`:

```
const { environment } = require('@rails/webpacker')

const webpack = require('webpack');


// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
        $: 'jquery',
        JQuery: 'jquery',
        jquery: 'jquery',
        'window.Tether': "tether",
        Popper: ['popper.js', 'default'], // for Bootstrap 4
    })
)

module.exports = environment
```





* use jQuery in view

```
# app/views/home/index.html.haml

.container
    
  .jquery-test
    jQuery is not yet working.
    
:javascript
  $(function(){
    $(".jquery-test").html("jQuery is working.");
  });
  
```



**jquery-ui**

* add package
```
yarn add jquery-ui-dist
```

* `app/javascript/packs/application.js`
```
// 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/ );


```

* `config/webpack/environment.js`
```
const { environment } = require('@rails/webpacker');

const webpack = require('webpack');


// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
    loader: 'resolve-url-loader',
    options: {
        attempts: 1
    }
});


// Add an additional plugin of your choosing : ProvidePlugin

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

const aliasConfig = {
    'jquery': 'jquery/src/jquery',
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js'

};

environment.config.set('resolve.alias', aliasConfig);

//
module.exports = environment;

```




**jquery-ujs**

* [Rails-ujs](https://github.com/rails/jquery-ujs) is an unobtrusive scripting adapter for jQuery developed for the Rails framework.

* add package
```
yarn add jquery-ujs
```


* import in js
* `app/javascript/packs/application.js`
```
...

import {} from 'jquery-ujs';
```


Read more:
* https://stackoverflow.com/questions/33998262/jquery-ui-and-webpack-how-to-manage-it-into-module/39230057 - discussion on Stackoverflow for other options using jquer-ui in webpack
* https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack/28989476#28989476 - using jQuery with Webpack:





## font-awesome

* add package
```
yarn add font-awesome@4.7.0
yarn install
```

* import in your CSS

* `app/javascript/packs/stylesheets.scss`
```
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome';

```


You might have issues with font-awesome in production when it cannot resolve fonts.
Be sure to use resolve-url-loader.

* `config/webpack/environment.js`

```

const { environment } = require('@rails/webpacker')

// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
  loader: 'resolve-url-loader',
  options: {
    attempts: 1
  }
});
```





## Bootstrap 4


* add NPM packages
```
yarn add jquery popper.js jquery-ui-dist jquery-ujs bootstrap@4.1.0 font-awesome
```

* package.json
```
{
  "name": "myprj",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "3.5",
    "webpack": "3.4.1",
    ...
    
    "jquery": "^3.2.1",
    "jquery-ui-dist": "^1.12.1",
    "jquery-ujs": "^1.2.2",
    "popper.js": "^1.14.3",
    "bootstrap": "4.1.0",
    "font-awesome": "^4.7.0"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2"
  }
}


```


* `config/webpack/environment.js`
```
const { environment } = require('@rails/webpacker');

const webpack = require('webpack');


// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
    loader: 'resolve-url-loader',
    options: {
        attempts: 1
    }
});

// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
        $: 'jquery',
        JQuery: 'jquery',
        jquery: 'jquery',
        'window.Tether': "tether",
        Popper: ['popper.js', 'default'], // for Bootstrap 4
    })
)

module.exports = environment;

```

* `app/javascript/packs/javascript.js`
```

// jquery

import $ from 'jquery'
global.$ = $
global.jQuery = $

// bootstrap
import 'bootstrap/dist/js/bootstrap';


// images
require.context('../images/', true, /\.(gif|jpg|png|svg)$/i)


```


* CSS

* `app/javascript/packs/stylesheets.scss`
```
@import '../src/stylesheets/application.scss'
```


* `app/javascript/src/stylesheets/application.scss`

```
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome';

@import 'variables';
@import '~bootstrap/scss/bootstrap';

@import 'tpl';
```

* place your custom variables to customize bootstrap in `app/javascript/src/stylesheets/variables.scss`

```
$primary: #4caf50; // change primary color
```


* your custom CSS - `app/javascript/src/stylesheets/tpl.scss`
```
// your sass here

.mystyle{
  color: $primary;
}

```

* include in view
```
= javascript_pack_tag 'application'
= stylesheet_pack_tag 'stylesheets'
```


### Bootstrap 4 and jquery-ui

* Bootstrap 4 may have conflicts with jquery-ui.

**Tooltips** 

* Bootstrap tooltips may not work.
* Both jQuery UI and Bootstrap use tooltip for the name of the plugin. 
* Use $.widget.bridge to create a different name for the jQuery UI version and allow the Bootstrap plugin to stay named tooltip



Read more:
* https://stackoverflow.com/questions/13731400/jqueryui-tooltips-are-competing-with-twitter-bootstrap




## TinyMCE

* add package
```
yarn add tinymce@4.7.13
```

* create js file for tinymce

* `app/javascript/packs/tinymce.js`
```

// core
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'


// plugins
import 'tinymce/plugins/paste/plugin'
import 'tinymce/plugins/link/plugin'
import 'tinymce/plugins/autoresize/plugin'


// skins
require.context('file-loader?name=[path][name].[ext]&context=node_modules/tinymce!tinymce/skins', true,    /.*/ );

```

* CSS file for view mode in tinyMCE editor
* `app/javascript/packs/tinymce_style.css`
```
// your css here

```

* `webpack.config.js`
```
const webpack = require("webpack");

module.exports = {
   ...
   
   module: {
        loaders: [
          ...,
          
          // tinymce
            {
                test: require.resolve('tinymce/tinymce'),
                loaders: [
                    'imports?this=>window',
                    'exports?window.tinymce'
                ]
            },
            {
                test: /tinymce\/(themes|plugins)\//,
                loaders: [
                    'imports?this=>window'
                ]
            },
       ]
    }
};    
            
```


* use in view
```
= javascript_pack_tag 'application'
= stylesheet_pack_tag 'stylesheets'


= javascript_pack_tag 'tinymce'
= stylesheet_pack_tag 'tinymce'



.container

  %h1 tinymce

  %form
    input:
    %textarea.editor
      text here
      <h1>Hello world</h1>


:javascript
  $( document ).ready(function() {
    tinymce_init();
  });


  function tinymce_init(){
    tinymce.init({
      selector: "textarea.editor",

      skin: false,

      plugins: [
        "paste link"
      ],
      toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image myblock",
      relative_urls: false,
      content_css : [
        "#{asset_pack_path('tinymce_style.css')}"
      ],
      protect2: [
              /\<\/?(if|endif)\>/g, // Protect <if> & </endif>
              /\<xsl\:[^>]+\>/g, // Protect <xsl:...>
              /<\?php.*?\?>/g // Protect php code
      ],
      setup: function(editor) {
        
      }
      });
  }


```


Resources:
* https://www.tinymce.com/docs/advanced/usage-with-module-loaders/
* https://github.com/tinymce/tinymce/issues/3396
* https://github.com/tinymce/tinymce/issues/2836
* https://www.tinymce.com/docs/advanced/usage-with-module-loaders/#gettingtheskin
* https://stackoverflow.com/questions/30522896/how-to-shim-tinymce-in-webpack



## elFinder

* elFinder is a file manager for web, written in JavaScript using jQuery and jQuery UI 


* add packages from github with a specific version
```
yarn add https://github.com/Studio-42/elFinder.git#2.1.39
```

* elFinder depends on jquery and jquery-ui
```
yarn add jquery jquery-ui-dist
```

* see examples how to use jQuery


**elFinder themes**

* we will use theme from https://github.com/maxivak/elfinder-theme-bootstrap
```
yarn add git+https://git@github.com/maxivak/elfinder-theme-bootstrap.git
```


* create packs for js and css

* `app/javascript/packs/elfinder.js`
```
// 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/ );




// elfinder
require('script-loader!elfinder/js/elfinder.full.js');
require('script-loader!elfinder/js/proxy/elFinderSupportVer1.js');
//require('script-loader!elfinder/js/i18n/elfinder.LANG.js');


```

* `app/javascript/packs/elfinder_style.scss`
```

@import "~elfinder/css/elfinder.full";
@import "~elfinder/css/theme";
@import "~elfinder-theme-bootstrap/css/theme";
//@import "elfinder-theme-material/scss/theme-gray";

```


* package.json
```
{
  
  "dependencies": {
  	...
    "jquery": "3.2.1",
    "jquery-ui-dist": "^1.12.1",

    "elfinder": "https://github.com/Studio-42/elFinder.git#2.1.39",
    "elfinder-theme-bootstrap": "git+https://git@github.com/maxivak/elfinder-theme-bootstrap.git",

  }
}
```


* view
```

<!DOCTYPE html>
<html>
<head>
  <title>File Manager</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" />


  <%= javascript_pack_tag 'optimacms/elfinder' %>
  <%= stylesheet_pack_tag 'optimacms/elfinder_style' %>


</head>
<body>

<div id="elfinder"  style="box-sizing: border-box; "></div>

<script type="text/javascript">

    // Detect language (optional)
    var lang = (function() {
        var locq = window.location.search,
            fullLang, locm, lang;
        if (locq && (locm = locq.match(/lang=([a-zA-Z_-]+)/))) {
            // detection by url query (?lang=xx)
            fullLang = locm[1];
        } else {
            // detection by browser language
            fullLang = (navigator.browserLanguage || navigator.language || navigator.userLanguage);
        }
        lang = fullLang.substr(0,2);
        if (lang === 'ja') lang = 'jp';
        else if (lang === 'pt') lang = 'pt_BR';
        else if (lang === 'ug') lang = 'ug_CN';
        else if (lang === 'zh') lang = (fullLang.substr(0,5) === 'zh-TW')? 'zh_TW' : 'zh_CN';
        return lang;
    })();


    // elFinder options (REQUIRED)
    // Documentation for client options:
    // https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
    var opts = {

        transport : new elFinderSupportVer1(),
        resizable : true,
        width : '100%',
        height : '100%',
        url: '/<%=Optimacms.config.admin_namespace%>/media_elfinder',  // connector URL
        lang: lang                         // auto detected language (optional)
    };


    $().ready(function() {
        var rails_csrf = {};
        rails_csrf[$('meta[name=csrf-param]').attr('content')] = $('meta[name=csrf-token]').attr('content');

        // load jQueryUI CSS
        //elFinder.prototype.loadCss('//cdnjs.cloudflare.com/ajax/libs/jqueryui/'+uiver+'/themes/smoothness/jquery-ui.css');

        // Optional for Japanese decoder "extras/encoding-japanese.min"
      /*
       if (window.Encoding && Encoding.convert) {
       elFinder.prototype._options.rawStringDecoder = function(s) {
       return Encoding.convert(s,{to:'UNICODE',type:'string'});
       };
       }
       */

        // Make elFinder
        $('#elfinder').elfinder(opts);

    });



</script>


</body>
</html>

  
```


# Resources

Webpacker example app
* https://github.com/maxivak/webpacker-rails-example-app
* https://github.com/postNirjhor/webpack-boilerplate



Webpack modules:
* https://webpack.js.org/concepts/modules/
* https://webpack.js.org/api/module-methods/
* https://webpack.js.org/guides/shimming/
* https://medium.com/webpack/how-to-cope-with-broken-modules-in-webpack-4c0427fb23a
* https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655
* https://webpack.js.org/guides/shimming/
* https://medium.com/webpack/how-to-cope-with-broken-modules-in-webpack-4c0427fb23a
* https://github.com/webpack/docs/wiki/shimming-modules


Webpacker:
* http://samuelmullen.com/articles/embracing-change-rails51-adopts-yarn-webpack-and-the-js-ecosystem/


* https://itnext.io/how-to-use-webpacker-with-npm-instead-of-yarn-a8a764e3a8ab - replace Yarn with npm for Webpacker gem.



Import assets:
* https://github.com/rails/webpacker/blob/master/docs/css.md
* https://github.com/rails/webpacker/blob/master/docs/assets.md