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
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.
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>
** 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";
[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)
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
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.
Can be used as it is
"I want to test by writing assert xxx in RSpec" => You can do it right away! --Qiita
ʻ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
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