# Understanding the Build Process for Stremio Web: From Development to Production > Discover the Stremio Web build process. Learn how Node.js and Webpack bundle JavaScript, optimize assets, and create production-ready packages with content-hashed filenames. - Repository: [Stremio/stremio-web](https://github.com/Stremio/stremio-web) - Tags: internals - Published: 2026-05-23 --- **Stremio Web relies on a Node.js and Webpack-based build pipeline controlled by [`package.json`](https://github.com/Stremio/stremio-web/blob/main/package.json) scripts and [`webpack.config.js`](https://github.com/Stremio/stremio-web/blob/main/webpack.config.js) to bundle JavaScript, optimize assets, and generate production-ready packages with content-hashed filenames.** The Stremio Web application, housed in the `Stremio/stremio-web` repository, compiles a React-based streaming interface through a sophisticated build toolchain. Understanding the **build processes for Stremio Web** reveals how the development team handles everything from HTTPS development servers to minified production bundles and Docker deployment. ## Development Environment and Local Setup Before compiling the application, the build system requires Node.js dependencies managed through pnpm. ### Installing Dependencies The project uses **pnpm** as its package manager. Running `pnpm install` pulls all runtime and build-time dependencies specified in [`package.json`](https://github.com/Stremio/stremio-web/blob/main/package.json), including Webpack, Babel, and various loaders required for the compilation pipeline. ### Starting the Development Server The development workflow launches via the `npm start` command, which executes `webpack serve --mode development` as defined in [`package.json`](https://github.com/Stremio/stremio-web/blob/main/package.json) at line 9. Unlike standard React development setups, **hot-reload is disabled** in the `devServer` configuration within [`webpack.config.js`](https://github.com/Stremio/stremio-web/blob/main/webpack.config.js) (around line 84), relying instead on a static-file server architecture. The entry points for this build are [`src/index.js`](https://github.com/Stremio/stremio-web/blob/main/src/index.js) and the core worker thread. ```bash pnpm start # runs: webpack serve --mode development ``` ## Production Build Pipeline Creating deployable artifacts involves Webpack's production mode with aggressive optimization and asset hashing. ### Webpack Production Mode Execution Running `pnpm run build` triggers `webpack --mode production` (defined in [`package.json`](https://github.com/Stremio/stremio-web/blob/main/package.json) at line 11). This command processes the source code through [`webpack.config.js`](https://github.com/Stremio/stremio-web/blob/main/webpack.config.js), emitting minified bundles into the `build/` directory. Critically, output filenames embed the current **git commit hash** for cache-busting, ensuring browsers load fresh assets after each deployment. ### Asset Processing and Loaders The `module.rules` section of [`webpack.config.js`](https://github.com/Stremio/stremio-web/blob/main/webpack.config.js) (lines 49-74) configures a sophisticated transformation pipeline: - **JavaScript/TypeScript**: Processed through thread-pooled Babel and TypeScript loaders - **LESS Stylesheets**: Transpiled via `less-loader` and extracted to `styles/[name].css` using `MiniCssExtractPlugin` - **Static Resources**: Images, fonts, and WASM modules emit as hashed assets through generator rules (around lines 150-170) ### Code Minification and Optimization Production builds employ **TerserPlugin** for JavaScript minification and **cssnano** (advanced preset) for CSS optimization. These are configured in the `optimization.minimizer` block of [`webpack.config.js`](https://github.com/Stremio/stremio-web/blob/main/webpack.config.js) (lines 91-108), significantly reducing bundle sizes for network-constrained environments. ### Service Worker Generation When `process.env.NODE_ENV === 'production'` and service workers remain enabled, `WorkboxPlugin.GenerateSW` (configured in [`webpack.config.js`](https://github.com/Stremio/stremio-web/blob/main/webpack.config.js) lines 122-129) generates a caching strategy for static assets. This enables offline functionality and improves load times for returning users. ## Environment Configuration and Deployment ### Build-time Environment Variables The `webpack.EnvironmentPlugin` (lines 110-118 in [`webpack.config.js`](https://github.com/Stremio/stremio-web/blob/main/webpack.config.js)) injects critical build-time values into the application bundle. These include `VERSION`, `COMMIT_HASH`, and `SENTRY_DSN`, allowing the runtime code to access deployment metadata and error reporting configuration without exposing sensitive secrets in source control. ### Static Asset Handling The `CopyWebpackPlugin` configuration (lines 130-138) handles non-code assets by copying favicons, images, screenshots, the `.well-known` directory, and [`manifest.json`](https://github.com/Stremio/stremio-web/blob/main/manifest.json) directly into the output folder. This ensures PWA requirements and branding assets remain intact through the build process. ### Docker Containerization For containerized deployment, the repository includes a **Dockerfile** that executes `pnpm install && pnpm run build` before serving the generated `build/` directory on port 8080. This encapsulates the entire **build process for Stremio Web** into a reproducible environment, eliminating "works on my machine" discrepancies. ```bash docker build -t stremio-web . docker run -p 8080:8080 stremio-web ``` ## Testing and Code Quality The build pipeline integrates quality gates through separate npm scripts. The `test` command (line 12 in [`package.json`](https://github.com/Stremio/stremio-web/blob/main/package.json)) executes **Jest** for unit testing, while `npm run lint` (line 14) runs **ESLint** against the `src/` directory to enforce code standards before deployment. ## Summary - **Development**: Uses `webpack serve` with pnpm, disabling hot-reload in favor of static serving via the `devServer` configuration in [`webpack.config.js`](https://github.com/Stremio/stremio-web/blob/main/webpack.config.js). - **Production**: Executes `webpack --mode production` to generate hashed bundles in `build//`, optimizing with Terser and cssnano. - **Assets**: Processes LESS, JavaScript, and static files through dedicated loaders in `module.rules`, extracting CSS and copying PWA assets via plugins. - **Environment**: Injects build metadata like `COMMIT_HASH` and `SENTRY_DSN` through `webpack.EnvironmentPlugin`. - **Deployment**: Supports Docker containerization that automates the full build chain and exposes port 8080. ## Frequently Asked Questions ### What build tool does Stremio Web use? Stremio Web uses **Webpack 5** as its primary bundler, orchestrated through npm scripts defined in [`package.json`](https://github.com/Stremio/stremio-web/blob/main/package.json). The configuration in [`webpack.config.js`](https://github.com/Stremio/stremio-web/blob/main/webpack.config.js) handles both development serving and production optimization, including asset hashing, code splitting, and service worker generation through Workbox. ### How does Stremio Web handle cache busting for static assets? The build pipeline embeds the current **git commit hash** into output filenames (e.g., `build//scripts/main.js`). This strategy, implemented in the output configuration of [`webpack.config.js`](https://github.com/Stremio/stremio-web/blob/main/webpack.config.js), forces browsers to download fresh assets after each deployment while allowing indefinite caching of immutable resources. ### Can I build Stremio Web without Docker? Yes. Running `pnpm run build` locally executes the full Webpack pipeline, generating production bundles in the `build/` directory. However, Docker provides a containerized approach that ensures consistent Node.js and pnpm versions across development and production environments, using the Dockerfile in the repository root. ### Why is hot-reload disabled in the development server? According to the `devServer` configuration in [`webpack.config.js`](https://github.com/Stremio/stremio-web/blob/main/webpack.config.js) (around line 84), hot module replacement is disabled because Stremio Web uses a static-file server architecture. The development server focuses on HTTPS serving and proxy capabilities rather than in-memory hot reloading, aligning with the application's specific runtime requirements.