Introducing Bootstrap with Webpacker and npm

Introduction

In the article introduced earlier , I implemented it by embedding codons in the HTML file, but from Rails 6 series, Webpacker Even though it was introduced, I thought that such a method should not be taken, so I decided to write an article.

What is Webpacker

The following is a quote from official page .

Webpacker makes it easy to use the JavaScript pre-processor and bundler webpack 5.x.x+ to manage application-like JavaScript in Rails. It coexists with the asset pipeline, as the primary purpose for webpack is app-like JavaScript, not images, CSS, or even JavaScript Sprinkles (that all continues to live in app/assets).

Webpacker is just a gem for getting Webpack into Rails. This Webpack allows you to compile Javascript. When you launch the rails app with the rails new command, your JavaScript pack (ie application.js) is placed under app/javascript/packs/and isin app/views/application.html.erb. <% = javascript_pack_tag'application','data-turbolinks-track':'reload' Included by the description of%>.

npm npm is the package manager for Japascript. npm saves the downloaded packages in ./node_modules and a list of packages in ./package.json. In addition, record the dependency in ./package-lock.json and make node_modules reproducible.

Introduced

From the story so far, it means "Install Bootstrap with npm and compile with Webpacker". Therefore, type the following command.

npm install bootstrap

Then you should see something like the following.

added 3 packages, changed 2 packages

You have 3 packages installed! This is how npm can install dependent packages. Finally, load require ("bootstrap ") in app/javascript/packs/applicaton.js and the installation is complete!

Summary

You can also deploy other packages such as jQuery in a similar way. Understand Webpacker and npm and smartly deploy Javascript packages.

Recommended Posts

Introducing Bootstrap with Webpacker and npm
Introducing Bootstrap and Font-Awesome (Rails)
Introducing Bootstrap to Rails 5
Introducing Bootstrap to Rails !!
Clogged with Express npm install
URLSession with URLSession and Combine normally
[Webpacker] Summary of how to install Bootstrap and jQuery in Rails 6.0