Skip to content

Instantly share code, notes, and snippets.

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.
Rails 5.2 with webpacker, bootstrap, stimulus starter

Rails 起手式

$ 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

/* 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

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

@import 'variables';
@import 'base';

app/javascript/stylesheets/_variables.scss

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

Install bootstrap

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

app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';

app/javascript/pack/application.js

import 'bootstrap'

Add configuration to config/webpack/environment.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

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

Add configuration to config/webpack/environment.js

environment.loaders.append('expose', {
  test: require.resolve('jquery'),
  use: [{
    loader: 'expose-loader',
    options: '$'
  }]
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment