Asset Pipeline & Webpacker
Relevant source files
The following files were used as context for generating this wiki page:
The Actionmap project utilizes a dual-system approach for managing static assets, combining the traditional Rails Asset Pipeline (Sprockets) with Webpacker. Webpacker serves as the primary tool for compiling and serving modern JavaScript modules and stylesheets, while the Asset Pipeline is reserved for specific static files like images and topographical data.
Sources: app/assets/config/manifest.js:1-4, package.json:16
Webpacker Infrastructure
Webpacker is integrated into the project to handle complex JavaScript dependencies and SCSS compilation. It leverages Webpack as its underlying engine, configured through a central YAML file and JavaScript environment settings.
Configuration and Environment
The core configuration is defined in config/webpacker.yml, which specifies source paths, public output directories, and environment-specific behaviors such as compilation triggers and dev-server settings.
| Configuration Key | Description | Default Value |
|---|---|---|
source_path | Directory for JavaScript source files | app/javascript |
source_entry_path | Subdirectory containing entry "packs" | packs |
public_output_path | Destination for compiled assets in public/ | packs |
cache_path | Directory for Webpacker cache | tmp/cache/webpacker |
extract_css | Whether to emit separate CSS files | false |
Sources: config/webpacker.yml:4-16
The JavaScript environment is further customized in config/webpack/environment.js, where jQuery and $ are exposed globally via expose-loader and the Sass implementation is explicitly set to use the sass (Dart-Sass) package.
Sources: config/webpack/environment.js:3-21
Data Flow for JavaScript Assets
Webpacker processes files from the app/javascript/packs directory. These "pack" files serve as entry points that pull in dependencies from node_modules and local directories.
The diagram shows how source packs are processed through loaders into final public bundles.
Sources: app/javascript/packs/application.js:1-25, config/webpacker.yml:4-8
Asset Pipeline (Sprockets)
The Asset Pipeline is configured to manage specific non-JavaScript assets. The manifest file explicitly directs developers to use Webpacker for styles and scripts, reserving Sprockets for tree-linked directories.
Manifest Configuration
The Sprockets manifest links trees for:
- Images:
app/assets/images - TopoJSON:
app/assets/topojson
Sources: app/assets/config/manifest.js:1-6
Web App Manifest Integration
An initializer enhances the asset pipeline to support .webmanifest files, typically used for PWA features. It registers the application/manifest+json MIME type and ensures Sprockets handles these files correctly, including ERB preprocessing if needed.
Sources: config/initializers/web_app_manifest.rb:11-25
Dependency Management
The project relies on Yarn to manage NPM packages, including UI frameworks like Bootstrap and mapping libraries like D3.
Key NPM Dependencies
| Package | Version | Purpose |
|---|---|---|
@rails/webpacker | ^5.1.1 | Rails integration for Webpack |
bootstrap | ^4.5.0 | UI framework |
d3 | ^5.16.0 | Data visualization and mapping |
topojson | ^3.0.2 | Topographical data handling |
jquery | ^3.5.1 | DOM manipulation |
Sources: package.json:15-30
Transpilation and Post-Processing
- Babel: Configured in
babel.config.jsto provide compatibility across environments. It uses@babel/preset-envwithforceAllTransforms: truein production and development to ensure broad browser support. - PostCSS: Configured in
postcss.config.jsto handle CSS transformations, includingautoprefixer(stage 3) and flexbox bug fixes.
Sources: babel.config.js:28-35, postcss.config.js:1-12
Application Pack Implementation
The main entry point for the application's frontend logic is app/javascript/packs/application.js. This file initializes standard libraries and custom styles.
This sequence illustrates the initialization of standard UI components upon page load.
Sources: app/javascript/packs/application.js:25-35
Summary
Actionmap employs a modern asset management strategy by delegating heavy JavaScript and CSS processing to Webpacker while maintaining the Rails Asset Pipeline for static data and images. This separation allows the project to leverage the NPM ecosystem for mapping (D3/TopoJSON) and UI (Bootstrap) while keeping the overall asset structure organized and environment-aware.
Sources: app/assets/config/manifest.js:1-4, package.json:15-30