Webpacker and JavaScript bundling in Ruby on Rails - Mini Project: Build & Apply

Webpacker and JavaScript Bundling in Rails

📖 Scenario: You are building a simple Rails app that needs to include JavaScript code for interactive behavior. To manage and bundle your JavaScript files efficiently, you will use Webpacker, the default JavaScript bundler in Rails.This project will guide you step-by-step to set up Webpacker, add JavaScript files, and bundle them correctly so your Rails app can use them.

🎯 Goal: By the end, you will have a Rails app with Webpacker configured, a JavaScript pack file created, and your JavaScript code bundled and ready to use in your views.

📋 What You'll Learn

Create a JavaScript pack file named application.js inside app/javascript/packs

Add a simple JavaScript function inside application.js

Configure Webpacker to compile the JavaScript pack

Include the JavaScript pack tag in the Rails layout file to load the bundled JavaScript

💡 Why This Matters

🌍 Real World

Rails apps often need JavaScript for interactivity. Webpacker helps bundle and manage JavaScript files efficiently, making it easier to maintain and scale frontend code.

💼 Career

Understanding Webpacker and JavaScript bundling is essential for Rails developers to build modern web apps with clean, maintainable frontend code.

1

Create JavaScript pack file

Create a file named application.js inside app/javascript/packs folder. Inside it, write a JavaScript function called greet that logs the message 'Hello from Webpacker!' to the console.

Ruby on Rails

// Your code here
// Create function greet that logs 'Hello from Webpacker!'

Hint

Use function greet() { ... } and inside it console.log('Hello from Webpacker!'). Then call greet() at the end.

2

Configure Webpacker to compile JavaScript

Ensure Webpacker is installed and configured in your Rails app. Add the line <%= javascript_pack_tag 'application' %> inside the <head> section of your app/views/layouts/application.html.erb file to load the JavaScript pack.

Ruby on Rails

function greet() {
  console.log('Hello from Webpacker!');
}

greet();

 inside  in application.html.erb -->

Hint

Open app/views/layouts/application.html.erb and add <%= javascript_pack_tag 'application' %> inside the <head> tag.

3

Run Webpacker to bundle JavaScript

Run the command bin/webpack in your terminal to compile and bundle the JavaScript files using Webpacker.

Ruby on Rails

// Your code here
// Run bin/webpack in terminal to bundle JavaScript

Hint

Open your terminal and run bin/webpack to compile the JavaScript pack.

4

Verify JavaScript is loaded in the browser

Open your Rails app in a browser and use the browser's developer console to verify that the message 'Hello from Webpacker!' appears, confirming the JavaScript bundle is loaded and running.

Ruby on Rails

Hint

Open your browser's developer tools console to see the logged message from your JavaScript code.

Practice

1. What is the main purpose of Webpacker in a Rails application?

easy

A. To style HTML elements with CSS

B. To bundle JavaScript files so they load efficiently in the browser

C. To manage database migrations automatically

D. To handle user authentication

Solution

1. Step 1: Understand Webpacker's role

   Webpacker is designed to bundle JavaScript files for Rails apps.

2. Step 2: Identify its main function

   Bundling means combining files to load faster and more efficiently in browsers.

3. Final Answer:

   To bundle JavaScript files so they load efficiently in the browser -> Option B

4. Quick Check:

   Webpacker bundles JS = C [OK]

Hint: Webpacker bundles JS files for faster loading [OK]

Common Mistakes:

• Confusing Webpacker with database tools
• Thinking Webpacker styles HTML
• Assuming Webpacker manages user login

2. Which of the following is the correct way to include a Webpacker JavaScript pack in a Rails view?

easy

A. <%= javascript_pack_tag 'application' %>

B. <%= stylesheet_pack_tag 'application' %>

C. <%= javascript_include_tag 'application.js' %>

D. <%= image_pack_tag 'application' %>

Solution

1. Step 1: Identify the helper for JS packs

   Webpacker uses javascript_pack_tag to include JS bundles.

2. Step 2: Confirm correct syntax

   The syntax is <%= javascript_pack_tag 'pack_name' %>, so <%= javascript_pack_tag 'application' %> matches.

3. Final Answer:

   <%= javascript_pack_tag 'application' %> -> Option A

4. Quick Check:

   Use javascript_pack_tag for JS packs = A [OK]

Hint: Use javascript_pack_tag to load JS bundles in views [OK]

Common Mistakes:

• Using stylesheet_pack_tag for JavaScript
• Using javascript_include_tag instead of javascript_pack_tag
• Confusing image_pack_tag with JS inclusion

3. Given the following JavaScript pack file app/javascript/packs/hello.js with content:

import { greet } from '../utils/greet'
console.log(greet('Rails'))

and app/javascript/utils/greet.js contains:

export function greet(name) {
  return `Hello, ${name}!`
}

What will be printed in the browser console when the pack is loaded?

medium

A. SyntaxError: Unexpected token

B. greet is not defined

C. Hello, undefined!

D. Hello, Rails!

Solution

1. Step 1: Understand the import and export

   The greet function is exported from utils/greet.js and imported correctly in hello.js.

2. Step 2: Analyze the console.log output

   Calling greet('Rails') returns the string Hello, Rails!, which is logged.

3. Final Answer:

   Hello, Rails! -> Option D

4. Quick Check:

   Correct import/export logs greeting = D [OK]

Hint: Check import/export paths and function calls for output [OK]

Common Mistakes:

• Forgetting to export the function
• Using wrong import path
• Expecting undefined instead of correct string

4. You added a new JavaScript file app/javascript/packs/custom.js but when you include it with <%= javascript_pack_tag 'custom' %>, the browser console shows a 404 error. What is the most likely cause?

medium

A. You forgot to restart the Rails server after adding the pack

B. The file is not saved in the correct directory

C. The javascript_pack_tag helper is deprecated and should not be used

D. The file has syntax errors preventing compilation

Solution

1. Step 1: Check file location

   The file is correctly placed in app/javascript/packs/, so location is likely correct.

2. Step 2: Consider server restart

   Webpacker requires the Rails server or webpack-dev-server to restart to detect new packs.

3. Final Answer:

   You forgot to restart the Rails server after adding the pack -> Option A

4. Quick Check:

   Restart server to load new packs = A [OK]

Hint: Restart server after adding new JS packs [OK]

Common Mistakes:

• Assuming helper is deprecated
• Ignoring server restart requirement
• Blaming syntax errors without checking logs

5. You want to organize your JavaScript code by creating a module app/javascript/modules/calc.js exporting a function add(a, b). How should you import and use this function in your pack file app/javascript/packs/main.js to log the sum of 5 and 7?

hard

A. import add from '../modules/calc.js'
console.log(add(5, 7))

B. require('../modules/calc')
console.log(add(5, 7))

C. import { add } from '../modules/calc'
console.log(add(5, 7))

D. import * as calc from '../modules/calc'
console.log(calc.add(5, 7))

Solution

1. Step 1: Understand ES module import syntax

   If add is a named export, import it with curly braces: import { add } from 'path'.

2. Step 2: Use the function correctly

   Call add(5, 7) and log the result with console.log.

3. Final Answer:

   import { add } from '../modules/calc' console.log(add(5, 7)) -> Option C

4. Quick Check:

   Named export import uses braces = B [OK]

Hint: Use curly braces to import named exports [OK]

Common Mistakes:

• Using default import syntax for named exports
• Using require instead of import in Webpacker
• Forgetting to call function from imported module