[Ruby] Building a local development environment for Rails tutorials with Docker-Introducing Bootstrap and Font Awesome with Webpack-

5 minute read

Introduction

We are building a local development environment with Docker and restarting the Rails tutorial.

  • Rails 6 for the latest Rails tutorial (as of 2020.8.6)
  • Use Docker to reproduce the development environment
  • Do not install in local environment if possible

This time it’s the equivalent of Chapter 5 of the Rails Tutorial

The contents of Chapters 3 and 4 do not matter, but

Chapter 5 5.1.2 Bootstrap and custom CSS are finally on the verge of Webpack

Specifically, without using gem, we will install and manage Bootstrap and Font Awesome with Yarn and Webpack.

In addition, I will write more tests, so I will replace it with RSpec and proceed.

Branch at the end of Chapter 5 is filling-in-layout https://github.com/dev-naokit/sample_app_on_docker/tree/filling-in-layout

The first Building a local development environment for Rails tutorials with Docker (Rails 6 + PostgreSQL + Webpack)-Qiita

Second time Building a local development environment for Rails tutorial with Docker-RSpec introduction & Heroku deployment with CircleCI–Qiita

Personal development app [mdClip ](https://mdclip.xyz/)

When operating on the Docker container, the terminal command is appropriate

$ docker-compose run app ...

Or

$ docker-compose exec app ...

Please replace with.

Introducing #Bootstrap and Fontawesome

Rails 6 introduced Webpack as a JavaScript module bundler, For images and CSS, traditional Sprocket is used as an asset pipeline, Only JavaScript is compiled with Webpack

application.html.erb

rewrite the contents of <head>

app/views/layouts/application.html.erb

<head>
  <title><%= full_title(yield(:title)) %></title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_link_tag'application', media:'all','data-turbolinks-track':'reload' %>
  # (Add the line below) Enable webpack to handle CSS
  <%= stylesheet_pack_tag'application', media:'all','data-turbolinks-track':'reload' %>
  # JavaScript is by default webpacer compiles and outputs pack folder
  <%= javascript_pack_tag'application','data-turbolinks-track':'reload' %>
  <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
      </script>
    <![endif]-->
</head>

Install Bootstrap with Yarn

**As I will mention in Troubleshoot of this article and the future articles, due to different versions of Bootstrap, CSS selectors and HTML classes will need to be rewritten. If you are not very particular about it, I think it is better to match the original Rails tutorial ** Specify the version of packege with `yarn add` ``` yarn add [email protected] ``` Troubleshoot in Chapter 7 [Building a debugging environment on a container-Building a local development environment for Rails tutorials with Docker--Qiita](https://qiita.com/daddy_hacker/items/00f9f5f4b04014025d37#troubleshoot) Yarn Official [yarn add | Yarn](https://classic.yarnpkg.com/ja/docs/cli/add/)

jquery and popper are packages required for Bootstrap I will install Font Awesome as I will need it later. (‘@Fortawesome’ is not a typo)

yarn add bootstrap jquery popper.js @fortawesome/fontawesome-free

The installed modules are You can check it in package.json

application.js

app/javascript/packs/application.js

Add the following

require("bootstrap");
require("@fortawesome/fontawesome-free");

There was some information that also included require('jquery'), but Bootstrap seems to automatically do require('jquery') and it is not necessary to write it here

In the process of verifying various defects I’ve noticed that jquery loads even without require('jquery') Multiple start of jquery seems to lead to malfunction of JavaScript, Currently we will proceed as it is

(I will post a reference article below)

environment.js

Make jQuery callable from anywhere

config/webpack/environment.js

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

environment.plugins.append(
    'Provide',
    new webpack.ProvidePlugin({
        $:'jquery/src/jquery',
        jQuery:'jquery/src/jquery',
        Popper: ['popper.js','default']
    })
)

module.exports = environment

By doing this, you don’t have to write import $ from'jquery'; every time.

CSS

app/javascript/stylesheets/application.scss (new)

Added below

@import'@fortawesome/fontawesome-free/scss/fontawesome';
@import'bootstrap/scss/bootstrap';

application.js

app/javascript/packs/application.js

Add the following

import'@fortawesome/fontawesome-free/js/all';
import "../stylesheets/application.scss";

Reference

[Rails 6: Understanding Webpacker+Yarn+Sprockets and writing JavaScript: Part 1 (Translation) TechRacho (Engineer’s “?” to “!”)-BPS Inc.](https://(techracho.bpsinc.jp/hachi8833/2020_01_16/85940)
[JS strong guys tried to set up Rails 6+Webpacker development environment tightly (translation) TechRacho (tech laccho) ~ engineer “?” to “!” ~ BPS Co., Ltd.](.jp/hachi8833/2019_11_28/83678)

How to handle CSS

It seems that it is possible to compile images, CSS, everything with Webpack as well as JavaScript

Currently, there is no change in the situation where asset compilation by Sprocket and Webpacker coexist.

The contents compiled in app/javascript/stylesheets/... are stored in <head>

<%= stylesheet_link_tag'application', media:'all','data-turbolinks-track':'reload' %>

Is output by

Compiled contents of app/assets/stylesheets/... are the same as those in <head>

  <%= stylesheet_pack_tag'application', media:'all','data-turbolinks-track':'reload' %>

Is output to

In other words, even if you edit CSS and SCSS in assets according to the tutorial, Even if you edit CSS and SCSS in packs, the situation is reflected in the view.

Bootstrap and Font Awesome styles are imported by the latter and are reflected in the compilation and view.

I think it doesn’t matter which Stylesheet you edit in future tutorials, You may want to keep in mind about the order of calls within the <head>

By the way, if you edit CSS in packs, you can benefit from webpack-dev-server Hot reload Specifically, when you save your changes, your browser will automatically reload and you’ll see your changes immediately (with some delay…)

When creating custom.scss according to the flow of Rails tutorial All you have to do is write the following in app/javascript/packs/application.js

import "../stylesheets/custom.scss";

(I will proceed with this specification)

Troubleshoot

Bootstrap has a strange style

Probably the area around the header is not displayed well It depends on the version of Bootstrap, so if you install it according to this article The latest version of Bootstrap ver. 4.5 (as of 2020.8.7) will be introduced. (3.4.1 in Rails Tutorial)

The navbar-inverse tag is no longer available in Bootstrap 4, so

  <header class="navbar navbar-expand-md bg-dark navbar-dark bg-dark">

You need to make minor modifications such as replacing with I’m planning to publish the modified Branch at the end of this chapter

You can also take measures such as specifying the version when doing yarn add

How to rewrite assert_...?

You can use it as it is

“I want to write and test assert xxx even in RSpec” => I can do it soon! -Qiita

Application Helper can be used in tests…

Describe include ApplicationHelper in a separate _spec.rb file

Or write in spec/rails_helper.rb It’s required in each _spec.rb, so you don’t need to write it individually

in conclusion

This part was the hardest part of developing personal apps in the Rails 6 environment

Content that does not fit your body and may contain errors

We hope that it will not only help build the environment for the Rails tutorial but also help those who develop applications in the Rails 6 environment.