Rails for Front-end Development: Essential Tools/

...

/

Using Webpacker

Using Webpacker

Let's take Webpacker for a spin and build something in this lesson.

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:

Press + to interact
<!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 consolidate them ...