Skip to content

Instantly share code, notes, and snippets.

@ismailmechbal

ismailmechbal/rails_webpacker_bootstrap_expose_jquery.md

Forked from andyyou/rails_webpacker_bootstrap_expose_jquery.md
Created March 24, 2019 06:09
Show Gist options
  • Save ismailmechbal/9c04d37b720291941a71320f5ddb540c to your computer and use it in GitHub Desktop.
Save ismailmechbal/9c04d37b720291941a71320f5ddb540c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @andyyou andyyou revised this gist Mar 16, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion rails_webpacker_bootstrap_expose_jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -259,7 +259,7 @@ In _app/javascript/stylesheets/application.scss_ add bootstrap

    * [Bootstrap from npm demo](https://github.com/twbs/bootstrap-npm/blob/master/bootstrap-custom.scss)

    #### imiport bootstrap JavaScript
    #### Import bootstrap JavaScript

    _app/javascript/packs/application.js_

  2. @andyyou andyyou revised this gist Mar 16, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion rails_webpacker_bootstrap_expose_jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@

    # Rails 5.2 with webpacker, bootstrap, stimulus starter

    > This gist will collect all issues we solved with Rails 5.2 and Webpacker
    > This gist will collects all issues we solved with Rails 5.2 and Webpacker
    #### Create Project

  3. @andyyou andyyou revised this gist Dec 19, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions rails_webpacker_bootstrap_expose_jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -301,6 +301,7 @@ Sometimes you may like to use jQuery in views you should expose jQuery to global
    ```bash
    # https://webpack.js.org/loaders/expose-loader/
    $ yarn add expose-loader -D
    # NOTICE: For some production environment you may ignore `-D`
    ```

    Add configuration to _config/webpack/environment.js_
  4. @andyyou andyyou revised this gist Nov 14, 2018. 1 changed file with 8 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions rails_webpacker_bootstrap_expose_jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -50,19 +50,27 @@ end
    <% module_namespacing do -%>
    class <%= class_name %> < <%= parent_class_name.classify %>
    # scope macros
    # Concerns macros
    # Constants
    # Attributes related macros
    <% if attributes.any?(&:password_digest?) -%>
    has_secure_password
    <% end -%>
    # association macros
    <% attributes.select(&:reference?).each do |attribute| -%>
    belongs_to :<%= attribute.name %><%= ', polymorphic: true' if attribute.polymorphic? %>
    <% end -%>
    # validation macros
    # callbacks
    # other
    private
    # callback methods
    end
  5. @andyyou andyyou revised this gist Oct 11, 2018. 1 changed file with 3 additions and 6 deletions.
    9 changes: 3 additions & 6 deletions rails_webpacker_bootstrap_expose_jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -18,9 +18,8 @@ $ rails db:create
    $ rails g migration enable_hstore_extension
    ```

    Add code into `db/migrate/<TIMESTAMP>_enable_hstore_extension.rb`

    ```rb
    # db/migrate/<TIMESTAMP>_enable_hstore_extension.rb
    class EnableHstoreExtension < ActiveRecord::Migration[5.2]
    def change
    enable_extension 'hstore'
    @@ -34,9 +33,8 @@ end
    $ rails g migration enable_uuid_extension
    ```

    Add code into `db/migrate/<TIMESTAMP>_enable_uuid_extension.rb`

    ```rb
    # db/migrate/<TIMESTAMP>_enable_uuid_extension.rb
    class EnableUuidExtension < ActiveRecord::Migration[5.2]
    def change
    enable_extension 'uuid-ossp'
    @@ -47,9 +45,8 @@ end

    ##### Add model templates

    Add `lib/templates/active_record/model/model.rb`

    ```rb
    # lib/templates/active_record/model/model.rb
    <% module_namespacing do -%>
    class <%= class_name %> < <%= parent_class_name.classify %>
    # scope macros
  6. @andyyou andyyou revised this gist Oct 11, 2018. 1 changed file with 60 additions and 0 deletions.
    60 changes: 60 additions & 0 deletions rails_webpacker_bootstrap_expose_jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -12,6 +12,66 @@ $ cd <project_name>
    $ rails db:create
    ```

    ##### Support `jsonb`

    ```bahs
    $ rails g migration enable_hstore_extension
    ```

    Add code into `db/migrate/<TIMESTAMP>_enable_hstore_extension.rb`

    ```rb
    class EnableHstoreExtension < ActiveRecord::Migration[5.2]
    def change
    enable_extension 'hstore'
    end
    end
    ```

    ##### Support `uuid`

    ```bash
    $ rails g migration enable_uuid_extension
    ```

    Add code into `db/migrate/<TIMESTAMP>_enable_uuid_extension.rb`

    ```rb
    class EnableUuidExtension < ActiveRecord::Migration[5.2]
    def change
    enable_extension 'uuid-ossp'
    enable_extension 'pgcrypto'
    end
    end
    ```

    ##### Add model templates

    Add `lib/templates/active_record/model/model.rb`

    ```rb
    <% module_namespacing do -%>
    class <%= class_name %> < <%= parent_class_name.classify %>
    # scope macros
    # Concerns macros
    # Constants
    # Attributes related macros
    <% if attributes.any?(&:password_digest?) -%>
    has_secure_password
    <% end -%>
    # association macros
    <% attributes.select(&:reference?).each do |attribute| -%>
    belongs_to :<%= attribute.name %><%= ', polymorphic: true' if attribute.polymorphic? %>
    <% end -%>
    # validation macros
    # callbacks
    # other
    private
    # callback methods
    end
    <% end -%>
    ```

    #### Configure scss architecture

    If you are using some front end framework you may like to integrate stylesheet into components with webpack or you just like to integrate stylesheets with webapck like me. This is a way that we integrate that into **webpacker**.
  7. @andyyou andyyou revised this gist Jul 27, 2018. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions rails_webpacker_bootstrap_expose_jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -192,6 +192,8 @@ In _app/javascript/stylesheets/application.scss_ add bootstrap
    @import 'base';
    ```

    * [Bootstrap from npm demo](https://github.com/twbs/bootstrap-npm/blob/master/bootstrap-custom.scss)

    #### imiport bootstrap JavaScript

    _app/javascript/packs/application.js_
  8. @andyyou andyyou revised this gist May 7, 2018. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions rails_webpacker_bootstrap_expose_jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,8 @@

    # Rails 5.2 with webpacker, bootstrap, stimulus starter

    > This gist will collect all issues we solved with Rails 5.2 and Webpacker
    #### Create Project

    ```bash
  9. @andyyou andyyou revised this gist Apr 30, 2018. 1 changed file with 4 additions and 13 deletions.
    17 changes: 4 additions & 13 deletions rails_webpacker_bootstrap_expose_jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -69,7 +69,7 @@ $ touch app/javascript/controllers/clipboard_controller.js

    #### （Optional）Configure stimulus

    _app/javascript/s/packs/plication.js_
    _app/javascript/s/packs/application.js_

    ```js
    /* eslint no-console:0 */
    @@ -121,18 +121,7 @@ export default class extends Controller {
    #### Create a example controller and view

    ```bash
    $ rails g controller pages
    ```

    Then add action and template

    _app/controllers/pages_controller.rb_

    ```rb
    class PagesController < ApplicationController
    def example
    end
    end
    $ rails g controller pages example
    ```

    Add _app/views/pages/example.html.erb_
    @@ -196,6 +185,8 @@ In _app/javascript/stylesheets/application.scss_ add bootstrap

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

    #### imiport bootstrap JavaScript
  10. @andyyou andyyou revised this gist Apr 30, 2018. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions rails_webpacker_bootstrap_expose_jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -48,7 +48,7 @@ h1 {
    }
    ```

    On the top of _app/javascript/pack/application.js_
    On the top of _app/javascript/packs/application.js_

    ```js
    import 'stylesheets/application'
    @@ -69,7 +69,7 @@ $ touch app/javascript/controllers/clipboard_controller.js

    #### （Optional）Configure stimulus

    _app/javascript/pack/application.js_
    _app/javascript/s/packs/plication.js_

    ```js
    /* eslint no-console:0 */
    @@ -200,7 +200,7 @@ In _app/javascript/stylesheets/application.scss_ add bootstrap

    #### imiport bootstrap JavaScript

    _app/javascript/pack/application.js_
    _app/javascript/packs/application.js_

    ```js
    import 'bootstrap'
  11. @andyyou andyyou revised this gist Apr 30, 2018. 1 changed file with 0 additions and 299 deletions.
    299 changes: 0 additions & 299 deletions rails_webpacker_bootstrap_expose_jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -297,302 +297,3 @@ end
    <% end -%>
    ```

    # Rails 5.2 with webpacker, bootstrap, stimulus starter

    #### Create Project

    ```bash
    # Last few parameters(--skip-* part) is only my habbit not actully required
    $ rails new <project_name> --webpack=stimulus --database=postgresql --skip-coffee --skip-test
    $ cd <project_name>
    $ rails db:create
    ```

    #### Configure scss architecture

    If you are using some front end framework you may like to integrate stylesheet into components with webpack or you just like to integrate stylesheets with webapck like me. This is a way that we integrate that into **webpacker**.

    > NOTE: This is only the convention of our team you can avoid this step and keep stylesheet in assets/.
    ```bash
    $ mkdir app/javascript/stylesheets
    $ touch app/javascript/stylesheets/application.scss
    $ touch app/javascript/stylesheets/_variables.scss
    $ touch app/javascript/stylesheets/_base.scss
    ```

    After create files please write down styles as follow:

    _app/javascript/stylesheets/application.scss_

    ```scss
    @import 'variables';
    @import 'base';
    ```

    _app/javascript/stylesheets/\_variables.scss_

    ```scss
    $colors: (
    major: #00D252,
    minor: #2F3B59
    );
    ```

    _app/javascript/stylesheets/\_base.scss_

    ```scss
    h1 {
    color: map-get($colors, major);
    }
    ```

    On the top of _app/javascript/pack/application.js_

    ```js
    import 'stylesheets/application'
    ```



    #### （Optional）Integrate stimulus manually

    If you are not use `--webpack=stimulus` for create project or install `stimulus` in existed project.

    ```bash
    $ yarn add stimulus
    $ mkdir app/javascript/controllers
    # To provide a example for testing stimulus
    $ touch app/javascript/controllers/clipboard_controller.js
    ```

    #### （Optional）Configure stimulus

    _app/javascript/pack/application.js_

    ```js
    /* eslint no-console:0 */
    // This file is automatically compiled by Webpack, along with any other files
    // present in this directory. You're encouraged to place your actual application logic in
    // a relevant structure within app/javascript and only use these pack files to reference
    // that code so it'll be compiled.
    //
    // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
    // layout file, like app/views/layouts/application.html.erb
    import 'stylesheets/application'

    import { Application } from "stimulus"
    import { definitionsFromContext } from "stimulus/webpack-helpers"

    const application = Application.start()
    // The path you may like to change to under `pack` that path will be `./controllers`
    // but convention will be in `/app/javascript/controllers`
    const context = require.context("controllers", true, /\.js$/)
    application.load(definitionsFromContext(context))
    ```

    Example of testing `stimulus`:

    _app/javascript/controllers/clipboard_controller.js_

    ```js
    import { Controller } from 'stimulus'

    export default class extends Controller {
    static targets = ['source']
    initialize() {
    console.log('clipboard initialize')
    }
    connect() {
    console.log('clipboard connect')
    if (document.queryCommandSupported('copy')) {
    this.element.classList.add('clipboard--supported')
    }
    }
    copy(e) {
    e.preventDefault()
    this.sourceTarget.select()
    document.execCommand('copy')
    }
    }
    ```

    #### Create a example controller and view

    ```bash
    $ rails g controller pages
    ```

    Then add action and template

    _app/controllers/pages_controller.rb_

    ```rb
    class PagesController < ApplicationController
    def example
    end
    end
    ```

    Add _app/views/pages/example.html.erb_

    ```html
    <h1>Hello, World</h1>
    <hr>
    <div data-controller="clipboard members dashboard">
    PIN
    <input type="text" data-target="clipboard.source" value="1234" readonly>
    <button data-action="clipboard#copy" class="clipboard-button">
    Copy to Clipboard
    </button>
    </div>
    ```

    #### Add pack to layout

    Open _app/views/layout/application.html.erb_ then add `pack tags` to `<head>`

    ```html
    <%= stylesheet_pack_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
    ```

    #### Add route

    _config/routes.rb_

    ```rb
    Rails.application.routes.draw do
    # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
    root 'pages#example'
    end
    ```

    Then you can test

    ```bash
    $ rails s
    ```

    Navigate to `localhost:3000` should see as follow

    ![](https://imgur.com/Khh0VY6.png)

    Until here you should complete Rails 5.2 using webpacker with stimulus and stylesheets.

    For common practical stiuation you may want to use bootstrap v4.x.

    #### Install bootstrap

    ```bash
    # https://getbootstrap.com/docs/4.1/getting-started/webpack/
    $ yarn add jquery popper.js bootstrap
    ```

    #### Import boostrap stylesheets

    In _app/javascript/stylesheets/application.scss_ add bootstrap

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

    #### imiport bootstrap JavaScript

    _app/javascript/pack/application.js_

    ```js
    import 'bootstrap'
    ```

    #### Configure webpacker

    Add configuration to _config/webpack/environment.js_. If you do not setup this step, the abilities related to `Popper.js` such as `tooltip` will not working.

    ```js
    const { environment } = require('@rails/webpacker')
    const webpack = require('webpack')
    /**
    * Automatically load modules instead of having to import or require them everywhere.
    * Support by webpack. To get more information:
    *
    * https://webpack.js.org/plugins/provide-plugin/
    * http://j.mp/2JzG1Dm
    */
    environment.plugins.prepend(
    'Provide',
    new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
    })
    )
    module.exports = environment
    ```

    Sometimes you may like to use jQuery in views you should expose jQuery to global

    #### expose jQuery to global for views

    ```bash
    # https://webpack.js.org/loaders/expose-loader/
    $ yarn add expose-loader -D
    ```

    Add configuration to _config/webpack/environment.js_

    ```js
    /**
    * To use jQuery in views
    */
    environment.loaders.append('expose', {
    test: require.resolve('jquery'),
    use: [{
    loader: 'expose-loader',
    options: '$'
    }]
    })
    ```

    #### Other convention of our team

    ```bash
    $ mkdir -p lib/templates/active_record/model
    $ touch lib/templates/active_record/model/model.rb
    ```

    _lib/templates/active_record/model/model.rb_

    ```rb
    <% module_namespacing do -%>
    class <%= class_name %> < <%= parent_class_name.classify %>
    # scope macros
    # Concerns macros
    # Constants
    # Attributes related macros
    <% if attributes.any?(&:password_digest?) -%>
    has_secure_password
    <% end -%>
    # association macros
    <% attributes.select(&:reference?).each do |attribute| -%>
    belongs_to :<%= attribute.name %><%= ', polymorphic: true' if attribute.polymorphic? %>
    <% end -%>
    # validation macros
    # callbacks
    # other
    private
    # callback methods
    end
    <% end -%>
    ```

  12. @andyyou andyyou revised this gist Apr 30, 2018. 1 changed file with 300 additions and 1 deletion.
    301 changes: 300 additions & 1 deletion rails_webpacker_bootstrap_expose_jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,306 @@ $ touch app/javascript/stylesheets/_base.scss

    After create files please write down styles as follow:

    _app/javascript/stylesheets/applicatin.scss_
    _app/javascript/stylesheets/application.scss_

    ```scss
    @import 'variables';
    @import 'base';
    ```

    _app/javascript/stylesheets/\_variables.scss_

    ```scss
    $colors: (
    major: #00D252,
    minor: #2F3B59
    );
    ```

    _app/javascript/stylesheets/\_base.scss_

    ```scss
    h1 {
    color: map-get($colors, major);
    }
    ```

    On the top of _app/javascript/pack/application.js_

    ```js
    import 'stylesheets/application'
    ```



    #### （Optional）Integrate stimulus manually

    If you are not use `--webpack=stimulus` for create project or install `stimulus` in existed project.

    ```bash
    $ yarn add stimulus
    $ mkdir app/javascript/controllers
    # To provide a example for testing stimulus
    $ touch app/javascript/controllers/clipboard_controller.js
    ```

    #### （Optional）Configure stimulus

    _app/javascript/pack/application.js_

    ```js
    /* eslint no-console:0 */
    // This file is automatically compiled by Webpack, along with any other files
    // present in this directory. You're encouraged to place your actual application logic in
    // a relevant structure within app/javascript and only use these pack files to reference
    // that code so it'll be compiled.
    //
    // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
    // layout file, like app/views/layouts/application.html.erb
    import 'stylesheets/application'

    import { Application } from "stimulus"
    import { definitionsFromContext } from "stimulus/webpack-helpers"

    const application = Application.start()
    // The path you may like to change to under `pack` that path will be `./controllers`
    // but convention will be in `/app/javascript/controllers`
    const context = require.context("controllers", true, /\.js$/)
    application.load(definitionsFromContext(context))
    ```

    Example of testing `stimulus`:

    _app/javascript/controllers/clipboard_controller.js_

    ```js
    import { Controller } from 'stimulus'

    export default class extends Controller {
    static targets = ['source']
    initialize() {
    console.log('clipboard initialize')
    }
    connect() {
    console.log('clipboard connect')
    if (document.queryCommandSupported('copy')) {
    this.element.classList.add('clipboard--supported')
    }
    }
    copy(e) {
    e.preventDefault()
    this.sourceTarget.select()
    document.execCommand('copy')
    }
    }
    ```

    #### Create a example controller and view

    ```bash
    $ rails g controller pages
    ```

    Then add action and template

    _app/controllers/pages_controller.rb_

    ```rb
    class PagesController < ApplicationController
    def example
    end
    end
    ```

    Add _app/views/pages/example.html.erb_

    ```html
    <h1>Hello, World</h1>
    <hr>
    <div data-controller="clipboard members dashboard">
    PIN
    <input type="text" data-target="clipboard.source" value="1234" readonly>
    <button data-action="clipboard#copy" class="clipboard-button">
    Copy to Clipboard
    </button>
    </div>
    ```

    #### Add pack to layout

    Open _app/views/layout/application.html.erb_ then add `pack tags` to `<head>`

    ```html
    <%= stylesheet_pack_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
    ```

    #### Add route

    _config/routes.rb_

    ```rb
    Rails.application.routes.draw do
    # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
    root 'pages#example'
    end
    ```

    Then you can test

    ```bash
    $ rails s
    ```

    Navigate to `localhost:3000` should see as follow

    ![](https://imgur.com/Khh0VY6.png)

    Until here you should complete Rails 5.2 using webpacker with stimulus and stylesheets.

    For common practical stiuation you may want to use bootstrap v4.x.

    #### Install bootstrap

    ```bash
    # https://getbootstrap.com/docs/4.1/getting-started/webpack/
    $ yarn add jquery popper.js bootstrap
    ```

    #### Import boostrap stylesheets

    In _app/javascript/stylesheets/application.scss_ add bootstrap

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

    #### imiport bootstrap JavaScript

    _app/javascript/pack/application.js_

    ```js
    import 'bootstrap'
    ```

    #### Configure webpacker

    Add configuration to _config/webpack/environment.js_. If you do not setup this step, the abilities related to `Popper.js` such as `tooltip` will not working.

    ```js
    const { environment } = require('@rails/webpacker')
    const webpack = require('webpack')
    /**
    * Automatically load modules instead of having to import or require them everywhere.
    * Support by webpack. To get more information:
    *
    * https://webpack.js.org/plugins/provide-plugin/
    * http://j.mp/2JzG1Dm
    */
    environment.plugins.prepend(
    'Provide',
    new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
    })
    )
    module.exports = environment
    ```

    Sometimes you may like to use jQuery in views you should expose jQuery to global

    #### expose jQuery to global for views

    ```bash
    # https://webpack.js.org/loaders/expose-loader/
    $ yarn add expose-loader -D
    ```

    Add configuration to _config/webpack/environment.js_

    ```js
    /**
    * To use jQuery in views
    */
    environment.loaders.append('expose', {
    test: require.resolve('jquery'),
    use: [{
    loader: 'expose-loader',
    options: '$'
    }]
    })
    ```

    #### Other convention of our team

    ```bash
    $ mkdir -p lib/templates/active_record/model
    $ touch lib/templates/active_record/model/model.rb
    ```

    _lib/templates/active_record/model/model.rb_

    ```rb
    <% module_namespacing do -%>
    class <%= class_name %> < <%= parent_class_name.classify %>
    # scope macros
    # Concerns macros
    # Constants
    # Attributes related macros
    <% if attributes.any?(&:password_digest?) -%>
    has_secure_password
    <% end -%>
    # association macros
    <% attributes.select(&:reference?).each do |attribute| -%>
    belongs_to :<%= attribute.name %><%= ', polymorphic: true' if attribute.polymorphic? %>
    <% end -%>
    # validation macros
    # callbacks
    # other
    private
    # callback methods
    end
    <% end -%>
    ```

    # Rails 5.2 with webpacker, bootstrap, stimulus starter

    #### Create Project

    ```bash
    # Last few parameters(--skip-* part) is only my habbit not actully required
    $ rails new <project_name> --webpack=stimulus --database=postgresql --skip-coffee --skip-test
    $ cd <project_name>
    $ rails db:create
    ```

    #### Configure scss architecture

    If you are using some front end framework you may like to integrate stylesheet into components with webpack or you just like to integrate stylesheets with webapck like me. This is a way that we integrate that into **webpacker**.

    > NOTE: This is only the convention of our team you can avoid this step and keep stylesheet in assets/.
    ```bash
    $ mkdir app/javascript/stylesheets
    $ touch app/javascript/stylesheets/application.scss
    $ touch app/javascript/stylesheets/_variables.scss
    $ touch app/javascript/stylesheets/_base.scss
    ```

    After create files please write down styles as follow:

    _app/javascript/stylesheets/application.scss_

    ```scss
    @import 'variables';
  13. @andyyou andyyou revised this gist Apr 30, 2018. 1 changed file with 169 additions and 31 deletions.
    200 changes: 169 additions & 31 deletions rails_webpacker_bootstrap_expose_jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,24 +1,75 @@
    # Rails 起手式
    # Rails 5.2 with webpacker, bootstrap, stimulus starter

    #### Create Project

    ```bash
    $ rails new <project_name> --webpack=stimulus --database postgresql --skip-coffee --skip-test
    # Last few parameters(--skip-* part) is only my habbit not actully required
    $ rails new <project_name> --webpack=stimulus --database=postgresql --skip-coffee --skip-test
    $ cd <project_name>
    $ rails db:create
    ```

    # (Optional) Integrate stimulus manually
    $ yarn add stimulus
    $ mkdir app/javascript/controllers
    $ touch app/javascript/controllers/clipboard_controller.js
    #### Configure scss architecture

    If you are using some front end framework you may like to integrate stylesheet into components with webpack or you just like to integrate stylesheets with webapck like me. This is a way that we integrate that into **webpacker**.

    # Using webpacker for stylesheets
    > NOTE: This is only the convention of our team you can avoid this step and keep stylesheet in assets/.
    ```bash
    $ mkdir app/javascript/stylesheets
    $ touch app/javascript/stylesheets/application.scss
    $ touch app/javascript/stylesheets/_variables.scss
    $ touch app/javascript/stylesheets/_base.scss
    ```

    After create files please write down styles as follow:

    _app/javascript/stylesheets/applicatin.scss_

    ```scss
    @import 'variables';
    @import 'base';
    ```

    _app/javascript/stylesheets/\_variables.scss_

    ```scss
    $colors: (
    major: #00D252,
    minor: #2F3B59
    );
    ```

    _app/javascript/stylesheets/\_base.scss_

    ```scss
    h1 {
    color: map-get($colors, major);
    }
    ```

    On the top of _app/javascript/pack/application.js_

    ```js
    import 'stylesheets/application'
    ```



    Integrate **stimulus**: in **app/javascript/pack/application.js**
    #### （Optional）Integrate stimulus manually

    If you are not use `--webpack=stimulus` for create project or install `stimulus` in existed project.

    ```bash
    $ yarn add stimulus
    $ mkdir app/javascript/controllers
    # To provide a example for testing stimulus
    $ touch app/javascript/controllers/clipboard_controller.js
    ```

    #### （Optional）Configure stimulus

    _app/javascript/pack/application.js_

    ```js
    /* eslint no-console:0 */
    @@ -35,14 +86,15 @@ import { Application } from "stimulus"
    import { definitionsFromContext } from "stimulus/webpack-helpers"

    const application = Application.start()
    // The path you may like to change to under `pack` that path will be `./controllers`
    // but convention will be in `/app/javascript/controllers`
    const context = require.context("controllers", true, /\.js$/)
    application.load(definitionsFromContext(context))

    ```

    Example of testing `stimulus`:


    Provide an example for testing in **app/javascript/controllers/clipboard_controller.js**
    _app/javascript/controllers/clipboard_controller.js_

    ```js
    import { Controller } from 'stimulus'
    @@ -66,54 +118,97 @@ export default class extends Controller {
    }
    ```

    #### Create a example controller and view

    ```bash
    $ rails g controller pages
    ```

    **app/javascript/stylesheets/application.scss**
    Then add action and template

    ```scss
    @import 'variables';
    @import 'base';
    _app/controllers/pages_controller.rb_

    ```rb
    class PagesController < ApplicationController
    def example
    end
    end
    ```

    Add _app/views/pages/example.html.erb_

    ```html
    <h1>Hello, World</h1>
    <hr>
    <div data-controller="clipboard members dashboard">
    PIN
    <input type="text" data-target="clipboard.source" value="1234" readonly>
    <button data-action="clipboard#copy" class="clipboard-button">
    Copy to Clipboard
    </button>
    </div>
    ```

    #### Add pack to layout

    **app/javascript/stylesheets/_variables.scss**
    Open _app/views/layout/application.html.erb_ then add `pack tags` to `<head>`

    ```scss
    $colors: (
    major: #00D252,
    minor: #2F3B59
    );
    ```html
    <%= stylesheet_pack_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
    ```

    #### Add route

    _config/routes.rb_

    ```rb
    Rails.application.routes.draw do
    # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
    root 'pages#example'
    end
    ```

    Then you can test

    ```bash
    $ rails s
    ```

    Navigate to `localhost:3000` should see as follow

    ![](https://imgur.com/Khh0VY6.png)

    Until here you should complete Rails 5.2 using webpacker with stimulus and stylesheets.

    For common practical stiuation you may want to use bootstrap v4.x.

    ## Install bootstrap
    #### Install bootstrap

    ```bash
    # https://getbootstrap.com/docs/4.1/getting-started/webpack/
    $ yarn add jquery popper.js bootstrap
    ```

    #### Import boostrap stylesheets


    **app/javascript/stylesheets/application.scss**
    In _app/javascript/stylesheets/application.scss_ add bootstrap

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

    #### imiport bootstrap JavaScript


    **app/javascript/pack/application.js**
    _app/javascript/pack/application.js_

    ```js
    import 'bootstrap'
    ```

    #### Configure webpacker


    Add configuration to **config/webpack/environment.js**
    Add configuration to _config/webpack/environment.js_. If you do not setup this step, the abilities related to `Popper.js` such as `tooltip` will not working.

    ```js
    const { environment } = require('@rails/webpacker')
    @@ -138,18 +233,21 @@ environment.plugins.prepend(
    module.exports = environment
    ```

    Sometimes you may like to use jQuery in views you should expose jQuery to global


    ## expose jQuery to global for views
    #### expose jQuery to global for views

    ```bash
    # https://webpack.js.org/loaders/expose-loader/
    $ yarn add expose-loader -D
    ```

    Add configuration to **config/webpack/environment.js**
    Add configuration to _config/webpack/environment.js_

    ```js
    /**
    * To use jQuery in views
    */
    environment.loaders.append('expose', {
    test: require.resolve('jquery'),
    use: [{
    @@ -159,3 +257,43 @@ environment.loaders.append('expose', {
    })
    ```

    #### Other convention of our team

    ```bash
    $ mkdir -p lib/templates/active_record/model
    $ touch lib/templates/active_record/model/model.rb
    ```

    _lib/templates/active_record/model/model.rb_

    ```rb
    <% module_namespacing do -%>
    class <%= class_name %> < <%= parent_class_name.classify %>
    # scope macros
    # Concerns macros
    # Constants
    # Attributes related macros
    <% if attributes.any?(&:password_digest?) -%>
    has_secure_password
    <% end -%>
    # association macros
    <% attributes.select(&:reference?).each do |attribute| -%>
    belongs_to :<%= attribute.name %><%= ', polymorphic: true' if attribute.polymorphic? %>
    <% end -%>
    # validation macros
    # callbacks
    # other
    private
    # callback methods
    end
    <% end -%>
    ```

  14. @andyyou andyyou revised this gist Apr 30, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion rails_webpacker_bootstrap_expose_jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -68,7 +68,7 @@ export default class extends Controller {



    **app/javascript/stylesheets/applicatin.scss**
    **app/javascript/stylesheets/application.scss**

    ```scss
    @import 'variables';
  15. @andyyou andyyou revised this gist Apr 30, 2018. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions rails_webpacker_bootstrap_expose_jquery.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,15 +3,14 @@
    ```bash
    $ rails new <project_name> --webpack=stimulus --database postgresql --skip-coffee --skip-test
    $ cd <project_name>
    $ bundle
    $ rails db:drop db:create
    $ rails db:create

    # (Optional) Integrate stimulus manually
    $ yarn add stimulus
    $ mkdir app/javascript/controllers
    $ touch app/javascript/controllers/clipboard_controller.js

    # (Optional) Using webpacker for stylesheets
    # Using webpacker for stylesheets
    $ mkdir app/javascript/stylesheets
    $ touch app/javascript/stylesheets/application.scss
    $ touch app/javascript/stylesheets/_variables.scss
  16. @andyyou andyyou renamed this gist Apr 30, 2018. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → rails_webpacker_bootstrap_expose_jquery.md
    View file
    File renamed without changes.
  17. @andyyou andyyou created this gist Apr 30, 2018.
    162 changes: 162 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,162 @@
    # Rails 起手式

    ```bash
    $ rails new <project_name> --webpack=stimulus --database postgresql --skip-coffee --skip-test
    $ cd <project_name>
    $ bundle
    $ rails db:drop db:create

    # (Optional) Integrate stimulus manually
    $ yarn add stimulus
    $ mkdir app/javascript/controllers
    $ touch app/javascript/controllers/clipboard_controller.js

    # (Optional) Using webpacker for stylesheets
    $ mkdir app/javascript/stylesheets
    $ touch app/javascript/stylesheets/application.scss
    $ touch app/javascript/stylesheets/_variables.scss
    ```



    Integrate **stimulus**: in **app/javascript/pack/application.js**

    ```js
    /* eslint no-console:0 */
    // This file is automatically compiled by Webpack, along with any other files
    // present in this directory. You're encouraged to place your actual application logic in
    // a relevant structure within app/javascript and only use these pack files to reference
    // that code so it'll be compiled.
    //
    // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
    // layout file, like app/views/layouts/application.html.erb
    import 'stylesheets/application'

    import { Application } from "stimulus"
    import { definitionsFromContext } from "stimulus/webpack-helpers"

    const application = Application.start()
    const context = require.context("controllers", true, /\.js$/)
    application.load(definitionsFromContext(context))

    ```



    Provide an example for testing in **app/javascript/controllers/clipboard_controller.js**

    ```js
    import { Controller } from 'stimulus'

    export default class extends Controller {
    static targets = ['source']
    initialize() {
    console.log('clipboard initialize')
    }
    connect() {
    console.log('clipboard connect')
    if (document.queryCommandSupported('copy')) {
    this.element.classList.add('clipboard--supported')
    }
    }
    copy(e) {
    e.preventDefault()
    this.sourceTarget.select()
    document.execCommand('copy')
    }
    }
    ```



    **app/javascript/stylesheets/applicatin.scss**

    ```scss
    @import 'variables';
    @import 'base';
    ```



    **app/javascript/stylesheets/_variables.scss**

    ```scss
    $colors: (
    major: #00D252,
    minor: #2F3B59
    );
    ```



    ## Install bootstrap

    ```bash
    # https://getbootstrap.com/docs/4.1/getting-started/webpack/
    $ yarn add jquery popper.js bootstrap
    ```



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

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



    **app/javascript/pack/application.js**

    ```js
    import 'bootstrap'
    ```



    Add configuration to **config/webpack/environment.js**

    ```js
    const { environment } = require('@rails/webpacker')
    const webpack = require('webpack')
    /**
    * Automatically load modules instead of having to import or require them everywhere.
    * Support by webpack. To get more information:
    *
    * https://webpack.js.org/plugins/provide-plugin/
    * http://j.mp/2JzG1Dm
    */
    environment.plugins.prepend(
    'Provide',
    new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
    })
    )
    module.exports = environment
    ```



    ## expose jQuery to global for views

    ```bash
    # https://webpack.js.org/loaders/expose-loader/
    $ yarn add expose-loader -D
    ```

    Add configuration to **config/webpack/environment.js**

    ```js
    environment.loaders.append('expose', {
    test: require.resolve('jquery'),
    use: [{
    loader: 'expose-loader',
    options: '$'
    }]
    })
    ```