@modern-js/app-tools 3.6.0 → 3.8.0

package/docs/llms.txt

@@ -0,0 +1,285 @@
+# Modern.js
+
+> The Modern.js framework is a progressive web framework based on React. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications.
+
+## Guide
+
+- [Introduction](/guides/get-started/introduction.md): Modern.js is a progressive web framework based on React. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications. Modern.js can provide developers with an ultimate Development Experience and enable applications to have better User Experience. In the process of developing React applications, developers usually need to design implementation plans for certain features or use other libraries and frameworks to solve these problems. Modern.js supports all configurations and tools needed by React applications, and has built-in additional features and optimizations. Developers can use React to build the UI of the application, and then gradually adopt the features of Modern.js to solve common application requirements, such as routing, data acquisition, and state management. It mainly includes the following features: 🚀 Rust Bundler: Modern.js uses Rsbuild/Rspack as the build tool, providing blazing fast compilation.🪜 Progressive: Create projects with the most streamlined templates, gradually enable plugin features through the generator, and customize solutions.🏠 Integration: Development and production environment web server are unique, CSR and SSR are isomorphic development, and API service calls are functions as interfaces.🕸 Convention Routing: Using file-based routing helps developers quickly set up applications.
+- [Quick Start](/guides/get-started/quick-start.md)
+- [Upgrading](/guides/get-started/upgrade.md)
+- [Glossary](/guides/get-started/glossary.md)
+- [Tech Stack](/guides/get-started/tech-stack.md): The Modern.js framework comes with built-in popular libraries and development tools from the community. In this document, you can learn about the main technology stack involved in the Modern.js framework, as well as some optional libraries and tools.
+- [AI Tools](/guides/get-started/ai-coding-agents.md): Modern.js provides a toolkit for AI agents that makes your project agent-ready out of the box, helping you use AI to develop, upgrade, and migrate Modern.js applications more accurately and efficiently.
+- [Page Entry](/guides/concept/entries.md): Through this chapter, you can understand the entry conventions in Modern.js and how to customize entries.
+- [Build Engine](/guides/concept/builder.md): Modern.js internally encapsulates Rsbuild, using Rspack as the bundler.
+- [Web Server](/guides/concept/server.md): Modern.js provides an integrated Web server for applications that can run in any container environment with Node.js. Whether executing the dev command in a local development environment, running the build && serve commands in a production environment, or using the official deployment solution, it all runs through this Web server to host the application.
+- [Routing](/guides/basic-features/routes/routes.md): Modern.js routing is based on React Router v7, offering file convention-based routing capabilities and supporting the industry-popular nested routing pattern. When an entry is recognized as conventional routing, Modern.js automatically generates the corresponding routing structure based on the file system.
+- [Config Routes](/guides/basic-features/routes/config-routes.md): By default, Modern.js recommends using Convention Routes as the way to define routes. At the same time, Modern.js also provides a config-based routing capability that can be used together with convention routes or used separately.
+- [Data Fetching](/guides/basic-features/data/data-fetch.md): Modern.js provides out-of-the-box data fetching capabilities. Developers can use these APIs to fetch data in their projects. It's important to note that these APIs do not help the application make requests but assist developers in managing data better and improving project performance.
+- [Data Writing](/guides/basic-features/data/data-write.md): In the Data Fetching section, we introduced how Modern.js fetches data. This might bring up two questions: How do I update the data returned by the Data Loader?How do I send new data to the server? In Modern.js, you can use Data Action to address these scenarios.
+- [Data Caching](/guides/basic-features/data/data-cache.md): The cache function allows you to cache the results of data fetching or computation, Compared to full-page rendering cache, it provides more fine-grained control over data granularity and is applicable to various scenarios such as Client-Side Rendering (CSR), Server-Side Rendering (SSR), and API services (BFF).
+- [Rendering Mode Overview](/guides/basic-features/render/overview.md): Modern.js supports multiple rendering modes, and different rendering modes are suitable for different scenarios. Choosing the right rendering mode can significantly improve application performance and user experience.
+- [Server-Side Rendering](/guides/basic-features/render/ssr.md): Server-Side Rendering (SSR) generates complete HTML pages on the server and sends them to the browser for direct display, without requiring additional client-side rendering.
+- [Streaming Server-Side Rendering](/guides/basic-features/render/streaming-ssr.md): Streaming rendering is an advanced rendering method that progressively returns content during the page rendering process, significantly improving user experience. In traditional SSR rendering, the page is rendered all at once, requiring all data to be loaded before returning the complete HTML. In streaming rendering, the page is rendered progressively, allowing content to be returned as it renders, so users can see initial content faster. Compared to traditional SSR rendering: Faster Perceived Speed: Streaming rendering can progressively display content, quickly rendering the home page.Enhanced User Experience: Users can see page content faster and interact without waiting for the entire page to render.Better Performance Control: Developers can better control the loading priority and order, optimizing performance and user experience.Better Adaptability: Streaming rendering adapts better to various network speeds and device performance, ensuring good performance across different environments.
+- [Rendering Cache](/guides/basic-features/render/ssr-cache.md): When developing applications, sometimes we cache computation results using hooks like React's useMemo and useCallback. By leveraging caching, we can reduce the number of computations, thus saving CPU resources and improving user experience. Modern.js supports caching server-side rendering (SSR) results, reducing the computational and rendering time during subsequent requests. This accelerates page load time and improves user experience. Additionally, caching lowers server load, conserves computational resources, and speeds up user access.
+- [Static Site Generation](/guides/basic-features/render/ssg.md): SSG (Static Site Generation) is a technical solution that generates complete static web pages at build time based on data and templates. This means that in a production environment, pages are pre-rendered with content and can be cached by a CDN. SSG can offer better performance and higher security for pages that do not require dynamic data.
+- [React Server Components (RSC)](/guides/basic-features/render/rsc.md): React Server Components (RSC) is a new component type that allows components to be rendered in a server environment, bringing better performance and developer experience to modern web applications.
+- [Render Preprocessing](/guides/basic-features/render/before-render.md): In certain scenarios, applications need to perform preprocessing operations before rendering. Modern.js recommends using Runtime Plugins to implement this type of logic.
+- [Styling](/guides/basic-features/css/css.md): Modern.js has built-in a variety of commonly used CSS solutions, including Less / Sass / Stylus preprocessors, PostCSS, CSS Modules, CSS-in-JS, and Tailwind CSS.
+- [Use CSS Modules](/guides/basic-features/css/css-modules.md): CSS Modules allows us to write CSS code in a modular way, and these styles can be imported and used in JavaScript files. Using CSS Modules can automatically generate unique class names, isolate styles between different modules, and avoid class name conflicts. Modern.js supports CSS Modules by default, you don't need to add additional configuration. Our convention is to use the [name].module.css filename to enable CSS Modules. The following style files are considered CSS Modules: *.module.scss*.module.less*.module.css
+- [Using CSS-in-JS](/guides/basic-features/css/css-in-js.md): CSS-in-JS is a technique that allows you to write CSS styles within JS files. Modern.js supports the commonly used community CSS-in-JS library styled-components, which uses JavaScript's new feature Tagged template to write component CSS styles. The Modern.js plugin @modern-js/plugin-styled-components provides support for styled-components and adds server-side rendering capability for styled-components. You can use styled-components by installing the @modern-js/plugin-styled-components plugin.
+- [Using Tailwind CSS](/guides/basic-features/css/tailwindcss.md): Tailwind CSS is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles.
+- [HTML Template](/guides/basic-features/html.md): Modern.js provides JSX syntax and HTML(EJS) syntax to customize the HTML template.
+- [Import Static Assets](/guides/basic-features/static-assets.md): Modern.js supports import static assets, including images, fonts, and medias.
+- [Import JSON Files](/guides/basic-features/static-assets/json-files.md): Modern.js supports import JSON files in code by default. You can use Rsbuild plugins to support importing YAML and Toml files and converting them to JSON format.
+- [Import SVG Assets](/guides/basic-features/static-assets/svg-assets.md): Modern.js supports import SVG assets and transform SVG into React components or URLs.
+- [Import Wasm Assets](/guides/basic-features/static-assets/wasm-assets.md): Modern.js supports import WebAssembly assets in code.
+- [Data Mocking](/guides/basic-features/debug/mock.md): Modern.js allows you to easily generate mock data so that the front-end can develop independently without depending on the back-end API.
+- [Local Proxy](/guides/basic-features/debug/proxy.md): Modern.js provides a way to configure the development proxy in dev.server.proxy. For example, to proxy the local interface to another address:
+- [Using Rsdoctor](/guides/basic-features/debug/rsdoctor.md): Rsdoctor is a Rspack build analysis tool. In Modern.js, we recommend using Rsdoctor to diagnose and analyze the build process and build outputs.
+- [Using Storybook](/guides/basic-features/debug/using-storybook.md): Storybook is a tool specifically designed for component debugging. It provides: A rich variety of debugging capabilitiesIntegration with some testing toolsReusable documentation contentSharing capabilitiesWorkflow automation
+- [Rstest](/guides/basic-features/testing/rstest.md): Rstest is a testing framework developed by the Rspack team and built on top of Rspack for fast test execution. This guide explains how to integrate Rstest with Modern.js for web app testing.
+- [Playwright](/guides/basic-features/testing/playwright.md): Playwright is a testing framework that allows you to run tests automatically in Chromium, Firefox, and WebKit environments using a single API. You can use it to write E2E tests. To use Playwright in Modern.js, you need to install the dependencies first. You can run the following commands: <PackageManagerTabs command={{ npm: "npm init playwright", yarn: "yarn create playwright", pnpm: "pnpm create playwright" }} /> The above commands will automatically install Playwright dependencies and help you install and configure it in your project through a series of prompts, including adding a playwright.config.ts file. After creating with the default configuration, you can see the following files in your project: This is the default test file. Now create some new pages and test them.
+- [Path Alias](/guides/basic-features/alias.md): Path aliases allow developers to define aliases for modules, making it easier to reference them in code. This can be useful when you want to use a short, easy-to-remember name for a module instead of a long, complex path. For example, if you frequently reference the src/common/request.ts module in your project, you can define an alias for it as @request and then use `` in your code instead of writing the full relative path every time. This also allows you to move the module to a different location without needing to update all the import statements in your code. In Modern.js, there are two ways to set up path aliases: Through the paths configuration in tsconfig.json.Through the source.alias configuration.
+- [Environment Variables](/guides/basic-features/env-vars.md): Modern.js provides support for environment variables, including built-in environment variables and custom environment variables.
+- [Output Files](/guides/basic-features/output-files.md): This chapter will introduces the directory structure of output files and how to control the output directory of different types of files.
+- [Deploy Application](/guides/basic-features/deploy.md): Currently, Modern.js offers two deployment way: You can host your application in a container that includes a Node.js environment on your own, which provides flexibility for the deployment of the application.You can also deploy your application through a platform. Currently, Modern.js officially supports deployment on Netlify, Vercel, and Github pages.
+- [BFF](/guides/advanced-features/bff.md): BFF (Backends for Frontends) is an architectural pattern primarily used to address issues of data aggregation in front-end and back-end collaboration. Under the BFF architecture, front-end applications do not communicate directly with backend services. Instead, they interact with backend services through a dedicated BFF middleware layer, custom-made for the front end. The main problems it tries to solve include: Aggregation, mapping, clipping, and proxying of lower-level APIs according to their own business needs.Cache data for some specific scenarios to improve performance and thus improve user experience.Quickly development of new products based on existing interfaces.Interface with third-party systems, such as login authentication. Modern.js officially supported the BFF and provided the Integrated BFF to further strengthen the BFF's capabilities, mainly including the following capabilities: Quick development and debugging go live, running, building, and deploying BFF code in the same project.Minimal pure function call, directly import BFF function on the front end, and can be automatically converted into HTTP request when called.No private protocol, follow RESTful API specification, all BFF interfaces are standardized.Full TypeScript support.Meet user preferences and support multi-frame extension writing.
+- [Basic Usage](/guides/advanced-features/bff/function.md): In a Modern.js application, developers can define API files under the api/lambda directory and export API functions from these files. In the frontend code, these API functions can be directly invoked by importing the file, which initiates the API requests. This invocation method is called unified invocation, where developers do not need to write glue code for the frontend and backend separately, thereby ensuring type safety across both.
+- [Runtime Framework](/guides/advanced-features/bff/frameworks.md): Modern.js uses Hono.js as the BFF and Server runtime framework, so you can extend BFF Server based on the Hono.js ecosystem. Getting Request Context Sometimes in BFF functions, it's necessary to obtain the request context to handle more logic. In such cases, you can use useHonoContext to get it: Getting Cookies When getting cookies in BFF functions, you need to get the request context through useHonoContext, then use c.req.header('cookie') to get the Cookie string and parse it manually: Defining BFF Functions When using Hono as the runtime framework, you can define interfaces through Api functions: Using Middleware Hono supports a rich middleware ecosystem, and you can use middleware in BFF functions: More Hono Documentation For more detailed information about Hono, please refer to the Hono official documentation.
+- [Creating Extensible BFF Functions](/guides/advanced-features/bff/operators.md): The previous section showed how to export a simple BFF function in a file. In more complex scenarios, each BFF function may need to do independent type validation, pre-logic, etc. Therefore, Modern.js exposes Api, which supports creating BFF functions through this API. BFF functions created in this way can be easily extended with functionality.
+- [Extend BFF Server](/guides/advanced-features/bff/extend-server.md): In some applications, developers may want to handle all BFF functions uniformly, such as authentication, logging, data processing, etc. Modern.js allows users to freely extend the BFF Server through Middleware method.
+- [Extend Request SDK](/guides/advanced-features/bff/sdk.md): The unified invocation of BFF functions is isomorphic in both CSR and SSR. The request SDK encapsulated by Modern.js relies on the Fetch API on the browser side, and on node-fetch on the server side. However, in actual business scenarios, additional processing may be required for requests or responses, such as: Writing authentication information in the request headersUniform handling of response data or errorsUsing other methods to send requests when the native fetch function is unavailable on specific platforms To address these scenarios, Modern.js provides the configure function, which offers a series of extension capabilities. You can use it to configure SSR passthrough request headers, add interceptors, or customize the request SDK.
+- [File Upload](/guides/advanced-features/bff/upload.md): BFF combined with runtime framework provides file upload capabilities, supporting integrated calls and pure function manual calls. BFF Function First, create the api/lambda/upload.ts file: Integrated Calling Next, directly import and call the function in src/routes/upload/page.tsx: Manual Calling You can manually upload files using the fetch API, when calling fetch, set the body as FormData type and submit a post request.
+- [Cross-Project Invocation](/guides/advanced-features/bff/cross-project.md): Based on the BFF architecture, Modern.js provides cross-project invocation capabilities, allowing BFF functions created in one project to be invoked by other projects through integrated calls, enabling function sharing and feature reuse across projects. Cross-project invocation consists of producer and consumer sides. The producer is responsible for creating and providing BFF services while generating integrated invocation SDK, and the consumer initiates requests through these SDK.
+- [Code Splitting](/guides/advanced-features/page-performance/code-split.md): Code splitting is a common way to optimize frontend resource loading. This article will introduce the three types of code splitting supported by Modern.js: dynamic importReact.lazyloadable
+- [Inline Static Assets](/guides/advanced-features/page-performance/inline-assets.md): Inline static assets refer to the practice of including the content of a static asset directly in a HTML or JS file, instead of linking to an external file. This can improve the performance of a website by reducing the number of HTTP requests that the browser has to make to load the page. However, static assets inlining also has some disadvantages, such as increasing the size of a single file, which may lead to slower loading. Therefore, in the actual scenario, it is necessary to decide whether to use static assets inlining according to the specific situation. Modern.js will automatically inline static assets that are less than 10KB, but sometimes you may need to manually control assets to force them to be inlined or not, and this document explains how to precisely control the inlining behavior of static assets.
+- [Bundle Size Optimization](/guides/advanced-features/page-performance/optimize-bundle.md): Bundle size optimization is an important part of optimizing your production environment because it directly affects the user experience. In this document, we will introduce some common bundle size optimization methods in Modern.js.
+- [React Compiler](/guides/advanced-features/page-performance/react-compiler.md): React Compiler is a build-time compiler from the React team that reduces unnecessary re-renders through automatic memoization, without manually writing useMemo, useCallback, or React.memo. Before starting to use React Compiler, it is recommended to read the React Compiler documentation to understand its features, current status, and usage.
+- [Improve Build Performance](/guides/advanced-features/build-performance.md): Modern.js optimizes build performance by default, but as the project becomes larger, you may encounter some build performance problems. This document provides some optional speed-up strategies, developers can choose some of them to improve the build performance.
+- [Browser Compatibility](/guides/advanced-features/compatibility.md)
+- [Low-Level Tools](/guides/advanced-features/low-level.md)
+- [Source Code Build Mode](/guides/advanced-features/source-build.md): The source code build mode is used in the monorepo development scenario, allowing developers to directly reference the source code of other sub-projects within the monorepo for development.
+- [Monitors](/guides/advanced-features/server-monitor/monitors.md): Modern.js is a full-stack framework that supports both client-side and server-side development. When server-side rendering (SSR), the framework automatically injects additional logs and metrics during server runtime to help production issue diagnosis. As server code operates in Node.js environments, developers cannot directly utilize browser consoles for troubleshooting. Given that different projects may adopt varied logging libraries or data reporting platforms, the framework provides a unified approach for developers to manage built-in logging and metric collection. The Monitors module in Modern.js empowers application monitoring through two core capabilities: Monitor registration and monitoring event distribution. When developers invoke Monitors APIs, the framework propagates corresponding monitoring events to all registered Monitors.
+- [Logs Events](/guides/advanced-features/server-monitor/logger.md): Log events are distributed by Modern.js as events of type log.
+- [Metrics Events](/guides/advanced-features/server-monitor/metrics.md): Metric events are distributed by Monitors as events of type timing or counter.
+- [Internationalization](/guides/advanced-features/international.md): @modern-js/plugin-i18n 是 Modern.js 的国际化插件，基于 i18next 和 react-i18next 构建。 插件本身：负责与 Modern.js 框架的集成，如 SSR 语言传递、路由前缀处理等i18next：核心翻译能力，如 t() 函数、插值、复数、命名空间。react-i18next：React 组件和 Hook，如 useTranslation，实现与 React 生命周期的结合。
+- [Quick Start](/guides/advanced-features/international/quick-start.md): This guide helps you quickly integrate internationalization into a Modern.js project.
+- [Configuration](/guides/advanced-features/international/configuration.md): Plugin configuration is split between two files, each with a different responsibility:
+- [Locale Detection](/guides/advanced-features/international/locale-detection.md): Locale detection means automatically inferring which language to use when the user has not manually selected one. The plugin can detect language from URL path, Cookie, request headers, browser settings, and other sources, and these methods can be combined.
+- [Resource Loading](/guides/advanced-features/international/resource-loading.md): How translation files are loaded depends on where your translation resources are stored:
+- [Routing Integration](/guides/advanced-features/international/routing.md)
+- [API Reference](/guides/advanced-features/international/api.md)
+- [Advanced Usage](/guides/advanced-features/international/advanced.md)
+- [Best Practices](/guides/advanced-features/international/best-practices.md)
+- [Custom Web Server](/guides/advanced-features/web-server.md): Modern.js encapsulates most server-side capabilities required by projects, typically eliminating the need for server-side development. However, in certain scenarios such as user authentication, request preprocessing, or adding page skeletons, custom server-side logic may still be necessary. To use the Custom Web Server in a Modern.js project, follow these steps: Install @modern-js/server-runtime dependency If the @modern-js/server-runtime dependency is not yet installed in your project, install it first: Create the server directory and configuration file Create a server/modern.server.ts file in the project root directory: After creating the file, you can write custom logic in this file. Include server directory in tsconfig.json
+- [Introduction](/guides/topic-detail/module-federation/introduce.md): Module Federation is an architectural pattern for dividing JavaScript applications, allowing you to share code and resources among multiple JavaScript applications. In this divided model, it can help improve application performance, enhance code maintainability, and more.
+- [Getting Started](/guides/topic-detail/module-federation/usage.md): To use Module Federation in Modern.js, we recommend using the official plugin @module-federation/modern-js-v3. This section will introduce how to set up both producer and consumer applications using the official plugin. First, create two applications by following the Modern.js Quick Start.
+- [Application-Level Modules](/guides/topic-detail/module-federation/application.md): Modern.js provides runtime APIs to quickly export application-level Module Federation modules from your application. We use the application created in Using Module Federation as an example to further explain how to import application-level modules.
+- [Server-Side Rendering](/guides/topic-detail/module-federation/ssr.md): @module-federation/modern-js-v3 offers powerful capabilities, enabling developers to easily combine Module Federation with server-side rendering (SSR) in Modern.js applications.
+- [Deployment](/guides/topic-detail/module-federation/deploy.md): In general, when deploying a Module Federation application, there are two key points to consider: Ensure that the remote module addresses in the consumer's configuration file are correct, and that the consumer can correctly access the producer's manifest file.Ensure that all resources in the producer's manifest file can be accessed correctly. We recommend using Modern.js's Node Server to deploy Module Federation applications for an out-of-the-box experience.
+- [Integrating Internationalization](/guides/topic-detail/module-federation/i18n.md): Modern.js provides the @modern-js/plugin-i18n plugin to support internationalization. When using Module Federation, you need to provide corresponding i18n integration solutions for different scenarios (components or applications).
+- [Dependencies FAQ](/guides/troubleshooting/dependencies.md): How to check the actual installed version of a dependency in the project? You can use the ls command provided by the package manager to view the version of the dependency in the project. Here are some basic examples. For detailed usage, please refer to the documentation of each package manager. npm / yarn For projects using npm or yarn, you can use the npm ls command. For example, running npm ls @modern-js/plugin will show the following result: pnpm For projects using pnpm, you can use the pnpm ls command. For example, running pnpm ls @modern-js/plugin --depth Infinity will show the following result: Getting "The engine "node" is incompatible" error during dependency installation? If you encounter the following error message during dependency installation, it means that the current environment is using a Node.js version that is too low, and you need to upgrade Node.js to a higher version. Modern.js requires Node.js version >= 20.19.5. We strongly recommend using the latest LTS version (such as Node.js 22 LTS) for the best experience. If the Node.js version of the current environment is lower than the above requirement, you can use tools such as nvm or fnm to switch versions. Here is an example of using nvm: For local development environments, it is recommended to use fnm, which has better performance than nvm and has similar usage. Getting a ReactNode type error after upgrading dependencies? After upgrading the dependencies of the project, if the following type error occurs, it means that the wrong version of @types/react is installed in the project. The reason for this problem is that the ReactNode type definition in React 18/19 is different from that in React 16/17. If there are multiple different versions of @types/react in the project, a ReactNode type conflict will occur, resulting in the above error. The solution is to lock the @types/react and @types/react-dom in the project to a unified version, such as v17. For methods of locking dependency versions, please refer to Lock nested dependency. Getting peer dependencies warnings in the console after running pnpm install? The reason for this warning is that the version range of peer dependencies declared by some third-party npm packages is inconsistent with the version range installed in Modern.js. In most cases, peer dependencies warnings will not affect the project operation and do not need to be processed separately. Please ignore the relevant warnings. What is the minimum supported version of React for the Modern.js framework? Modern.js framework requires React version >= 18.0.0. If you are using Modern.js runtime capabilities (including SSR, Streaming SSR, data loading, routing, etc.), you must use React 18 or higher. React 16 and React 17 are no longer supported.If you are only using Modern.js build capabilities (without runtime), React 16 or React 17 may theoretically work, but it is strongly recommended to upgrade to React 18 or higher for the best experience and full feature support. Type error in Modern.js configuration file? When you use the Modern.js framework, the above error occurs in the configuration file, it may be due to the inconsistent versions of Modern.js related packages. You need to manually update all @modern-js/** packages to the same version. In the monorepo, the above error may also occur due to inconsistent versions of the Modern.js framework used by different sub-projects. For information on how to unify and upgrade dependency versions, please refer to the Upgrading documentation.
+- [CLI FAQ](/guides/troubleshooting/cli.md): Unable to pass command line arguments correctly when using pnpm? When using pnpm to call the commands in package.json, you need to pay attention to how parameters are passed: If you need to pass parameters to pnpm, you need to put the parameters before the command. For example, using the pnpm --filter parameter to run the prepare command: If you need to pass parameters to the command, you need to put the parameters after the command. For example, in the following package.json configuration: The way to pass parameters when running the command is:
+- [Build FAQ](/guides/troubleshooting/builder.md): If you encounter any build-related issues, you can refer to the current document for troubleshooting. Rsbuild FAQ Modern.js is internally based on Rsbuild and encapsulates its own build tool, so you can directly refer to the FAQ document of Rsbuild: Rsbuild - Features FAQRsbuild - Exceptions FAQRsbuild - HMR FAQ How to view the final generated Rspack configuration? Modern.js provides inspect command to view the final Modern.js configuration and Rspack configuration generated by the project. Failed import other modules in Monorepo? Due to considerations of compilation performance, by default, the Modern.js does not compile files under node_modules or files outside the current project directory. Therefore, when you reference the source code of other sub-projects, you may encounter an error similar to You may need an additional loader to handle the result of these loaders. There are several solutions to this problem: You can enable the source code build mode to compile other sub-projects within the monorepo. Please refer to Source Code Build Mode for more information.You can add the source.include configuration option to specify the directories or modules that need to be additionally compiled. Please refer to Usage of source.include for more information.You can pre-build the sub-projects that need to be referenced, generate the corresponding build artifacts, and then reference the build artifacts in the current project instead of referencing the source code. Find exports is not defined runtime error? If the compilation is succeed, but the exports is not defined error appears after opening the page, it is usually because a CommonJS module is compiled by Babel. Under normal circumstances, Modern.js will not use Babel to compile CommonJS modules. If the source.include configuration option is used in the project, some CommonJS modules may be added to the Babel compilation. There are two workarounds for this problem: Avoid adding CommonJS modules to Babel compilation.Set Babel's sourceType configuration to unambiguous. Compile error "Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax"? If the following error occurs during compilation, it is usually because a CommonJS module is compiled with Babel in the project, and the solution is same as the above exports is not defined problem. For more information, please refer to issue: babel#12731. The compilation progress bar is stuck, but there is no Error log in the terminal? When the compilation progress bar is stuck, but there is no Error log on the terminal, it is usually because an exception occurred during the compilation. In some cases, when Error is caught by the build tool or other modules, the error log can not be output correctly. The most common scenario is that there is an exception in the Babel config, which is caught by the build tool, and the build tool swallows the Error in some cases. Solution: If this problem occurs after you modify the Babel config, it is recommended to check for the following incorrect usages: You have configured a plugin or preset that does not exist, maybe the name is misspelled, or it is not installed correctly.Whether multiple babel-plugin-imports are configured, but the name of each babel-plugin-import is not declared in the third item of the array. Compilation error after referencing a type from lodash If the @types/lodash package is installed in your project, you may import some types from lodash, such as the DebouncedFunc type: Modern.js will throw an error after compiling the above code: The reason is that Modern.js has enabled the babel-plugin-lodash plugin by default to optimize the bundle size of lodash, but Babel cannot distinguish between "value" and "type", which resulting in an exception in the compiled code. The solution is to use TypeScript's import type syntax to explicitly declare the DebouncedFunc type:
+- [HMR FAQ](/guides/troubleshooting/hmr.md): How to troubleshooting HMR ineffective issues? There are several possible reasons why HMR may not be work. This document will cover most common causes and provide guidance for troubleshooting. Please refer to the following content for troubleshooting. Before starting the troubleshooting process, it is helpful to have a basic understanding of how HMR works: After understanding the principle of HMR, you can follow these steps for basic troubleshooting: 1. Check the WebSocket Connection Open the browser console and check for the presence of the [HMR] connected. log. If it is present, the WebSocket connection is working correctly. You can continue with the following steps.If it is not present, open the Network panel in Chrome and check the status of the ws://[host]:[port]/webpack-hmr request. If the request is failed, this indicates that the HMR failed because the WebSocket connection was not successfully established. There can be various reasons why the WebSocket connection fails to establish, such as using a network proxy that prevents the WebSocket request from reaching the development server. You can check whether the WebSocket request address matches your development server address. If it does not match, you can configure the WebSocket request address using tools.devServer.client. 2. Check the hot-update Requests When you modify the code of a module and trigger a recompilation, the browser sends several hot-update.json and hot-update.js requests to the development server to fetch the updated code. You can try modifying a module and inspect the content of the hot-update.xxx requests. If the content of the request is the latest code, it indicates that the hot update request is working correctly. If the content of the request is incorrect, it is likely due to a network proxy. Check whether the address of the hot-update.xxx request matches your development server address. If it does not match, you need to adjust the proxy rules to route the hot-update.xxx request to the development server address. 3. Check for Other Causes If the above two steps do not reveal any issues, it is possible that other factors are causing the HMR to fail. For example, it could be that the code does not meet React's requirements for HMR. You can refer to the following questions for further troubleshooting. HMR not working when external React? To ensure that HMR works properly, we need to use the development builds of React and ReactDOM. If you exclude React via externals when bundling, the production build of React is usually injected through CDN, and this can cause HMR to fail. To solve this problem, you need to reference the development builds of React or not configure externals in the development environment. If you are unsure about the type of React build you are using, you can refer to the React documentation - Use the Production Build. HMR not working when setting filename hash in development mode? Usually, we only set the filename hash in the production mode (i.e., when process.env.NODE_ENV === 'production'). If you set the filename hash in the development mode, it may cause HMR to fail (especially for CSS files). This is because every time the file content changes, the hash value changes, preventing tools like mini-css-extract-plugin from reading the latest file content. Correct usage: Incorrect usage: HMR not working when updating React components? Modern.js uses React's official Fast Refresh capability to perform component hot updates. If there is a problem that the hot update of the React component cannot take effect, or the state of the React component is lost after the hot update, it is usually because your React component uses an anonymous function. In the official practice of React Fast Refresh, it is required that the component cannot be an anonymous function, otherwise the state of the React component cannot be preserved after hot update. Here are some examples of wrong usage: The correct usage is to declare a name for each component function: HMR not working when use https? If https is enabled, the HMR connection may fail due to a certificate issue, and if you open the console, you will get an HMR connect failed error. The solution to this problem is to click on "Advanced" -> "Proceed to xxx (unsafe)" on the Chrome problem page. Tips: When accessing the page through Localhost, the words "Your connection is not private" may not appear and can be handled by visiting the Network domain.
+- [Overview](/guides/upgrade/overview.md): This guide will help you upgrade from Modern.js 2.0 to Modern.js 3.0.
+- [Configuration Changes](/guides/upgrade/config.md): This document mainly introduces incompatible configuration changes and recommended migration methods when upgrading from Modern.js 2.0 to 3.0.
+- [Entry Changes](/guides/upgrade/entry.md): This chapter introduces changes related to page entries when upgrading from Modern.js 2.0 to 3.0.
+- [Custom Web Server Changes](/guides/upgrade/web-server.md): This chapter covers upgrades for two types of legacy custom Server APIs: unstableMiddlewareHook These two approaches are mutually exclusive in the legacy version. When migrating, please choose the corresponding path based on the capabilities actually used in the project.
+- [Tailwind Plugin Changes](/guides/upgrade/tailwindcss.md): Modern.js 3.0 recommends integrating Tailwind CSS through Rsbuild's native approach, no longer relying on the @modern-js/plugin-tailwindcss plugin, to fully utilize Rsbuild's more flexible configuration capabilities and better build experience.
+- [Other Important Changes](/guides/upgrade/other.md): This document introduces other important incompatible changes and related migration instructions when upgrading from Modern.js 2.0 to 3.0.
+
+## Config
+
+- [Configuration](/configure/app/usage.md): There are three types of configurations in Modern.js: Compile configuration, Runtime configuration, and Server Runtime configuration. Compile configuration can be configured in two locations: The modern.config.(ts|js|mjs) file at the root pathThe package.json file Runtime configuration can be configured in the src/modern.runtime.(ts|js|mjs) file. Server Runtime configuration can be configured in the server/modern.server.(ts|js|mjs) file.
+- [assetPrefix](/configure/app/dev/asset-prefix.md): Type: boolean | string | 'auto'Default: '/' This configuration item is used to set the URL prefix of static resources in development mode.
+- [beforeStartUrl](/configure/app/dev/before-start-url.md): Type: () => Promise<void> | voidDefault: undefined dev.beforeStartUrl is used to execute a callback function before opening the startUrl, this config needs to be used together with dev.startUrl.
+- [client](/configure/app/dev/client.md): Type: Default: Configure the client code injected by Modern.js during the development process. This can be used to set the WebSocket URL for HMR.
+- [hmr](/configure/app/dev/hmr.md): Type: booleanDefault: true Whether to enable Hot Module Replacement.
+- [host](/configure/app/dev/host.md): Type: stringDefault: 0.0.0.0 Specify the host that the dev server listens to. By default, the dev server will listen to 0.0.0.0, which means listening to all network interfaces, including localhost and public network addresses. If you want the dev server to listen only on localhost, you can set it to:
+- [https](/configure/app/dev/https.md): Type: boolean | { key: string; cert: string }Default: false After configuring this option, you can enable HTTPS Dev Server, and disabling the HTTP Dev Server. HTTP: HTTPS: Automatically generate certificates You can directly set https to true, Modern.js will automatically generate the HTTPS certificate based on devcert. When using this method, you need to manually install the devcert dependency in your project: Then configure dev.https to true: The devcert has some limitations, it does not currently support IP addresses yet. Manually set the certificate You can also manually pass in the certificate and the private key required in the dev.https option. This parameter will be directly passed to the createServer method of the https module in Node.js. For details, please refer to https.createServer. Clean up cert cache The certificate created by devcert is saved in ~/Library/Application\ Support/devcert. You may do some cleanup if needed.
+- [lazyCompilation](/configure/app/dev/lazy-compilation.md): Type: Default: false Enable lazy compilation (compilation on demand), implemented based on Rspack's lazy compilation feature.
+- [liveReload](/configure/app/dev/live-reload.md): Type: booleanDefault: true Whether to reload the page when source files are changed.
+- [mockDir](/configure/app/dev/mock-dir.md): Type: stringDefault: './config/mock' Sets the directory containing the Mock API entry file. Relative paths are resolved from the application directory, and absolute paths are also supported. Modern.js loads index.ts or index.js from this directory during development. For example, move the Mock API entry to mocks/index.ts: This is also useful in a monorepo when multiple applications share one Mock directory:
+- [progressBar](/configure/app/dev/progress-bar.md): Type: Default: true Whether to display progress bar during compilation.
+- [server](/configure/app/dev/server.md): Type: ObjectDefault: {} The config of DevServer can be modified through dev.server. compress Type: booleanDefault: true Whether to enable gzip compression for served static assets. If you want to disable the gzip compression, you can set compress to false: For more details, please refer to the Rsbuild - server.compress documentation. headers Type: Record<string, string>Default: undefined Adds headers to all responses. For more details, please refer to the Rsbuild - server.headers documentation. historyApiFallback Type: boolean | ConnectHistoryApiFallbackOptionsDefault: false The index.html page will likely have to be served in place of any 404 responses. Enable dev.server.historyApiFallback by setting it to true: For more configuration options, please refer to the Rsbuild - server.historyApiFallback documentation. watch Type: booleanDefault: true Whether to watch files change in directories such as mock/, server/, api/. For more details, please refer to the Rsbuild - dev.watchFiles documentation. cors Type: boolean | import('cors').CorsOptions Configure CORS (Cross-Origin Resource Sharing) for the development server. The default configuration for cors in Modern.js follows Rsbuild's defaults: For more configuration options and detailed usage, please refer to the Rsbuild - server.cors documentation. proxy Type: ProxyOptions[] | Record<string, string | ProxyOptions>Default: undefined Configure proxy rules for the dev server, and forward requests to the specified service.
+- [setupMiddlewares](/configure/app/dev/setup-middlewares.md): Type: Default: undefined Provides the ability to execute a custom function and apply custom middlewares.
+- [startUrl](/configure/app/dev/start-url.md): Type: boolean | string | string[] | undefinedDefault: undefined dev.startUrl is used to set the URL of the page that automatically opens in the browser when Dev Server starts. By default, no page will be opened. You can set it to the following values: Port placeholder Since the port number may change, you can use the <port> placeholder to refer to the current port number, and Modern.js will automatically replace the placeholder with the actual listening port number. Open the specified browser On MacOS, you can open the specified browser when Dev Server starts, by set environment variable BROWSER, support values: Google Chrome CanaryGoogle Chrome DevGoogle Chrome BetaGoogle ChromeMicrosoft EdgeBrave BrowserVivaldiChromium
+- [watchFiles](/configure/app/dev/watch-files.md): Type: Default: undefined Watch specified files and directories for changes. When a file change is detected, it can trigger a page reload or restart the dev server.
+- [writeToDisk](/configure/app/dev/write-to-disk.md): Type: boolean | ((filename: string) => boolean)Default: (file) => !file.includes('.hot-update.') Controls whether the build output from development mode is written to disk.
+- [crossProject](/configure/app/bff/cross-project.md): Type: booleanDefault: false This configuration is used to enable BFF cross-project invocation functionality. When enabled, the current project can be used as a BFF producer, generating an SDK that can be directly called by other projects. For detailed configuration and usage of BFF cross-project invocation, please refer to the BFF Cross-Project Invocation Guide.
+- [prefix](/configure/app/bff/prefix.md): Type: stringDefault: /api By default, the prefix for accessing routes in the BFF API directory is /api, as shown in the following directory structure: The route corresponding to api/hello.ts when accessed is localhost:8080/api/hello. This configuration option can modify the default route prefix: The corresponding route for api/hello.ts when accessed is localhost:8080/api-demo/hello.
+- [appIcon](/configure/app/html/app-icon.md): Type: Default: undefined Set the web application icons to display when added to the home screen of a mobile device: Generate the web app manifest file and its icons field.Generate the apple-touch-icon and manifest tags in the HTML file.
+- [crossorigin](/configure/app/html/crossorigin.md): Type: boolean | 'anonymous' | 'use-credentials'Default: false Set the crossorigin attribute of the <script> and <style> tags.
+- [favicon](/configure/app/html/favicon.md): Type: string ｜ FunctionDefault: undefined Set the favicon icon path for all pages, can be set as: a URL.an absolute path to the file.a relative path relative to the project root directory. After config this option, the favicon will be automatically copied to the dist directory during the compilation, and the corresponding link tag will be added to the HTML.
+- [inject](/configure/app/html/inject.md): Type: 'head' | 'body' | boolean | FunctionDefault: 'head' Set the inject position of the <script> tag.
+- [meta](/configure/app/html/meta.md): Type: Object | FunctionDefault: Configure the <meta> tag of the HTML.
+- [mountId](/configure/app/html/mount-id.md): Type: stringDefault: 'root' By default, the root element is included in the HTML template for component mounting, and the element id can be modified through mountId.
+- [outputStructure](/configure/app/html/output-structure.md): Type: 'flat' | 'nested'Default: 'nested' Define the directory structure of the HTML output files.
+- [scriptLoading](/configure/app/html/script-loading.md): Type: 'defer' | 'blocking' | 'module'Default: 'defer' Used to set how <script> tags are loaded.
+- [tags](/configure/app/html/tags.md): Type: Default: undefined Modifies the tags that are injected into the HTML page.
+- [templateParameters](/configure/app/html/template-parameters.md): Type: Record<string, unknown> | FunctionDefault: Define the parameters in the HTML template, corresponding to the templateParameters config of html-rspack-plugin. You can use the config as an object or a function.
+- [template](/configure/app/html/template.md): Type: string | FunctionDefault: Specifies the file path for the HTML template, which can be a relative or absolute path.
+- [title](/configure/app/html/title.md): Type: string ｜ FunctionDefault: '' Set the title tag of the HTML page, for example:
+- [autoprefixer](/configure/app/tools/autoprefixer.md): Type: Object | FunctionDefault: You can modify the config of autoprefixer by tools.autoprefixer. Object Type When tools.autoprefixer is configured as Object type, it is merged with the default config through Object.assign. For example: Function Type When tools.autoprefixer is a Function, the default config is passed as the first parameter and can be directly modified or returned as the final result. For example:
+- [bundlerChain](/configure/app/tools/bundler-chain.md): Type: Default: undefined You can modify the Rspack configuration by configuring tools.bundlerChain which is type of Function. The function receives two parameters, the first is the original bundler chain object, and the second is an object containing some utils. tools.bundlerChain is executed earlier than tools.rspack and thus will be overridden by changes in tools.rspack. For more information, please refer to Rsbuild#tools.bundlerChain.
+- [cssExtract](/configure/app/tools/css-extract.md): Type: Default: The config of CssExtractRspackPlugin can be modified through tools.cssExtract.
+- [cssLoader](/configure/app/tools/css-loader.md): Type: Object | FunctionDefault: The config of css-loader can be modified through tools.cssLoader.
+- [devServer](/configure/app/tools/dev-server.md): Type: ObjectDefault: {} The config of DevServer can be modified through tools.devServer. Options compress Type: booleanDefault: true Whether to enable gzip compression for served static assets. If you want to disable the gzip compression, you can set compress to false: headers Type: Record<string, string>Default: undefined Adds headers to all responses. historyApiFallback Type: boolean | ConnectHistoryApiFallbackOptionsDefault: false The index.html page will likely have to be served in place of any 404 responses. Enable devServer.historyApiFallback by setting it to true: For more options and information, see the connect-history-api-fallback documentation. proxy Type: ProxyOptions[] | Record<string, string | ProxyOptions>Default: undefined Configure proxy rules for the dev server, and forward requests to the specified service. watch Type: booleanDefault: true Whether to watch files change in directories such as mock/, server/, api/.
+- [htmlPlugin](/configure/app/tools/html-plugin.md): Type: boolean | Object | FunctionDefault: The configs of html-rspack-plugin can be modified through tools.htmlPlugin.
+- [less](/configure/app/tools/less.md): Type: Object | FunctionDefault: You can modify the config of less-loader via tools.less. Object Type When tools.less is configured as Object type, it is merged with the default config through Object.assign in a shallow way. It should be noted that lessOptions is merged through deepMerge in a deep way. For example: Function Type When tools.less is a Function, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For example: Modifying Less Version In some scenarios, if you need to use a specific version of Less instead of the built-in Less v4 in Modern.js, you can install the desired Less version in your project and set it up using the implementation option of the less-loader. Util Function addExcludes Type: (excludes: RegExp | RegExp[]) => void Used to specify which files less-loader does not compile, You can pass in one or more regular expressions to match the path of less files, for example:
+- [lightningcssLoader](/configure/app/tools/lightningcss-loader.md): Type: Rspack.LightningcssLoaderOptions | Function | booleanDefault: Rspack.LightningcssLoaderOptions | Function | boolean You can configure builtin:lightningcss-loader through tools.lightningcssLoader.
+- [minifyCss](/configure/app/tools/minify-css.md): Type: Object | Function | undefinedDefault: When building for production, Modern.js will minimize the CSS code through css-minimizer-webpack-plugin. The config of css-minimizer-webpack-plugin can be modified via tools.minifyCss. Object Type When tools.minifyCss is Object type, it will be merged with the default config via Object.assign. For example, modify the preset config of cssnano: Function Type When tools.minifyCss is Function type, the default config is passed in as the first parameter, the config object can be modified directly, or a value can be returned as the final result.
+- [postcss](/configure/app/tools/postcss.md): Type: Object | FunctionDefault: Modern.js integrates PostCSS by default, you can configure postcss-loader through tools.postcss. It should be noted that when you enable the tools.lightningcss configuration, PostCSS will be disabled by default, including postcss-loader and its default plugins.
+- [rspack](/configure/app/tools/rspack.md): Type: Rspack.Configuration | Function | undefinedDefault: undefined tools.rspack is used to configure Rspack.
+- [sass](/configure/app/tools/sass.md): Type: Object | FunctionDefault: You can modify the config of sass-loader via tools.sass. Object Type When tools.sass is Object type, it is merged with the default config through Object.assign. It should be noted that sassOptions is merged through deepMerge in a deep way. For example: Function Type When tools.sass is a Function, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For Example: Modifying Sass Version In some scenarios, if you need to use a specific version of Sass instead of the built-in Dart Sass v1 in Modern.js, you can install the desired Sass version in your project and set it up using the implementation option of the sass-loader. Utility Function addExcludes Type: (excludes: RegExp | RegExp[]) => void Used to specify which files sass-loader does not compile, You can pass in one or more regular expressions to match the path of sass files, for example:
+- [styleLoader](/configure/app/tools/style-loader.md): Type: Object | FunctionDefault: {} The config of style-loader can be set through tools.styleLoader.
+- [swc](/configure/app/tools/swc.md): Type: Object | FunctionDefault: undefined
+- [tsChecker](/configure/app/tools/ts-checker.md): Type: Object | FunctionDefault: By default, the @rsbuild/plugin-type-check is enabled for type checking. You can use output.disableTsChecker config to disable it.
+- [aliasStrategy](/configure/app/source/alias-strategy.md): Type: 'prefer-tsconfig' | 'prefer-alias'Default: 'prefer-tsconfig' source.aliasStrategy is used to control the priority between the paths option in tsconfig.json and the alias option in the bundler.
+- [alias](/configure/app/source/alias.md): Type: Default: undefined Create aliases to import or require certain modules, same as the resolve.alias config of Rspack.
+- [configDir](/configure/app/source/config-dir.md): Type: stringDefault: './config' Modern.js supports placing some files in the ./config folder to customize HTML templates, icons, static assets, etc. For details, please refer to File Convention. This option allows you to customize the directory of the configuration files. For example, adjust the assets directory to the resources directory:
+- [decorators](/configure/app/source/decorators.md): Type: Default: Used to configure the decorators syntax. We found that most projects still use the legacy version of the decorator syntax, so the default value is legacy.
+- [define](/configure/app/source/define.md): Type: Record<string, unknown>Default: Replaces variables in your code with other values or expressions at compile time. This can be useful for allowing different behavior between development builds and production builds.
+- [disableDefaultEntries](/configure/app/source/disable-default-entries.md): Type: booleanDefault: false Used to disable the functionality of automatically identifying page entry points based on directory structure. To disable this default behavior, set the following: After disabling the default behavior, you will need to use the source.entries configuration to define custom entry points.
+- [enableAsyncEntry](/configure/app/source/enable-async-entry.md): Type: booleanDefault: false This option is used for Rspack Module Federation scenario. When this option is enabled, Modern.js will wrap the automatically generated entry files with dynamic import (Asynchronous Boundaries), allowing page code to consume remote modules generated by Module Federation.
+- [enableAsyncPreEntry](/configure/app/source/enable-async-pre-entry.md): Type: booleanDefault: false When enabled, Modern.js will inject the modules configured in source.preEntry to the top of the auto-generated entry file (index.jsx) in order. This option only takes effect when source.enableAsyncEntry is enabled. If async entry is not enabled, this behavior will be skipped and the original builder-side source.preEntry injection remains unchanged. This option is mainly designed to work with source.enableAsyncEntry: when async entry is enabled, the final build entry becomes bootstrap.jsx, and the builder-side source.preEntry may not be injected into the real entry code. With source.enableAsyncPreEntry enabled, preEntry will be injected into index.jsx (the real entry code), so it also works in async entry scenarios. Meanwhile, when both source.enableAsyncEntry and source.enableAsyncPreEntry are enabled, Modern.js will not pass source.preEntry into builder config to avoid duplicate injection or injection into an unexpected entry.
+- [entriesDir](/configure/app/source/entries-dir.md): Type: stringDefault: './src' By default, Modern.js scans the src directory to identify page entries. You can customize the directory used for identifying page entries with this option. For example, with the following configuration and directory structure: Modern.js will generate the build entries a and b based on the ./src/pages directory structure. The result is as follows:
+- [entries](/configure/app/source/entries.md): Type: Default: The entry object calculated based on the directory structure of the current project. Used to configure custom page entries.
+- [exclude](/configure/app/source/exclude.md): Type: RuleSetCondition[]Default: [] Specifies JavaScript/TypeScript files that do not need to be compiled. The usage is consistent with Rule.exclude in Rspack, which supports passing in strings or regular expressions to match the module path.
+- [globalVars](/configure/app/source/global-vars.md): Type: Record<string, JSONValue> | FunctionDefault: Used to define global variables. It can replace expressions like process.env.FOO in your code after compile. Such as: Example In the following example, the ENABLE_VCONSOLE and APP_CONTEXT are injected into the code: You can use them directly in your code: Function Usage Type: You can set source.globalVars to a function to dynamically setting some environment variables. For example, dynamically set according to the build target: Difference with define You can take source.globalVars as the syntax sugar of source.define, the only difference is that source.globalVars will automatically stringify the value, which makes it easier to set the value of global variables. The values of globalVars should be JSON-safe to ensure it can be serialized. Precautions source.globalVars injects environment variables through string replacement, so it cannot take effect on dynamic syntaxes such as destructuring. When using destructuring assignment, Modern.js will not be able to determine whether the variable NODE_ENV is associated with the expression process.env.NODE_ENV to be replaced, so the following usage is invalid:
+- [include](/configure/app/source/include.md): Type: RuleSetCondition[]Default value: source.include is used to specify additional JavaScript files that need to be compiled. By default, the following files will be compiled: TypeScript and JSX files in any directory, with file extensions matching .ts, .tsx, .jsx, .mts, .cts.JavaScript files not in the node_modules directory, with file extensions matching .js, .mjs, .cjs.
+- [mainEntryName](/configure/app/source/main-entry-name.md): Type: stringDefault: 'index' This option is used to configure the main entry name of Modern.js. By default, the default main entry name of Modern.js is index. When using a single entry or the entry name is the same as the name field in package.json, the corresponding entry will be used as the main entry. This configuration can be used to modify the name of the main entry. For example, change the main entry name to main: After building, the corresponding HTML output path will be changed to dist/html/index/index.html.
+- [preEntry](/configure/app/source/pre-entry.md): Type: string | string[]Default: [] Add a script before the entry file of each page. This script will be executed before the page code. It can be used to execute global logics, such as injecting polyfills, setting global styles, etc.
+- [reactCompiler](/configure/app/source/react-compiler.md): Type: boolean | ReactCompilerOptionsDefault: undefined (disabled) Whether to enable React Compiler. React Compiler is a build-time tool that optimizes re-rendering performance of React applications through automatic memoization. Modern.js implements this capability based on the Rust-based React Compiler built into Rspack's builtin:swc-loader (equivalent to setting SWC's jsc.transform.reactCompiler), reusing Rspack's built-in SWC transform chain without introducing Babel.
+- [transformImport](/configure/app/source/transform-import.md): Transform the import path, which can be used to modularly import the subpath of third-party packages. The functionality is similar to babel-plugin-import。 Type: Default: undefined
+- [aliasStrategy](/configure/app/resolve/alias-strategy.md): Type: 'prefer-tsconfig' | 'prefer-alias'Default: 'prefer-tsconfig' Set the strategy for path alias resolution, to control the priority relationship between the paths option in tsconfig.json and the resolve.alias option of Rsbuild.
+- [alias](/configure/app/resolve/alias.md): Type: string[] Create aliases for module paths to simplify import paths or redirect module references.
+- [conditionNames](/configure/app/resolve/condition-names.md): Type: string[]Default: Same as Rspack's resolve.conditionNames Specifies the condition names used to match entry points in the exports of a package.
+- [dedupe](/configure/app/resolve/dedupe.md): Type: string[] Force Rsbuild to resolve the specified packages from project root, which is useful for deduplicating packages and reducing the bundle size. same as the resolve.dedupe config of Rsbuild.
+- [extensions](/configure/app/resolve/extensions.md): Type: string[]Default: ['.ts', '.tsx', '.mjs', '.js', '.jsx', '.json'] Automatically resolve file extensions when importing modules. This means you can import files without explicitly writing their extensions.
+- [baseUrl](/configure/app/server/base-url.md): Type: string | string[]Default: undefined Uniformly set the prefix of server-side routes (commonly used in situations where multiple applications share the same domain name to distinguish traffic). After running dev, you will see that the route access will have the corresponding prefix added:
+- [port](/configure/app/server/port.md): Type: numberDefault: 8080 When running the dev and serve commands, Modern.js will start with 8080 as the default port and automatically increase the port number when the port is occupied. You can use this configuration to modify the port number that the Server starts with:
+- [publicRoutes](/configure/app/server/public-routes.md): Type: ObjectDefault: Server-side routing rules generated based on file conventions, with one route rule generated for each file. This configuration option only applies to server-side routing and can customize the access route of resources under config/public/. The key of the object is the relative file path of the config/public/ (without using ./), and the value can be a string.
+- [routes](/configure/app/server/routes.md): Type: ObjectDefault: Server-side routing rules generated based on file conventions, with one route rule generated for each entry, and the entry name is equal to the route path. This configuration option only applies to server-side routing and can customize the access route of application entries.
+- [rsc](/configure/app/server/rsc.md): Type: booleanDefault: false Enable React Server Components (RSC) configuration. When set to true, enables React Server Components support in Modern.js. This allows components to be rendered on the server, providing better performance and developer experience. For more information about using RSC, see the React Server Components guide.
+- [ssrByEntries](/configure/app/server/ssr-by-entries.md): Type: ObjectDefault: undefined Set SSR options by entry, and the properties inside the option are the same as ssr. The specified value will be replaced and merged with the content of the SSR attribute, for example: In the above configuration, the project enables SSR as a whole, but the SSR rendering ability is disabled for the page-a entry.
+- [ssr](/configure/app/server/ssr.md): Type: booleanDefault: false Enalbe SSR configuration. Boolean Type When the value type is boolean, it indicates whether to enable SSR deployment mode. The default is false to disable it. Object Type When the value type is Object, the following properties can be configured: Active Fallback In a production environment, there are scenarios where it is necessary to actively fallback an SSR project to CSR. Examples include When the SSR fails, a fallback to the CSR is required to ensure product availability.When the SSR is working normally, but there are rendering failures during csr, debugging is required.When the SSR server is under heavy load, it may be necessary to fallback some traffic directly to the CSR to avoid service downtime. By configuring server.ssr.forceCSR to true in the project, you can control this behavior through query strings or request headers. For example, in a custom Web Server middleware, you can actively fallback when traffic exceeds a certain threshold:
+- [tsconfigPath](/configure/app/server/tsconfig-path.md): Type: stringDefault: <appDirectory>/tsconfig.json Specifies the tsconfig file used by server-side TypeScript processes. This option affects: BFF / API compilation (@modern-js/plugin-bff)Custom server compilation (*.ts files under server/)Runtime ts-node registration, such as SSR, modern.config.ts, and .ts files under config/ When this option is not set, <appDirectory>/tsconfig.json is used by default.
+- [assetPrefix](/configure/app/output/asset-prefix.md): Type: string | 'auto'Default: '/' In production mode, use this option to set the URL prefix for static assets, such as setting it to a CDN URL.
+- [assetsRetry](/configure/app/output/assets-retry.md): Type: Object output.assetsRetry is used to configure the retry of assets.The type of AssetsRetryOptions is as follows: Default: undefinedSince this feature injects some runtime code into your HTML and Rspack Runtime, it is disabled by default. To enable it, provide an object for the option, for example: When you enable this feature, the default configuration for assetsRetry is: Example You can also customize your retry logic using the assetsRetry options. For example, setting assetsRetry.domain to specify the retry domain when assets fail to load. As an example, you can specify a list of fallback domains via assetsRetry.domain. The first domain in the list should match the domain used in your assetsPrefix configuration: With the configuration above, if an asset fails to load from cdn1.com, requests will automatically fall back to cdn2.com. If cdn2.com also fails, the request will continue to cdn3.com. assetsRetry is implemented based on the Assets Retry plugin of Rsbuild and provides the same configuration options. You can refer to Rsbuild - Assets Retry Plugin to understand all available configuration options.
+- [charset](/configure/app/output/charset.md): Type: 'ascii' | 'utf8'Default: 'ascii' The charset config allows you to specify the character encoding for output files to ensure they are displayed correctly in different environments.
+- [cleanDistPath](/configure/app/output/clean-dist-path.md): Type: booleanDefault: true Whether to clean all files in the dist path before starting compilation. By default, Modern.js will automatically clean up the files in the dist directory, you can disable this behavior by setting cleanDistPath to false.
+- [convertToRem](/configure/app/output/convert-to-rem.md): Type: boolean | objectDefault: false By setting output.convertToRem, Modern.js can do the following things: Convert px to rem in CSS.Insert runtime code into the HTML template to set the fontSize of the root element. Boolean Type If output.convertToRem is set to true, Rem processing capability will be turned on. At this point, the rem configuration defaults as follows: Object Type When the value of output.convertToRem is object type, Modern.js will perform Rem processing based on the current configuration. options: Example For detailed usage, please refer to rsbuild-plugin-rem.
+- [copy](/configure/app/output/copy.md): Type:Rspack.CopyRspackPluginOptions | Rspack.CopyRspackPluginOptions['patterns']Default: undefined Copies the specified file or directory to the dist directory, implemented based on rspack.CopyRspackPlugin.
+- [cssModules](/configure/app/output/css-modules.md): Type: Default: For custom CSS Modules configuration.
+- [dataUriLimit](/configure/app/output/data-uri-limit.md): Type： Default： Set the size threshold to inline static assets such as images and fonts.
+- [disableCssModuleExtension](/configure/app/output/disable-css-module-extension.md): Type: booleanDefault: false Whether to treat all .css files in the source directory as CSS Modules. By default, only the *.module.css files are treated as CSS Modules. After enabling this config, all *.css style files in the source directory will be regarded as CSS Modules. .sass, .scss and .less files are also affected by disableCssModuleExtension. Example Detailed The following is a detailed explanation of the CSS Modules rules: disableCssModuleExtension is false (default) The following files are treated as CSS Modules: all *.module.css files The following files are treated as normal CSS: all *.css files (excluding .module)all *.global.css files disableCssModuleExtension is true The following files are treated as CSS Modules: *.css and *.module.css files in the source directory*.module.css files under node_modules The following files are treated as normal CSS: all *.global.css files*.css files under node_modules (without .module)
+- [disableInlineRuntimeChunk](/configure/app/output/disable-inline-runtime-chunk.md): Type: booleanDefault: false Used to control whether to inline the bundler's runtime code into HTML. In the production environment, Modern.js will inline the runtimeChunk file into the HTML file by default instead of writing it to the dist directory. This is done to reduce the number of file requests. Disable Inlining If you don't want the runtimeChunk file to be inlined into the HTML file, you can set disableInlineRuntimeChunk to true and a separate builder-runtime.js file will be generated. Merge Into Page Chunk If you don't want to generate a separate runtimeChunk file, but want the runtimeChunk code to be bundled into the page chunk, you can set the config like this:
+- [disableSvgr](/configure/app/output/disable-svgr.md): Type: booleanDefault: false Whether to transform SVGs into React components. If true, will treat all .svg files as assets. By default, when an SVG resource is referenced in a JS file, Modern.js will call SVGR to convert the SVG into a React component. If you are sure that all SVG resources in your project are not being used as React components, you can turn off this conversion by setting disableSvgr to true to improve build performance.
+- [disableTsChecker](/configure/app/output/disable-ts-checker.md): Type: booleanDefault: false Whether to disable TypeScript type checker during compilation. By default, Modern.js will run the TypeScript type checker in a separate process during the build process. Its checking logic is consistent with TypeScript's native tsc command. You can use tsconfig.json or tools.tsChecker config to customize the checking behavior. Blocking Compilation In development build, type errors will not block the compilation process.In production build, type errors will cause the build to fail to ensure the stability of the production code. Example Disable TypeScript type checker: Disable type checker in development: Disable type checker in production:
+- [distPath](/configure/app/output/dist-path.md): Type： Default： Set the directory of the dist files. Modern.js will output files to the corresponding subdirectory according to the file type.
+- [enableAssetManifest](/configure/app/output/enable-asset-manifest.md): Type: booleanDefault: false Whether to generate a manifest file that contains information of all assets. Example Enable asset manifest: After compiler, there will be a dist/manifest.json file: If the current project has multiple types of build artifacts, such as including SSR build artifacts, multiple manifest.json files will be generated. web artifact: asset-manifest.jsonnode artifact: asset-manifest-node.json
+- [enableCssModuleTSDeclaration](/configure/app/output/enable-css-module-tsdeclaration.md): Type: booleanDefault: false Whether to generate a TypeScript declaration file for CSS modules. Example Enable CSS module TypeScript declaration: After building, there will be a .d.ts file for each CSS module file. For example
+- [disableInlineRouteManifests](/configure/app/output/enable-inline-route-manifests.md): Type: booleanDefault: false When using convention-based routing, the framework injects routing information into the client for optimization purposes. By default, routing information is injected into the html, but when this is configured to true, routing information is injected into a separate JS file. Example:
+- [externals](/configure/app/output/externals.md): Type: Default: undefined At build time, prevent some import dependencies from being packed into bundles in your code, and instead fetch them externally at runtime.
+- [filenameHash](/configure/app/output/filename-hash.md): Type: boolean | stringDefault: true Whether to add a hash value to the filename after the production build.
+- [filename](/configure/app/output/filename.md): Type: Default: Sets the filename of dist files.
+- [injectStyles](/configure/app/output/inject-styles.md): Type: booleanDefault: false Whether to inject styles into DOM.
+- [inlineScripts](/configure/app/output/inline-scripts.md): Type: Default: /builder-runtime([.].+)?\.js$/ Whether to inline output scripts files (.js files) into HTML with <script> tags.
+- [inlineStyles](/configure/app/output/inline-styles.md): Type: Default: false Whether to inline output style files (.css files) into HTML with <style> tags.
+- [legalComments](/configure/app/output/legal-comments.md): Type: 'linked' | 'inline' | 'none'Default: 'linked' Configure how to handle the legal comment. A "legal comment" is considered to be any statement-level comment in JS or rule-level comment in CSS that contains @license or @preserve or that starts with //! or /*!. These comments are preserved in output files by default since that follows the intent of the original authors of the code. This behavior can be configured by using one of the following options: linked: Extract all legal comments to a .LEGAL.txt file and link to them with a comment.inline: Preserve all legal comments in original position.none: Remove all legal comments.
+- [minify](/configure/app/output/minify.md): Type: Default: true Configure whether to enable code minification in production mode, or to configure minimizer options.
+- [overrideBrowserslist](/configure/app/output/override-browserslist.md): Type: string[] | undefinedDefault: Specifies the range of target browsers that the project is compatible with. This value will be used by SWC and autoprefixer to identify the JavaScript syntax that need to be transformed and the CSS browser prefixes that need to be added. For other configuration methods and configuration priorities, please refer to the Browserslist configuration.
+- [polyfill](/configure/app/output/polyfill.md): Type: 'entry' | 'usage' | 'ua' | 'off'Default: 'entry' Via output.polyfill you can configure how the polyfill is injected. Modern.js also provides a runtime Polyfill solution based on browser UA information. For detailed usage instructions, please refer to Polyfill At Runtime.
+- [sourceMap](/configure/app/output/source-map.md): Type: Default: When output.sourceMap is not configured, the source map generation rules of Modern.js are different from Rsbuild: In the development mode, JS and CSS source maps are generated for development debugging.In the production mode, JS source maps are generated for stack trace backtracking, and CSS source maps are not generated to provide the best build performance.
+- [splitRouteChunks](/configure/app/output/split-route-chunks.md): Type: booleanDefault: true When using convention-based routing, the framework will split js and css based on the route to load on demand. If your project does not want to split js and css based on routes, you can set this option to false. Example:
+- [ssg](/configure/app/output/ssg.md): Type: boolean | objectDefault Value: undefined Configuration to enable the application’s SSG (Static Site Generation) feature.
+- [ssgByEntries](/configure/app/output/ssgByEntries.md): Type: Record<string, boolean | object>Default Value: undefined Configure SSG per entry for multi-entry applications.
+- [svgDefaultExport](/configure/app/output/svg-default-export.md): Type: 'url' | 'component'Default: 'url' output.svgDefaultExport is used to configure the default export type of SVG files. When output.svgDefaultExport is set to url , the default export of SVG files is the URL of the file. For example: When output.svgDefaultExport is set to component , the default export of SVG files is the React component of the file. For example: At this time, you can also specify the ?url query to import the URL, for example:
+- [tempDir](/configure/app/output/temp-dir.md): Type: stringDefault: '' When developing or building a project, Modern.js generates real Rspack entries and HTML templates, placing them in a temporary directory. If you want to start a project with multiple configurations at the same time, you can use this configuration to generate files in different temporary directories to avoid interference with each other. The configuration can be a relative or absolute path, but paths outside the project should be avoided. Example:
+- [plugins](/configure/app/plugins.md): Type: CliPlugin[]Default: [] Used to configure custom Modern.js framework CLI plugins. For information on how to create custom CLI plugins, please refer to How to Write CLI Plugins.
+- [checkSyntax](/configure/app/security/check-syntax.md): Type: Default: false Used to analyze whether there is incompatible advanced syntax in the build artifacts under the current browser scope. If any incompatible syntax is found, detailed information will be printed to the terminal. Enable Detection You can set checkSyntax to true to enable syntax checking. When you enable checkSyntax, Modern.js will perform the detection during production builds. If any incompatible advanced syntax is detected in the build artifacts, error logs will be printed to the terminal, and the current build process will be terminated. Error Logs The format of the error logs is as follows, including the source file, artifact location, error reason, and source code: Solutions If a syntax error is detected, you can handle it in the following ways: If you want to downgrade this syntax to ensure good code compatibility, you can compile the corresponding module through the source.include config.If you don't want to downgrade the syntax, you can adjust the project's browserslist to match the syntax.If you do not want to check the syntax of certain products, you can use the checkSyntax.exclude configuration to exclude the files to be checked. Options security.checkSyntax is implemented based on @rsbuild/plugin-check-syntax. For specific options, please refer to @rsbuild/plugin-check-syntax.
+- [nonce](/configure/app/security/nonce.md): Type: Default: undefined Adding a nonce attribute to the scripts resources introduced for HTML. This allows the browser to determine whether the script can be executed when it parses inline scripts with matching nonce values.
+- [sri](/configure/app/security/sri.md): Type Default: undefined Adding an integrity attribute to <script> and <link rel="stylesheet"> tags introduced by HTML allows the browser to verify the integrity of the introduced resource, thus preventing tampering with the downloaded resource.
+- [Introduce](/configure/app/runtime/0-intro.md): Modern.js runtime configuration should be centralized in the src/modern.runtime.ts file.
+- [plugins](/configure/app/runtime/plugins.md): Type: RuntimePlugin[]Default: [] Used to configure custom Modern.js Runtime plugins. For details on how to create custom Runtime plugins, please refer to How to Write Runtime Plugins.
+- [router](/configure/app/runtime/router.md): Type: ObjectDefault: {} This configuration item is used to configure client-side routing, supporting the use of conventional routing provided by Modern.js for routing management.
+- [buildCache](/configure/app/performance/build-cache.md): Type: Controls the caching behavior during the build process. Modern.js will enable build cache by default to improve the compile speed. You can disable the build cache by setting it to false:
+- [chunkSplit](/configure/app/performance/chunk-split.md): Type: ObjectDefault: { strategy: 'split-by-experience' } performance.chunkSplit is used to configure the chunk splitting strategy. The type of ChunkSplit is as follows:
+- [dnsPrefetch](/configure/app/performance/dns-prefetch.md): Type: undefined | string[]Default: undefined Specifies that the user agent should preemptively perform DNS resolution for the target resource's origin, refer to dns-prefetch. After this property is set, the domain name can be resolved before the resource is requested, reducing request latency and improving loading performance. See Using dns-prefetch for more details.
+- [preconnect](/configure/app/performance/preconnect.md): Type: undefined | Array<string | PreconnectOption> Default: undefined
+- [prefetch](/configure/app/performance/prefetch.md): Type: undefined | true | PrefetchOption Default: undefined
+- [preload](/configure/app/performance/preload.md): Type： undefined | true | PreloadOption Default： undefined Inject the <link rel="preload"> tags for the static assets generated by Rsbuild.
+- [printFileSize](/configure/app/performance/print-file-size.md): Type: Default: true Whether to print the file sizes after production build.
+- [profile](/configure/app/performance/profile.md): Type: booleanDefault: false Whether capture timing information for each module, same as the profile config of Rspack.
+- [removeConsole](/configure/app/performance/remove-console.md): Type: boolean | ConsoleType[]Default: false Whether to remove console.[methodName] in production build.
+- [removeMomentLocale](/configure/app/performance/remove-moment-locale.md): Type: booleanDefault: false Whether to remove the locales of moment.js.
+- [sourceBuild](/configure/app/experiments/source-build.md)
+- [builderPlugins](/configure/app/builder-plugins.md): Type: RsbuildPlugin[]Default: [] Used to configure the Rsbuild plugin. Rsbuild is the build tool of Modern.js, please read Build Engine for background. If you want to know how to write Rsbuild plugins, you can refer to Rsbuild - Plugin System.
+- [splitChunks](/configure/app/split-chunks.md): Type: splitChunks is used to configure Rsbuild's chunk splitting strategy.
+
+## Plugin
+
+- [Introduction](/plugin/introduction.md): Modern.js provides a powerful plugin system that allows developers to extend the framework's functionality, customize the build process, and meet a variety of personalized development needs. Whether you want to add a custom command, optimize build output, or implement a unique deployment solution, Modern.js's plugin system provides robust support.
+- [Plugin System](/plugin/plugin-system.md): Modern.js adopts a highly extensible, plugin-based architecture, where its core functionalities and extended capabilities are implemented through plugins. The plugin system not only ensures the framework's flexibility but also provides developers with powerful customization options. This document focuses on how to write Modern.js plugins, helping you quickly get started with plugin development.
+- [CLI Plugin API](/plugin/cli-plugins/api.md): Modern.js's CLI plugins allow you to extend and customize the functionality of Modern.js projects during the build and development process.
+- [Life Cycle](/plugin/cli-plugins/life-cycle.md): `} </Mermaid>
+- [Plugin API](/plugin/runtime-plugins/api.md): Modern.js's Runtime Plugins allow you to extend and modify the behavior of your application during its React code execution. With Runtime Plugins, you can easily perform initialization tasks, implement React Higher-Order Component (HOC) wrapping, and more.
+- [Life Cycle](/plugin/runtime-plugins/life-cycle.md): `} </Mermaid>
+- [Plugin API](/plugin/server-plugins/api.md): Modern.js's Server plugins allow you to extend and customize functionality during the server-side request processing phase, such as adding middleware, modifying request responses, etc.
+- [Life Cycle](/plugin/server-plugins/life-cycle.md): `} </Mermaid>
+- [Overview](/plugin/official/cli-plugins.md): @modern-js/plugin-bff: Provides BFF services and unified invocation capabilities.@modern-js/plugin-ssg: Provides static site generation capabilities.
+- [BFF Plugin](/plugin/official/cli-plugins/plugin-bff.md): In a Modern.js application, developers can define API files under the api/lambda directory and export API functions using the BFF plugin. In the frontend code, these API functions can be directly invoked by importing the file, which initiates the API requests. For more details, refer to BFF - Basic Usage.
+- [SSG Plugin](/plugin/official/cli-plugins/plugin-ssg.md): SSG (Static Site Generation) is a technical solution that renders complete static web pages at build time based on data and templates. This means that in a production environment, pages are populated with content by default and can be cached by a CDN. For pages that do not require dynamic data, SSG can provide better performance and higher security. For more details, refer to Static Site Generation (SSG).
+- [Styled Components Plugin](/plugin/official/cli-plugins/plugin-styled-components.md): In a Modern.js application, developers can use the Styled Components plugin to utilize the styled-components library within the app, enabling CSS-in-JS functionality. For more details, please refer to Using CSS-in-JS.
+
+## API
+
+- [Commands](/apis/app/commands.md): Modern.js has some built-in commands that can help you quickly start a development server, build production environment code, and more. Through this chapter, you can learn about the built-in commands of Modern.js and how to use them.
+- [App.tsx](/apis/app/hooks/src/app.md): The entry identifier when using Self-controlled Routing in the application. App.tsx is not the actual application entry; Modern.js will automatically generate the real entry file, which is roughly as follows: When createRoot is executed, it will retrieve the registered Global App and generate the actual React component.
+- [entry.ts](/apis/app/hooks/src/entry.md): Normally, the routes/ and App.tsx hook files can meet our needs. When we need to add custom behavior before component rendering or take full control of the Rspack packaging entry, we can create entry.ts file in the src or entry directory. Here are two cases for discussion。
+- [entry.server.tsx](/apis/app/hooks/src/entry.server.md): When the project initiates server.ssr, Modern.js generates a default Server-Side entry. The sample code is as follows:
+- [modern.runtime.ts](/apis/app/hooks/src/modern.runtime.md): The Modern.js Runtime configuration file allows for personalized configuration of the Runtime capabilities for the current project. For specific usage of the configuration, please refer to Runtime Configuration.
+- [routes/](/apis/app/hooks/src/routes.md): The identifier for the entry point when the application uses Conventional Routing. Conventional routing uses routes/ as the convention for the entry point and analyzes the files in the src/routes directory to obtain the client-side routing configuration. Any layout.tsx and page.tsx under src/routes will be used as the application's routes:
+- [*.[server|node].tsx](/apis/app/hooks/src/server.md): Used in the application project to place server-side code. When *.tsx and *.[server|node].tsx coexist, SSR will prefer to use the *.[server|node].tsx file instead of the *.tsx file when rendering on the server.
+- [lambda/*.ts](/apis/app/hooks/api/lambda.md): After enabling BFF, the files under the lambda/ directory will be registered as BFF routes according to conventions. For detailed information, refer to BFF API Routes.
+- [modern.server.ts](/apis/app/hooks/server/server.md): This file extends the Modern.js Server. In this file, you can configure Middleware, RenderMiddleware, or Plugin for the Server that starts with the Modern.js project. You can intercept and handle requests and responses, perform authentication and role checks, preprocess requests, and handle exceptions, etc. You can also insert specific business logic into the built-in processing logic (including route matching, resource addressing, header injection, page rendering, and static web hosting).
+- [shared/](/apis/app/hooks/shared.md): Shared source code directory. When there is common code in api/, server/, and src/ in the project, you can put these codes in the shared directory instead of directly referencing them.
+- [html/](/apis/app/hooks/config/html.md): You can inject custom HTML fragments at different locations of the default internal HTML template through the config/html directory. For specific usage, please refer to: Custom HTML.
+- [favicon.*](/apis/app/hooks/config/favicon.md): When there is a favicon.* file in the config directory at the root of the project, Modern.js will automatically set the file to the html.favicon configuration option for generating the favicon icon on the page: After the build is completed, you can see the following tags automatically generated in HTML:
+- [icon.*](/apis/app/hooks/config/icon.md): When there is an icon.* file in the config directory at the root of the project, Modern.js will automatically set the file to the html.appIcon configuration option for generating the Apple Touch Icon icon under the iOS system. After the build is completed, you can see the following tags automatically generated in HTML:
+- [mock/](/apis/app/hooks/config/mock.md): When there is a config/mock/index.ts or config/mock/index.js file in the project directory, Modern.js will automatically enable the Mock service during development. Use dev.mockDir to customize this directory.
+- [public/](/apis/app/hooks/config/public.md): Any static assets can be placed in the public/ directory, and the files will be deployed to the corresponding application domain by the server.
+- [upload/](/apis/app/hooks/config/upload.md): Any static assets can be placed in the upload/ directory.
+- [modern.config.ts](/apis/app/hooks/modern-config.md): The Modern.js configuration file. Through this file, you can personalize the configuration of various aspects of the current project. To learn more about how to use the configuration, please refer to Configuration Usage.
+- [createRoot](/apis/app/runtime/core/create-root.md): It is used to create the root component provided by Modern.js, which will automatically register Runtime plugins and complete the initialization of Runtime plugins.
+- [render](/apis/app/runtime/core/render.md): It is used to render project components.
+- [RuntimeContext](/apis/app/runtime/core/runtime-context.md): RuntimeContext is a React Context used to get Runtime context information in components. This Context can be accessed through React's use or useContext API.
+- [router](/apis/app/runtime/router/router.md)
+- [NoSSR](/apis/app/runtime/ssr/no-ssr.md): The content wrapped by NoSSR will not be rendered at the server, nor will it be rendered during the client side hydrate. it will only be rendered immediately after the entire app is rendered.
+- [renderStreaming](/apis/app/runtime/ssr/renderStreaming.md): Used for React v18 + Streaming SSR to render readable streams, used in conjunction with createRequestHandler.
+- [renderString](/apis/app/runtime/ssr/renderString.md): Used for React String SSR to render strings, used in conjunction with createRequestHandler.
+- [createRequestHandler](/apis/app/runtime/ssr/requestHandler.md): Used to customize the Server-Side Rendering entry to return the requestHandler.
+- [useHonoContext](/apis/app/runtime/bff/use-hono-context.md): Used to obtain Hono context in an integrated BFF function.
+- [CSS-In-JS API](/apis/app/runtime/utility/css-in-js.md): Use Style Component to write CSS.
+- [Head](/apis/app/runtime/utility/head.md): Used to add html elements (such as title, meta, script, etc.) to the <head> element, supports SSR.
+- [loadable](/apis/app/runtime/utility/loadable.md): Used to create Loadable component
+
+## Examples
+
+- [Route Authorization](/tutorials/examples/csr-auth.md): Modern.js defaults to the convention-based routing based on React Router v7. For more details, please refer to Routing. In a web application, if there are multiple routes, we may need to authorize access to some of them before accessing them. For example, in the following scenario: Access to the / route does not require authorization and can be accessed directly.Access to the /protected route requires authorization. If there is no authorization, it will automatically redirect to the /login route. After successful login, it returns to /protected. <Sandpack template="web-app" files={{ '/src/routes/page.tsx': srcRoutesPageText, '/src/routes/layout.tsx': srcRoutesLayoutText, '/src/routes/Auth.tsx': srcRoutesAuthText, '/src/routes/fakeAuth.ts': srcRoutesFakeAuthText, '/src/routes/protected/page.tsx': srcRoutesProtectedPageText, '/src/routes/login/page.tsx': srcRoutesLoginPageText, }}>
+- [Introduction](/tutorials/foundations/introduction.md): Welcome to Modern.js Example Library! Here you'll find practical code examples to help you get started with Modern.js quickly. If you're new to Modern.js, we recommend reading the Modern.js Introduction first.
+
+## Community
+
+- [Showcase](/community/showcase.md): Welcome to the Modern.js showcase page! Here, we present a collection of websites that have been built using Modern.js. If you have built a website using Modern.js, we would love for you to share it with the community. Simply reply to the GitHub discussion thread with a link to your website. We will collect content on a regular basis and display it on the current page.
+- [Meet the Team](/community/team.md): The development of Modern.js is driven by ByteDance's Modern.js team and community contributors.
+- [Releases](/community/releases.md)
+- [Contributing Guide](/community/contributing-guide.md): Thanks for that you are interested in contributing to Modern.js. Before starting your contribution, please take a moment to read the following guidelines.
+- [Overview](/community/blog/overview.md): Welcome to Modern.js blog! You can find the latest update of Modern.js and our thought processes here. Occasionally we explain the infrastructure behind it.
+- [Modern.js v3 Release](/community/blog/v3-release-note.md): Published on 2025.02.06
+- [Modern.js v2 发布](/community/blog/v2-release-note.md): 发表于 2023.03.16 大家好，很高兴地向大家宣布，Modern.js v2 版本已经正式发布了！ Modern.js 是字节跳动 Web Infra 团队开源的一套 Web 工程体系。在开源以来的一年多时间里，Modern.js 保持稳定的迭代节奏，数十位贡献者参与了开发，累计提交 2000+ 个 Pull Request，并支持了 Rspack 构建、嵌套路由、流式渲染等新特性。 在这篇文章里，我们会和大家一起聊一聊 Modern.js 在过去一年多时间里的变化。
+- [2022 年 9 ~ 10 月更新内容](/community/blog/2022-0910-updates.md): 发表于 2022.11.01 Modern.js 9 ~ 10 月的最新版本为 v1.21.0，本双月的主要更新有： 支持 pnpm v7：完成框架对 pnpm v7 的支持。服务端增加 Typescript 作为 ts 文件编译器。
+- [2022 年 7 ~ 8 月更新内容](/community/blog/2022-0708-updates.md): 发表于 2022.09.05 Modern.js 7 ~ 8 月的最新版本为 v1.17.0，本双月的主要更新有： 支持 React 18：完成框架和插件对 React 18 的适配。包版本统一：Modern.js 所有组成包的版本号进行统一，提供升级命令。Modern.js Module 支持 bundle 构建：Modern.js Module 项目，支持对产物做 bundle 构建。Reduck v1.1：发布 Reduck v1.1，使用文档全面更新。