Rails 6 to 7 upgrade with esbuild/sprockets - webfonts not found in development

rubyonrails-talk
1

Hi Im almost at the goal line with my upgrade. Im have been dealing with dynamic reload on js/css changes and it is causing some issues.

As part of the upgrade i have gone with jsbundling (esbuild )and cssbundling (bootstrap).

I think that a part of my issue is that I don’t fully understand what esbuild/sprockets start and stop.

In order to get hot reloading to work i found that i had to run assets:clobber as i had issues with rails reading the digest versions of application.js and stylesheet.css from public/assets. After having cleaned out public/assets dynamic reloading seems to work. I don’t fully understand why.

The issue is now that i get following errors in my chrome console:

GET http://localhost:3000/webfonts/fa-solid-900.woff2 404 (Not Found)
application-4dcb73f3da433d833f26d81dbcf900551080dd96edea864ecb90f8100963eae5.css:1          GET http://localhost:3000/webfonts/fa-solid-900.woff 404 (Not Found)
application-4dcb73f3da433d833f26d81dbcf900551080dd96edea864ecb90f8100963eae5.css:1          GET http://localhost:3000/webfonts/fa-solid-900.ttf net::ERR_ABORTED 404 (Not Found)

and in rails log (only one of them is shown here):

web_1  | 18:53:02 web.1  | I, [2022-09-26T18:53:02.849005 #40]  INFO -- : Started GET "/webfonts/fa-solid-900.ttf" for 172.25.0.1 at 2022-09-26 18:53:02 +0000
web_1  | 18:53:02 web.1  | I, [2022-09-26T18:53:02.849949 #40]  INFO -- : Cannot render console from 172.25.0.1! Allowed networks: 127.0.0.0/127.255.255.255, ::1
web_1  | 18:53:02 web.1  | F, [2022-09-26T18:53:02.857123 #40] FATAL -- :   
web_1  | 18:53:02 web.1  | ActionController::RoutingError (No route matches [GET] "/webfonts/fa-solid-900.ttf"):

This is fairly obvious as I just cleared out public/assets

Now if i run assets:precompile then public/assets is rebuild and after an application restart I still get the error:

web_1  | 19:06:46 web.1  | I, [2022-09-26T19:06:46.913294 #40]  INFO -- : Started GET "/webfonts/fa-solid-900.ttf" for 172.25.0.1 at 2022-09-26 19:06:46 +0000
web_1  | 19:06:46 web.1  | I, [2022-09-26T19:06:46.914006 #40]  INFO -- : Cannot render console from 172.25.0.1! Allowed networks: 127.0.0.0/127.255.255.255, ::1
web_1  | 19:06:46 web.1  | F, [2022-09-26T19:06:46.922051 #40] FATAL -- :   
web_1  | 19:06:46 web.1  | ActionController::RoutingError (No route matches [GET] "/webfonts/fa-solid-900.ttf"):

and just to really set my self back to square zero hot reloading is not working. The assets/builds gest a application.js (with sourcemap) but development now uses the public/assets digest version. Thus I run run assets:clobber once more, but the is very circular.

Does anyone have any idea how to get me out of this bind?

Thanks Jens

My esbuild.config:

// yarn build
// yarn build --watch
// yarn build --reload

const esbuild = require("esbuild")
const path = require("path")
const rails = require("esbuild-rails")

const clients = []
const entryPoints = [
    "application.js"
]

const watchDirectories = [
    "./app/assets/builds/**/*.css", // Wait for cssbundling changes
    "./app/javascript/**/*",
    "./app/views/**/*"
]

const config = {
    absWorkingDir: path.join(process.cwd(), "app/javascript"),
    bundle: true,
    entryPoints: entryPoints,
    outdir: path.join(process.cwd(), "app/assets/builds"),
    plugins: [rails()],
    sourcemap: process.env.RAILS_ENV != "production"
}

async function buildAndReload() {
    const chokidar = require("chokidar")
    const http = require("http")

    http.createServer((req, res) => {
        return clients.push(
            res.writeHead(200, {
                "Content-Type": "text/event-stream",
                "Cache-Control": "no-cache",
                "Access-Control-Allow-Origin": "*",
                "Connection": "keep-alive"
            })
        )
    }).listen(8082)

    let result = await esbuild.build({
        ...config,
        incremental: true,
        banner: {
            js: '(() => new EventSource("http://localhost:8082").onmessage = () => location.reload())();'
        }
    })

    chokidar.watch(watchDirectories).on('all', (event, path) => {
        if (path.includes("javascript")) {
            result.rebuild()
        }

        clients.forEach((res) => res.write("data: update\n\n"))
        clients.length = 0
    })
}

if (process.argv.includes("--reload")) {
    buildAndReload()

} else {
    const watch = process.argv.includes("--watch") && {
        onRebuild(error) {
            if (error) console.error("[watch] build failed", error)
            else console.log("[watch] build finished")
        }
    }
    esbuild.build({
        ...config,
        watch: watch,
        minify: process.env.RAILS_ENV == "production"
    }).catch(() => process.exit(1))
}

and for my development environment i have:

  # Debug mode disables concatenation and preprocessing of assets.
  # This option may cause significant delays in view rendering with a large
  # number of complex assets.
  config.assets.debug = false

  #To get assets to work in dev
  config.assets.compile = true

  # Suppress logger output for asset requests.
  config.assets.quiet = true
2

I have nearly same issues as yours.