Search⌘ K
AI Features
Home
Courses
Modern Front-end Development for Rails

Using Webpacker

Explore the process of setting up Webpacker in a Rails application, including adding necessary tags, understanding asset compilation, and observing how Webpacker manages JavaScript and TypeScript files in development. Gain insight into the file structure, digital fingerprinting, and source maps to streamline front-end development.

We'll cover the following...

Setting Webpacker up

To follow along, you don’t need to install Webpacker but do look at this lesson to get an understanding of the file structure.

First, we want to make sure that everything is working. To connect the Webpacker build to our app, we need to add two javascript_pack_tag calls to the app/views/layouts/application.html.erb file, as ...

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>North By North South</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css">
    <script defer="true"
            src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
    <%= javascript_pack_tag("application") %>
    <%= javascript_pack_tag("hello_typescript") %>
  </head>
  <body>
    <section class="section">
      <div class="container">
        <p class="notice"><%= notice %></p>
        <p class="alert"><%= alert %></p>
        <%= yield %>
      </div>
    </section>
  </body>
</html>
...