116 Followers
·
Follow

STEP-BY-STEP GUIDE

Ruby on Rails 6 with Webpacker and Bootstrap

Complete step-by-step guide on setting up Bootstrap using Webpacker in Rails 6

Image for post
Image for post
Background photo by Samuel Zeller on Unsplash

What is Webpacker?

Sprockets and/or Webpacker?

...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).However, it is possible to use Webpacker for CSS, images and fonts  assets as well, in which case you may not even need the asset pipeline. This is mostly  relevant when exclusively using component-based JavaScript frameworks.

Getting Started With Webpacker

rails new helloworld
Image for post
Image for post
A simple hello world page
Image for post
Image for post
Simple hello world page with Boostrap working

Including Asset Pipeline Into Webpack

resolved_paths: ['app/assets']
Image for post
Image for post
Simple hello world page with Green title

So what is 'stylesheet_pack_tag' for anyways?

Image for post
Image for post
Without `stylesheet_pack_tag` where all styling are inlined within the webpack generated application.js file
Image for post
Image for post
With ‘stylesheet_pack_tag` with a separate stylesheet bundle generated

The Beauty of Using Webpack(er): Easily generate separate JS and/or CSS bundles

Image for post
Image for post
Generating and loading only the calendar js component on a single page

Few Other Interesting Findings

Written by

Entrepreneur. Ruby Engineer. Co-founder of Evercondo.com (Acquired). Currently Application Architect and Team Leader at Frontsteps.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store