Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
Finishing the Bookstore SPA End to End: Feature Folders, Authentication, Environments and Deployment
Getting a React SPA ready for production means guarding feature boundaries with a lint rule, knowing that VITE_ variables are written into the bundle at build time so secrets stay out of the browser, and handing the session to a BFF that uses an HttpOnly cookie instead of a token. We add a small ASP.NET Core and YARP BFF to Bookstore and show the sign-in flow, the SPA fallback, cache headers, an nginx config and bundle analysis with real output.
Your First React Project: Vite + TypeScript, Project Structure, StrictMode and React DevTools
We build a project skeleton for the series with Vite's react-ts template, feature folders, an @/ alias from a single source via Vite 8's resolve.tsconfigPaths, Oxlint's hook rules and a dev proxy that forwards /api requests to the Bookstore API. With real output we show that StrictMode renders twice and runs effects setup-cleanup-setup in development while the production build runs everything once, and that without the proxy the browser refuses to read the response because of CORS.
React for Angular Developers: Library or Framework, Mental Model Differences and the Ecosystem Map
React is a UI library, not a framework: it gives you components, state and rendering, while the team picks routing, data fetching, forms and global state from the ecosystem. We write Bookstore's book card side by side in Angular and React, show with real output that one click makes React call the component function again yet change only two text nodes in the DOM, and map Angular concepts to their React counterparts in a table.
Wiring Sass into the Build: Source Maps, Angular, Vite and ASP.NET Core Settings, Load Paths and Compile Performance
Turn source maps on in development, make them hidden in production and split the .map files off from the release; in Vite, install sass-embedded and put only @use lines that produce no CSS into additionalData. We show a Release build after Debug in Bookstore never running Sass and shipping the map with its Brotli and gzip copies, fix the MSBuild target, check that DevTools finds the .scss line, and try our own build script with the pkg: importer.
The Rust Wave and the 2025–2026 Release Map: Rolldown, Oxc, Rspack, Turbopack, Lightning CSS and Choosing a Tool
In 2025–2026 build tools written in JavaScript were replaced by ones written in Rust and Go: Vite 8 moved to Rolldown and Oxc, the Angular CLI to Rolldown for chunk optimization, Next.js 16 to Turbopack, and Rspack 2.0 offered a webpack-compatible path. Measuring the Bookstore widget with four tools, we see Rspack ahead on the small project, Rolldown and esbuild ahead at 2000 modules, most of webpack's time spent in Terser, and we end with a decision table.
Source Maps: the ECMA-426 Format, Hidden Source Maps in Production, Error Tracking and Security
A source map is a JSON file that maps every position in minified code back to the source, standardized as ECMA-426 since December 2024; a hidden source map only drops the sourceMappingURL comment, so anyone can download the file if it is on the server. In Bookstore we decode the mappings field's Base64 VLQ, see ASP.NET Core serving the .map file, keep maps out of the deploy and map a production error back to a TypeScript line with a debug ID.
Code Splitting, Tree Shaking and Bundle Analysis: Finding What Bloats Your Bundle
Do not guess what bloats a bundle, measure it: ng build --stats-json, source-map-explorer, rollup-plugin-visualizer and webpack-bundle-analyzer show the breakdown by package, and tree shaking only works on ESM modules without side effects. In Bookstore's Angular app we see that named imports from lodash gain nothing, that a barrel file carries side effects, that removing moment and lodash takes main from 359 kB to 224 kB, and how to make the vendor chunk decision in Vite.
The Angular CLI Build System: the application Builder, esbuild + Vite, the Move to Rolldown and Migrating from webpack
The Angular CLI's application builder bundles the app with esbuild, reorganizes the chunks with Rolldown once the number of lazy chunks passes a threshold, and uses Vite only as the dev server. Migrating Bookstore's Angular app from the webpack-based browser builder, we look at the output moving into a browser folder, a main bundle cut in half because of moment's locale files, the limits of HMR, the define and loader options, the Baseline browser target and the TypeScript 6.0 requirement.
Vite: The Native ESM Dev Server, HMR, Dependency Pre-bundling and Production Builds with Rolldown
In development Vite does not bundle source code: it transforms each file on request, serves it as native ESM and pre-bundles dependencies once; in production Vite 8 uses Rolldown, Oxc and Lightning CSS. Connecting the Bookstore widget to ASP.NET Core, we look at the /api proxy, when HMR reloads the page, a Razor tag helper that reads manifest.json, how VITE_ variables end up in the bundle, and settings that silently stop working when migrating from Vite 7.
esbuild: Speed Written in Go, Its API, Plugins and Limits
esbuild is fast because it compiles to native code with Go, spreads work across CPU cores and walks the AST only three times; it bundled all of lodash-es about 22 times faster than webpack, but 9% larger. On the Bookstore widget we use its CLI, JS API, metafile and onResolve/onEnd plugins, and look at its limits in type checking, HMR, HTML and code splitting, and at its place inside the Angular CLI.
Understanding webpack: Entry, Loaders, Plugins, Module Federation and When You Still Need It in 2026
webpack treats every file as a module; loaders transform files right to left and plugins hook into the compilation. 5.112 supports CSS, HTML entries and TypeScript without loaders; Vite has replaced it in new projects, but it is still needed for old Angular builders, Module Federation and large projects tied to custom loaders. On the Bookstore widget we hit the loader-order error, write a manifest plugin and measure splitChunks' minSize limit and the cost of Module Federation.
Why Build Tools Exist: Module Graphs, Transpiling, Bundling, Minification and the Dev Server's Job
A build tool does what the browser cannot do on its own: it resolves imports into a module graph, transpiles TypeScript, drops unused code, bundles and minifies files and gives them content-hashed names. Using Bookstore's book search widget, we look at the 642 requests of bundler-free ESM, the 3-request output from Vite 8, Baseline build targets and the difference between the dev server and a production build, all with real output.