I have a React frontend using Rails 6 as an API. Webpacker is configured to package image files in app/javascript/media to app/javascript/packs. As far as I can tell, Webpack is creating the packs correctly; the packs folder contains my bundle.js, bundle.js map, and the .svg file bundled by webpack. Bundle.js is running fine, but when I try and import the image in a component, I'm getting a routing error stating:
ActionController::RoutingError (No route matches [GET] "/img.svg")
All of the questions I've seen about this mention that static assets don't get served by Rails in production mode without further configuration, but I have Rails in development mode and webpack-dev-server running. Here's my webpack.config.js:
const path = require('path');
module.exports = {
context: __dirname,
entry: './frontend/app_name.jsx',
output: {
path: path.resolve(__dirname, 'app', 'javascript', 'packs'),
publicPath: path.resolve(__dirname, 'app', 'javascript', 'packs'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx', '*']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
query: {
presets: ['@babel/env', '@babel/react']
}
},
},
{
test: /\.(png|svg)?$/,
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
]
},
devtool: 'source-map'
};
Update: My routes.rb contains:
Rails.application.routes.draw do
root 'static#index'
namespace :api, defaults: { format: :json } do
resources :search, only: [:index]
end
end
and my static controller is
class StaticController < ApplicationController
def index
render :index
end
end
Should requests for static assets compiled by webpacker even be making it to the backend in a one page app?