[RUBY] Build a local development environment for Rails tutorials with Docker-Introduce Bootstrap and Font Awesome with Webpack-

Introduction

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

--Rails 6 compatible with the latest version of Rails tutorial (as of 2020.8.6) --Development environment can be reproduced using Docker --Do not install in the local environment as much as possible

This time it's the part that corresponds to Chapter 5 of the Rails tutorial

The contents of Chapters 3 and 4 do not matter,

Chapter 5 ** 5.1.2 ** Bootstrap and custom CSS will finally get you into the Webpack Swamp

Specifically, install and manage Bootstrap and Font Awesome with Yarn and Webpack without using gems.

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

The 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 tutorials with Docker --Introducing RSpec & Deploying Heroku with CircleCI --- Qiita

Personally developed app mdClip

When operating on the Docker container, use the terminal command as appropriate.

$ docker-compose run app ...

Or

$ docker-compose exec app ...

Please replace with.

Introducing Bootstrap and Fontawesome

Rails 6 introduces Webpack as a JavaScript module bundler, For images and CSS, traditional sprockets are used as the asset pipeline, Only JavaScript is now 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) Allow webpack to handle CSS
  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  #By default, JavaScript compiles and outputs the pack folder by webpacer.
  <%= 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 mentioned in Troubleshoot in this article and in future articles, different versions of Bootstrap will require you to rewrite CSS selectors and HTML classes. If you are not very particular about it, I think it is better to match it with the original Rails tutorial **

Specify the package version with yarn add

yarn add [email protected]

Troubleshoot in Chapter 7 Building debug environment on container --- Building local development environment for Rails tutorial with Docker --- Qiita Yarn official yarn add | Yarn

jquery and popper are required packages for Bootstrap Font Awesome will be needed later so install it ('@ Fortawesome' is not a typo)

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

Installed modules You can check it with package.json

application.js

app/javascript/packs/application.js

Add the following

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

There was information that also included require ('jquery'), Bootstrap seems to automatically require ('jquery'), so you don't need to write it here.

In the process of verifying various defects I noticed that jquery is loaded without require ('jquery') It seems that multiple launches of jquery may lead to JavaScript malfunctions, The current situation 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: Fully understand Webpacker + Yarn + Sprockets and write JavaScript: Part 1 (translation) | TechRacho ~ Engineer's "?" To "!" ~ | BPS Co., Ltd.](https: // techracho.bpsinc.jp/hachi8833/2020_01_16/85940)

Rails 6+ Webpacker development environment was set up by a JS strong man (translation) | TechRacho ~ Engineer's "?" To "!" ~ | BPS Co., Ltd. .jp / hachi8833 / 2019_11_28 / 83678)

About handling CSS

It seems that it is possible to compile not only JavaScript but also images and CSS with Webpack.

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

ʻApp / javascript / stylesheets / ...is the compiled content in`

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

Output with

ʻApp / assets / stylesheets / ...Compiled content is also in`

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

It is the situation that is output to

In other words, even if you edit CSS and SCSS in ʻassetsas in the tutorial, Even if you edit the CSS and SCSS inpacks`, the situation will be reflected in the view.

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

I think it doesn't matter which Stylesheet you edit in order to proceed with the tutorial in the future. You may want to keep in mind the order of the calls within the <head>

** By the way, if you edit CSS inside packs, you can benefit from the Hot reload of webpack-dev-server Specifically, if you save your changes, the browser will automatically reload and you can see your changes immediately (with some delay ...) **

When creating custom.scss in the flow of Rails tutorial ʻIt's okay if you write the following in app / javascript / packs / application.js`

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

(I will proceed with this specification)

Troubleshoot

Bootstrap style is strange

Probably the header area is not displayed well It depends on the version of Bootstrap, so if you install it as described in 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 tag navbar-inverse is no longer available in Bootstrap 4.

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

Needs minor modifications such as replacing with I'm planning to publish a modified Branch at the end of this chapter.

It is also possible to take measures such as specifying the version at the time of yarn add.

Test RSpec related

How to rewrite ʻassert _...`?

Can be used as it is

"I want to test by writing assert xxx in RSpec" => You can do it right away! --Qiita

Apply ApplicationHelper for testing ...

ʻInclude Application Helper in a separate _spec.rb` file

