Source maps on staging? (vite_rails)

[evenreven]

I just noticed that source maps is turned off on my staging server (which in my case is meant to be identical to the production server). I think the Rails default of having sourcemaps in production is the right default, and I have not touched this setting. Pretty sure staging/production didn't make a difference in Webpacker, it had a fallback to production default if no environment was specified when building, if I remember correctly. But I don't rule out that my mind is playing tricks on me, I've been a happy vite_rails user for over a year now, so I might have forgotten about this.

Configs:

config/vite.json

{
  "all": {
    "sourceCodeDir": "app/frontend",
    "watchAdditionalPaths": []
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test"
  }
}

vite.config.js

/* eslint import/no-extraneous-dependencies: off */
import { defineConfig } from "vite";
import eslint from "@rollup/plugin-eslint";
import RubyPlugin from "vite-plugin-ruby";
import StimulusHMR from "vite-plugin-stimulus-hmr";
import FullReload from "vite-plugin-full-reload";
import { brotliCompressSync } from "zlib";
import gzipPlugin from "rollup-plugin-gzip";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  // Workaround for exports bug: https://github.com/vitejs/vite/issues/2579
  optimizeDeps: { include: ["swiper"] },
  // Use 2015 to transpile newer syntax
  build: {
    target: "es2015",
  },
  plugins: [
    // Regular gzip
    gzipPlugin(),
    // Brotli compression
    gzipPlugin({
      customCompression: (content) => brotliCompressSync(Buffer.from(content)),
      fileName: ".br",
    }),
    eslint({
      include: "**/*.+(vue|js|jsx|ts|tsx)",
      enforce: "pre",
    }),
    FullReload(["config/routes.rb", "app/views/**/*"]),
    RubyPlugin(),
    StimulusHMR(),
    visualizer({
      brotliSize: true,
      template: "sunburst",
      filename: "./public/bundle_stats.html",
    }),
  ],
});

Firefox debugger panes:

Production:

Staging:

Is there an extra config line needed to make this work?

[ElMassimo]

Hi!

As discussed in the Configuration section, source maps are enabled by default in production, and since vite-plugin-ruby@3.0.9 in staging as well.

Which version of vite-plugin-ruby are you using? Also, is your staging environment building using the production Rails env? Sourcemaps should be enabled even if your Rails environment was named staging (not recommended by modern practices, but common back in the day).

Looking at your vite.config.ts, I don't see any plugins which would explicitly disable sourcemaps, but I'd recommend running DEBUG="vite-plugin-ruby*" bin/vite build and verify that build.sourcemap is set to true.

[evenreven]

Thanks for the explanation! You say 3.0.4, but the release in the link says 3.0.9? I'm still on 3.0.8, so could that be the reason?

(I should upgrade anyway. The newest Vite releases also has css sourcemaps, which I'm very interested in.)

BTW, what's the recommendation for running a staging server nowadays? I wasn't aware that having a RAILS_ENV called staging was considered old fashioned. 😊

[ElMassimo]

Yeah, sorry, meant 3.0.9.

considered old fashioned

😄

Nowadays services like Heroku recommend using the production config in staging, and configuring services and settings that should be different using environment variables. For example, in staging the DATABASE_URL is configured to a different db, but RAILS_ENV is production.

[evenreven]

Gotcha, thanks! That's not far from what I'm already doing, but I keep two very similar environments configs basically to have the opportunity to turn on/off a couple of settings (analytics off on staging, for instance), although it's not really DRY and I probably don't need it.

I'll upgrade tomorrow and see if that fixes it! Thanks!

[evenreven]

3.0.9 fixed it!