Build Tools

Storefront Next uses Vite as its build tool, providing fast development builds through native ES modules and optimized production builds through Rollup. The toolchain includes native TypeScript support and Vitest for testing.

The vite.config.ts file configures these plugins for your storefront.

reactRouter(): Enables React Router 7 framework mode with file-based routing and Server-Side Rendering (SSR).
tailwindcss(): Compiles Tailwind CSS styles.
tsconfigPaths(): Resolves TypeScript path aliases like @/components.
storefrontNextPlugin(): Prepares your build for deployment to Managed Runtime (MRT), including bundle formatting, manifest generation, and React Router compatibility patches.

You can add more Vite plugins to customize your build.

The storefrontNextPlugin accepts this optional configuration object.

Option	Type	Default	Description
`readableChunkNames`	`boolean`	`false`	Generate human-readable chunk file names for easier debugging. Useful with bundle analyzer.

When readableChunkNames is enabled, chunk files are named based on their source location.

Plugin	Purpose
`@react-router/dev/vite`	React Router 7 framework mode integration
`@tailwindcss/vite`	Tailwind CSS compilation
`vite-tsconfig-paths`	TypeScript path alias resolution
`storefrontNextPlugin`	MRT deployment and bundle optimization
`vite-plugin-bundlesize`	Bundle size validation
`rollup-plugin-visualizer`	Bundle analysis visualization

The react-router.config.ts file uses a preset that enforces standard configuration for B2C Commerce.

The preset configures:

appDirectory: './src' — App source directory
buildDirectory: 'build' — Build output directory
serverModuleFormat: 'cjs' — Server bundle format for MRT compatibility
ssr: true — Server-side rendering enabled
Middleware support enabled

Storefront Next uses TypeScript with strict settings enabled by default.

The @/* path alias lets you import from the src directory using absolute paths:

Storefront Next uses Vitest for unit testing. Vitest integrates natively with Vite, sharing the same configuration and transformation pipeline.

Configure testing options in the test section of vite.config.ts.

Command	Description
`pnpm dev`	Start development server with hot module replacement.
`pnpm build`	Create a production build.
`pnpm start`	Preview a production build locally.
`pnpm push`	Deploy to MRT.
`pnpm typecheck`	Run TypeScript type checking.
`pnpm test`	Run Vitest tests with coverage.
`pnpm bundlesize:test`	Build and validate bundle sizes.
`pnpm bundlesize:analyze`	Build and visualize bundle composition.

Production builds generate source maps by default. Source maps map minified code back to your original source files, giving you readable stack traces when errors occur.

Control source map generation in vite.config.ts using Vite’s [build.sourcemap](https://vite.dev/config/build-options.html#build-sourcemap) option.

Value	Behavior
`true`	Generates `.map` files alongside your build output. (Default)
`"hidden"`	Generates `.map` files but omits the `sourceMappingURL` comment in bundles.
`false`	Disables source map generation entirely.

Source maps are included in your deployed bundle, but MRT must be configured to use them at runtime. When enabled, MRT starts your server with the --enable-source-maps Node.js flag, which gives you original file names and line numbers in error stack traces.

Log in to Runtime Admin.
Click your project.
Click your target environment.
Click Environment Settings.
In the Advanced section, click Edit.
Enable Source Maps.
Click Update and wait for the bundle to redeploy.

Storefront Next enforces bundle size limits to maintain performance. Configure limits in package.json.

Run pnpm bundlesize:test to validate that your build stays within limits. If a chunk exceeds the baseline 50-KB limit, add an explicit entry for that chunk with an approved limit.

To generate a visual treemap of your bundle composition, run pnpm bundlesize:analyze. This command helps you identify optimization opportunities.