Alternatively, write it in spec / rails_helper.rb It is required in each _spec.rb, so you shouldn't have to write it individually

in conclusion

This part was the hardest part of developing a personal app in the Rails 6 environment.

The content may not fit your height and may contain errors,

We hope that it will help those who develop apps in the Rails 6 environment as well as build the environment for Rails tutorials.

Recommended Posts

Build a local development environment for Rails tutorials with Docker-Introduce Bootstrap and Font Awesome with Webpack-
Build a local development environment for Rails tutorials with Docker (Rails 6 + PostgreSQL + Webpack)
[Rails] [Docker] Copy and paste is OK! How to build a Rails development environment with Docker
Build a local development environment for Open Distro for Elasticsearch with multiple nodes using Docker
How to quit Docker for Mac and build a Docker development environment with Ubuntu + Vagrant
Procedure for building a Rails application development environment with Docker [Rails, MySQL, Docker]
Build a development environment for Django + MySQL + nginx with Docker Compose
Create a development environment for Ruby 3.0.0 and Rails 6.1.0 on Ubuntu 20.04.1 LTS
Steps to build a Ruby on Rails development environment with Vagrant
Build a PureScript development environment with Docker
Build a Wordpress development environment with Docker
[Copy and paste] Build a Laravel development environment with Docker Compose Part 2
How to build a Ruby on Rails development environment with Docker (Rails 6.x)
[Copy and paste] Build a Laravel development environment with Docker Compose Participation
Build a bulletin board API with authentication and authorization with Rails 6 # 1 Environment construction
How to build a Ruby on Rails development environment with Docker (Rails 5.x)
Template: Build a Ruby / Rails development environment with a Docker container (Ubuntu version)
Template: Build a Ruby / Rails development environment with a Docker container (Mac version)
Build a web application development environment that uses Java, MySQL, and Redis with Docker CE for Windows
Build a WordPress development environment quickly with Docker
[Win10] Build a JSF development environment with NetBeans
Rails development environment created with VSCode and devcontainer
Build a development environment for Docker, java, vscode
Build a Java development environment with VS Code
Build a Ruby on Rails development environment on AWS Cloud9
Stable development environment construction manual for "Rails6" with "Docker-compose"
[Environment construction] Build a Java development environment with VS Code!
Build WordPress environment with Docker (Local) and AWS (Production)
I made a development environment with rails6 + docker + postgreSQL + Materialize.
Build a "Spring Thorough Introduction" development environment with IntelliJ IDEA
How to build Rails, Postgres, ElasticSearch development environment with Docker
Build a Node-RED environment with Docker to move and understand
Building an environment for creating apps with Rails and Vue
One file of Docker x Laravel threat! Build a local development environment with the minimum configuration
Build a development environment where Ruby on Rails breakpoints work on Windows
Install Rails in the development environment and create a new application
Build Couchbase local environment with Docker
Build a Node.js environment with Docker
Build a Tomcat 8.5 environment with Pleiades 4.8
Build environment with vue.js + rails + docker
Build Rails environment with Docker Compose
Build Java development environment (for Mac)
Build jooby development environment with Eclipse
I built a rails environment with docker and mysql, but I got stuck
Build a Windows application test environment with Selenium Grid, Appium, and Windows Application Driver
How to build a Ruby on Rails environment using Docker (for Docker beginners)
Build a hot reload development environment with Docker-compose using Realize of Go
Creating a java web application development environment with docker for mac part1
I tried to build a Firebase application development environment with Docker in 2020
[Docker] How to create a virtual environment for Rails and Nuxt.js apps
Build a development environment on AWS EC2 with CentOS7 + Nginx + pm2 + Nuxt.js
Create a java web application development environment with docker for mac part2
Building Rails 6 and PostgreSQL environment with Docker
Build and manage RStudio environment with Docker-compose
Build a Java development environment on Mac
Using Material Design for Bootstrap with Rails 5.2
How to build Rails 6 environment with Docker
Build a simple Docker + Django development environment
Build a bulletin board API with authentication authorization with Rails 6 # 2 Introducing git and rubocop
Try local development of AWS (S3, DynamoDB) with AWS SDK for JavaScript and Docker
Build a development environment to create Ruby on Jets + React apps with Docker