Search⌘ K
AI Features
Home
Courses
Rails for Front-end Development: Essential Tools

Using Webpacker

Explore how to set up and use Webpacker within a Rails application to manage JavaScript and CSS assets. Understand helper methods, server startup, file compilation, and debugging support using source maps to improve front-end development.

We'll cover the following...

With Webpacker installed, let’s build something.

First, let’s make sure everything is working. To connect the Webpacker build to our app, we need to add two helper method calls to the app/views/layouts/application.html.erb file, like so:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>North By North East</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_pack_tag(
          "application",
          media: "all",
          "data-turbolinks-track": "reload"
        ) %>
    <%= javascript_pack_tag("application", "data-turbolinks-track": "reload") %>
  </head>
  <body>
    <section class="py-12 px-6">
      <%= render "layouts/nav" %>
      <div class="container mx-auto">
        <div class="mt-6">
          <p class="notice"><%= notice %></p>
          <p class="alert"><%= alert %></p>
          <%= yield %>
        </div>
      </div>
    </section>
  </body>
</html>

These helpers are stylesheet_pack_tag and javascript_pack_tag. We’ll use both as-is for the moment and ...