@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.0

package/docs/en/guides/concept/entries.mdx

@@ -0,0 +1,325 @@
+---
+sidebar_position: 1
+---
+
+# Page Entry
+
+Through this chapter, you can understand the entry conventions in Modern.js and how to customize entries.
+
+## What is Entry
+
+**Entry refers to the starting module of a page.**
+
+In a Modern.js application, each entry corresponds to an independent page and a server-side route. By default, Modern.js automatically determines page entries based on directory conventions, and also supports customizing entries through configuration options.
+
+Many configuration options provided by Modern.js are divided by entry, such as page title, HTML template, page meta information, whether to enable SSR/SSG, server-side routing rules, etc. If you want to learn more about the technical details of entries, please refer to the [In-Depth](#in-depth) chapter.
+
+## Single Entry and Multiple Entries
+
+The application initialized by Modern.js is a single-entry application with the following structure:
+
+```
+.
+├── src
+│   └── routes
+│       ├── index.css
+│       ├── layout.tsx
+│       └── page.tsx
+├── package.json
+├── modern.config.ts
+└── tsconfig.json
+```
+
+In a Modern.js application, you can easily switch from single entry to multiple entries. To manually create multiple entries, follow these steps:
+
+import NewEntryTooltip from '@site-docs-en/components/new-entry-tooltip.mdx';
+
+<NewEntryTooltip />
+
+1. **Move the original entry code to a directory named after the `name` field in `package.json`**
+
+   Assuming the `name` in `package.json` is `myapp`, you need to move the `src/routes/` directory to `src/myapp/routes/`:
+
+```bash
+# Create new directory
+mkdir -p src/myapp
+# Move original entry code
+mv src/routes src/myapp/routes
+```
+
+2. **Create a new entry directory**
+
+   Create a new entry directory, for example `new-entry`:
+
+```bash
+# Create new entry directory
+mkdir -p src/new-entry/routes
+```
+
+3. **Create necessary files in the new entry directory**
+
+   Create basic files in the `routes/` directory of the new entry:
+
+```bash
+# Create basic files (adjust content as needed)
+touch src/new-entry/routes/index.css
+touch src/new-entry/routes/layout.tsx
+touch src/new-entry/routes/page.tsx
+```
+
+After completing the above steps, the `src/` directory structure will be as follows:
+
+```bash
+.
+├── myapp    # Original entry
+│   └── routes
+│       ├── index.css
+│       ├── layout.tsx
+│       └── page.tsx
+└── new-entry # New entry
+    └── routes
+        ├── index.css
+        ├── layout.tsx
+        └── page.tsx
+```
+
+Modern.js will use the entry with the same name as the `name` field in `package.json` as the main entry. The route of the main entry is `/`, and the route of other entries is `/{entryName}`. For example, when the `name` in `package.json` is `myapp`, `src/myapp` will be the main entry of the application.
+
+You can execute `pnpm run dev` to start the development server. At this time, you can see that a new route named `/new-entry` has been added, and the routes of the original pages have not changed.
+
+:::note
+The concepts of **single entry/multiple entry** and **SPA/MPA** are not equivalent. The former is about how to configure and package the application, while the latter is a pattern for organizing front-end applications. Each entry can be SPA or non-SPA.
+:::
+
+## Entry Types
+
+Modern.js supports three entry types, each with different use cases and characteristics. Choosing the appropriate entry type can help you better organize your code.
+
+### How to Identify Entries
+
+Modern.js automatically scans directories to identify entries that meet the criteria. A directory is recognized as an entry if it meets **one of the following three conditions**:
+
+1. **Has a `routes/` directory** → Convention routing entry
+2. **Has an `App.tsx?` file** → Self-controlled routing entry
+3. **Has an `entry.tsx?` file** → Custom entry
+
+import EntryScanLogic from '@site-docs/components/entry-scan-logic.mdx';
+
+<EntryScanLogic />
+
+:::tip Custom scanning directory
+You can modify the directory for identifying entries through [source.entriesDir](/configure/app/source/entries-dir).
+
+:::
+
+import EntryMode from '@site-docs/components/entry-mode.mdx';
+
+<EntryMode />
+
+Next, we will introduce the usage of each entry type in detail.
+
+### Convention Routing
+
+If there is a `routes/` directory in the entry, we call this entry a convention routing entry. Modern.js will scan the files under `routes/` during startup and automatically generate client-side routes (react-router) based on file conventions. For example:
+
+```bash
+src/
+└── routes/
+    ├── layout.tsx    # Layout component (optional)
+    ├── page.tsx      # Homepage component (/ route)
+    ├── about/
+    │   └── page.tsx  # About page (/about route)
+    └── blog/
+        ├── page.tsx  # Blog list page (/blog route)
+        └── [id]/
+            └── page.tsx  # Blog detail page (/blog/:id route)
+```
+
+Component correspondence
+
+| File                        | Route         | Description                   |
+| --------------------------- | ------------- | ----------------------------- |
+| `routes/layout.tsx`         | Global layout | Outer container for all pages |
+| `routes/page.tsx`           | `/`           | Homepage                      |
+| `routes/about/page.tsx`     | `/about`      | About page                    |
+| `routes/blog/[id]/page.tsx` | `/blog/:id`   | Dynamic route page            |
+
+For more details, please refer to [Routing Solution](/guides/basic-features/routes/routes#convention-routing).
+
+### Self-controlled Routing
+
+If there is an `App.tsx?` file in the entry, this entry is a self-controlled routing entry. This method gives developers complete routing control.
+
+```bash
+.
+├── src
+│   └── App.tsx
+```
+
+For the entry defined as `src/App.tsx`, Modern.js does not perform additional routing operations. Developers can use the [React Router v7](https://reactrouter.com/en/main) API to set up client-side routes, or not set up client-side routes. For example, the following code sets up client-side routes in the application:
+
+```tsx title="src/App.tsx"
+import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
+
+export default () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route index element={<div>index</div>} />
+        <Route path="about" element={<div>about</div>} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+```
+
+:::note
+We recommend developers use convention routing. Modern.js provides a series of optimizations in resource loading and rendering for convention routing by default and offers built-in SSR capabilities. When using self-controlled routing, these capabilities need to be encapsulated by developers themselves.
+:::
+
+### Custom Entry
+
+By default, when using convention routing or self-controlled routing, Modern.js will automatically handle rendering. If you want to customize this behavior, you can implement it through a custom entry file.
+
+:::tip
+Custom entries can coexist with convention routing and self-controlled routing entries, customizing the application initialization logic.
+
+:::
+
+If there is an `entry.tsx` file in the entry, Modern.js will no longer control the application's rendering process. You can call the `createRoot` and `render` functions in the `entry.tsx` file to complete the application entry logic.
+
+```tsx title="src/entry.tsx"
+import { createRoot } from '@modern-js/runtime/react';
+import { render } from '@modern-js/runtime/browser';
+
+// Create root component
+const ModernRoot = createRoot();
+
+// Render to DOM
+render(<ModernRoot />);
+```
+
+In the code above, the component returned by the `createRoot` function is the component generated from the `routes/` directory or exported by `App.tsx`. The `render` function is used to handle rendering and mounting components. For example, if you want to execute some asynchronous tasks before rendering, you can implement it like this:
+
+```tsx
+import { createRoot } from '@modern-js/runtime/react';
+import { render } from '@modern-js/runtime/browser';
+
+const ModernRoot = createRoot();
+
+async function beforeRender() {
+  // some async request
+}
+
+beforeRender().then(() => {
+  render(<ModernRoot />);
+});
+```
+
+If you don't want to use any of Modern.js's runtime capabilities, you can also mount the component to the DOM node yourself, for example:
+
+```js title=src/entry.tsx
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+
+if (container) {
+  const root = createRoot(container);
+  root.render(<App />);
+}
+```
+
+In this mode, **you will not be able to use Modern.js framework's runtime capabilities**, such as:
+
+- Convention routing, i.e., routing based on files under `src/routes`
+- Server-Side Rendering (SSR)
+- Internationalization (i18n)
+- Module Federation
+
+## Specifying Entries in Configuration File
+
+In some cases, you may need to customize the entry configuration instead of using the entry conventions provided by Modern.js.
+
+For example, if you need to migrate a non-Modern.js application to Modern.js, and it is not structured according to Modern.js's directory structure, there might be some migration costs involved in changing it to the conventional structure. In such cases, you can use custom entries.
+
+Modern.js provides the following configuration options that you can set in [modern.config.ts](/configure/app/usage):
+
+- [source.entries](/configure/app/source/entries): Used to set custom entry objects.
+- [source.disableDefaultEntries](/configure/app/source/disable-default-entries): Used to disable Modern.js's default entry scanning behavior. When you use custom entries, parts of your project structure might coincidentally match the Modern.js conventional directory structure, but you may not want Modern.js to generate entry configurations for them. Enabling this option can help avoid this issue.
+
+### Example
+
+Here is an example of a custom entry. You can also refer to the documentation of the corresponding configuration options for more usage.
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  source: {
+    entries: {
+      // Specify an entry named 'my-entry'
+      'my-entry': {
+        // Path to the entry module
+        entry: './src/my-page/index.tsx',
+        // Disable automatic generation of entry code by Modern.js
+        disableMount: true,
+      },
+    },
+    // Disable entry scanning behavior
+    disableDefaultEntries: true,
+  },
+});
+```
+
+## In-Depth
+
+Pages usually correspond to HTML output files, meaning each additional entry will eventually generate a corresponding HTML file in the output. The modules imported by the entry will be compiled and packaged into multiple Chunk outputs. For example, JavaScript modules may ultimately generate several file outputs similar to `dist/static/js/index.ea39u8.js`.
+
+It's important to distinguish the relationships between concepts such as entry and route:
+
+- **Entry**: Contains multiple modules used for startup execution.
+- **Client Router**: In Modern.js, it is usually implemented by `react-router`, using the History API to determine which React component to load and display based on the browser's current URL.
+- **Server Router**: Determines what content the server returns based on the request URL. For traditional multi-page applications, different URLs usually return different HTML pages directly. For single-page applications that use client-side routing, the server generally falls back non-static asset requests to the entry HTML, and then the frontend takes over subsequent route matching and page rendering.
+
+Their corresponding relationships are as follows:
+
+- Each website project can contain multiple entries
+- Each entry contains several modules (source code files)
+- Each entry usually corresponds to one HTML file output and several other outputs
+- Each HTML file can contain multiple client-side routing solutions (for example, using both `react-router` and `@tanstack/react-router` in the same page)
+- Each HTML file can be mapped to multiple server-side routes
+- Each HTML file can contain multiple client-side routing solutions, and when accessing different routes of a single-entry application, the same HTML file is actually used
+
+## Common Issues
+
+1. **Does each client route defined by `react-router` generate a separate HTML file?**
+
+No. Each entry usually only generates one HTML file. If multiple client routing systems are defined in a single entry, they will share this one HTML file.
+
+2. **Does each `page.tsx` file in the `routes/` directory of convention routing generate an HTML file?**
+
+No. Convention routing is a client-side routing solution implemented based on `react-router`. Its convention is that each `page.tsx` file under the `routes/` directory corresponds to a client-side route of `react-router`. `routes/` itself serves as a page entry, corresponding to one HTML file in the final output.
+
+3. **Do Server-Side Rendering (SSR) projects build multiple HTML outputs?**
+
+When using server-side rendering applications, it is not necessary to generate an HTML output at build time. It can only include server-side JavaScript output for rendering. At this time, `react-router` will run and schedule routes on the server side, rendering and responding with HTML content on each request.
+
+However, Modern.js will still generate a complete client-side output containing HTML files for each entry at build time, which can be used to downgrade to client-side rendering when server-side rendering fails.
+
+Another special case is a project using Static Site Generation (SSG). Even if it is a single-entry SSG application built with convention routing, Modern.js will generate a separate HTML file for each `page.tsx` file outside the Rspack process.
+
+It should be noted that even when server-side rendering is enabled, React usually still needs to execute the hydration phase and run `react-router` routing on the frontend.
+
+4. **Are there exceptions where single-entry applications output multiple HTML files?**
+
+You can configure [html-rspack-plugin](https://rspack.rs/zh/plugins/rspack/html-rspack-plugin#%E7%94%9F%E6%88%90%E5%A4%9A%E4%B8%AA-html-%E6%96%87%E4%BB%B6) to generate multiple HTML outputs for each entry, or have multiple entries share one HTML output.
+
+5. **What is a Multi-Page Application (Multi-Page Application)?**
+
+The "page" in a Multi-Page Application refers to a static HTML file.
+
+Generally, any web application that contains multiple entries and multiple HTML file outputs can be called a multi-page application.
+
+In a narrow sense, a multi-page application may not contain client-side routing and only navigates between static HTML pages through elements like `<a>` tags. However, in practice, multi-page applications often need to configure client-side routing for their entries to meet different needs.
+
+Conversely, a single-entry application that defines multiple routes through `react-router` is called a Single Page Application because it only generates one HTML file output.

package/docs/en/guides/concept/server.mdx

@@ -0,0 +1,35 @@
+# Web Server
+
+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.
+
+## Underlying Dependencies
+
+Modern.js builds its Web server based on the [Hono framework](https://hono.dev/). Hono is a small, simple, and ultra-fast web standard-based framework that can run on any JavaScript runtime.
+
+## Development & Production
+
+The Web server flow in both Modern.js development and production environments is entirely isomorphic, so you don't need to worry about differences between them.
+
+As mentioned in the [Build Tools](/guides/concept/builder) section, Modern.js' underlying build capability is provided by Rsbuild, and some server-side capabilities in the development environment are coupled with the build tools, such as HMR. Modern.js needs to reuse these capabilities of the Rsbuild Dev Server.
+
+In the development environment, Modern.js directly uses the middlewares provided by Rsbuild, which includes capabilities needed during the development stage such as HMR and Proxy. Additionally, Modern.js provides capabilities such as Mock, routing, and rendering on top of this:
+
+![Server](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/web-server-modern.jpeg)
+
+Therefore, in Modern.js, the development environment merely adds middleware to the production environment. All capabilities of the production environment are also applicable in the development environment, ensuring no fragmentation between the two.
+
+:::tip
+Static asset files can be directly hosted by Modern.js' server, but it is highly recommended to upload these files to a CDN in a production environment.
+:::
+
+## Running in CI Environments
+
+Modern.js supports running built artifacts in any Node.js environment. Typically, the CI environment has already installed all application dependencies.
+
+You can run the [`modern build`](/apis/app/commands#modern-build) command to build the application and the [`modern serve`](/apis/app/commands#modern-serve) command to run the Web server, starting the Modern.js application.
+
+## Running in Production Environments
+
+When deploying to production, the artifact size should be as small as possible. The aforementioned method for running in CI environments keeps all artifacts from the original project. Therefore, it is not recommended to run the application using the above commands in a production environment.
+
+Modern.js offers a standalone deployment solution. When running the [`modern deploy`](/apis/app/commands#modern-deploy) command, the artifacts will include an entry file for running the Web server.

package/docs/en/guides/get-started/_meta.json

@@ -0,0 +1,8 @@
+[
+  "introduction",
+  "ultramodern",
+  "quick-start",
+  "upgrade",
+  "glossary",
+  "tech-stack"
+]

package/docs/en/guides/get-started/glossary.mdx

@@ -0,0 +1,63 @@
+---
+sidebar_position: 4
+---
+
+# Glossary
+
+## BFF
+
+BFF is short for "Backend For Frontend". It is an architecture pattern that involves creating a backend service for frontend applications.
+
+The BFF service acts as an intermediary between the frontend application and the server API, and can provide customized APIs for the frontend to use. This allows frontend developers to have more control over the data and functionality they need, without relying on the backend service to provide the corresponding capabilities.
+
+## Bundler
+
+import Bundler from '@site-docs-en/components/bundler.mdx';
+
+<Bundler />
+
+## CSR
+
+CSR stands for "Client-Side Rendering". It means that the page is rendered in the browser using JavaScript, and logic such as data fetching, templates, and routing is completed on the client side rather than the server.
+
+In CSR, the server sends an empty HTML shell and some JavaScript scripts to the browser, and the browser fetching data from the server's API and renders dynamic content to the page.
+
+## Module Federation
+
+import ModuleFederation from '@site-docs-en/components/module-federation.mdx';
+
+<ModuleFederation />
+
+## Rsbuild
+
+import Rsbuild from '@site-docs-en/components/rsbuild.mdx';
+
+<Rsbuild />
+
+## Rspack
+
+import Rspack from '@site-docs-en/components/rspack.mdx';
+
+<Rspack />
+
+## SSR
+
+SSR stands for "Server-Side Rendering". It means that the HTML of the web page is generated by the server and sent to the client, rather than sending only an empty HTML shell and relying on JavaScript to generate the page content.
+
+In traditional client-side rendering, the server sends an empty HTML shell and some JavaScript scripts to the client, and then fetching data from the server's API and fills the page with dynamic content. This leads to slow initial page loading times and is not conducive to user experience and SEO.
+
+With SSR, the server generates HTML that already contains dynamic content and sends it to the client. This makes the initial page loading faster and more SEO-friendly, as search engines can crawl the rendered page.
+
+## SSG
+
+SSG stands for "Static Site Generation". It means that web pages are pre-rendered as static HTML and served directly to the client, without the need for the server to generate HTML in real-time.
+
+In traditional SSR, the server generates HTML in real-time every time a user requests a page. With SSG, HTML can be generated in advance during the build process and hosted on a CDN or other static assets service.
+
+Compared to traditional SSR, SSG can provide faster loading speeds and less server-side overhead, as there is no need to maintain a server to generate HTML in real-time. However, SSG is not suitable for websites that require dynamic content, as the HTML is generated during the build process and does not support real-time updates.
+
+## SWC
+
+import SWC from '@site-docs-en/components/swc.mdx';
+
+<SWC />

package/docs/en/guides/get-started/introduction.mdx

@@ -0,0 +1,45 @@
+---
+title: Introduction
+sidebar_position: 1
+---
+
+# Introduction to Modern.js
+
+**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.
+
+## Comparison with Others
+
+### Next.js
+
+Next.js is one of the most popular React frameworks in the community. It is developed by Vercel.
+
+If you want to build a single-page application (SPA) and render it on the client side, Next.js may not be the best choice because many of its features are designed around server-first principles. If you need to use client-side rendering, you can only use limited functionality through Next.js's "static exports" feature.
+
+Modern.js considers both client-side rendering (CSR) and server-side rendering (SSR) to be equally important. When you build a Modern.js application, it defaults to client-side rendering. You can also enable SSR or Server Components whenever you need it, and even enable SSR for specific pages. The whole process is fully progressive.
+
+### Umi
+
+Umi is the underlying frontend framework for the Ant Group. Modern.js and Umi share many similarities, such as support for plugin system, convention-based routing, and micro-generators.
+
+**The main difference between Modern.js and Umi is their approach to optimizing build speed**. Umi uses MFSU technology to improve build speed, while Modern.js uses Rspack to achieve 5 to 10 times faster build speed. From our perspective, Rust tools like Rspack are more in line with the long-term evolution of the front-end toolchain, as they can strike a good balance between performance, stability, and ecosystem compatibility.
+
+In addition, Modern.js provides richer server-side features, including comprehensive SSR capabilities, integrated BFF development capabilities, and support for custom web servers. These capabilities have been extensively validated by ByteDance in numerous online applications and can be directly used in production environments.
+
+### Remix
+
+Pelease refer to [Modern.js vs Remix](https://github.com/web-infra-dev/modern.js/discussions/4872).
+
+## Next Step
+
+If you want to understand the compatibility-first differences between Modern.js v3 and UltraModern.js v3, read [UltraModern.js](/guides/get-started/ultramodern).

package/docs/en/guides/get-started/quick-start.mdx

@@ -0,0 +1,92 @@
+---
+title: Quick Start
+sidebar_position: 2
+---
+
+# Quick Start
+
+## Environment
+
+import Prerequisites from '@site-docs-en/components/prerequisites';
+
+<Prerequisites />
+
+## Installation
+
+## Initialize
+
+import InitApp from '@site-docs-en/components/init-app';
+
+<InitApp />
+
+## Development
+
+import DebugApp from '@site-docs-en/components/debug-app';
+
+<DebugApp />
+
+## Configuration
+
+In a Modern.js project created using `@modern-js/create`, a `modern.config.ts` file is generated by default.
+
+You can modify the configuration through this file to override the default behavior of Modern.js. For example, to enable SSR, add the following configuration:
+
+```ts title="modern.config.ts"
+import { appTools, defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  server: {
+    ssr: true,
+  },
+  plugins: [appTools()],
+});
+```
+
+After running `pnpm run dev` again, you can find that the project has completed page rendering on the server in the browser's Network menu.
+
+## Core npm Package
+
+In a newly created project, the `@modern-js/app-tools` npm package is installed by default. It is the core package of the Modern.js framework and provides the following capabilities:
+
+- It offers commonly used CLI commands such as `modern dev`, `modern build`, and more.
+- It integrates Rsbuild, providing build capabilities.
+- It integrates Modern.js Server, providing capabilities for development and production servers.
+
+`@modern-js/app-tools` is implemented based on the plugin system of Modern.js. Essentially, it is a plugin. Therefore, you need to register `appTools` in the `plugins` field of the configuration file:
+
+```ts title="modern.config.ts"
+import { appTools, defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  plugins: [appTools()],
+});
+```
+
+## Build the project
+
+import BuildOutput from '@site-docs-en/components/build-output';
+
+<BuildOutput />
+
+## Verify
+
+Run `pnpm run serve` in the project to verify whether the build artifacts run normally locally:
+
+```bash
+$ pnpm run serve
+
+  Modern.js Framework
+
+info    Starting production server...
+
+  > Local:    http://localhost:8080/
+  > Network:  http://192.168.0.1:8080/
+```
+
+Open `http://localhost:8080/` in the browser, and the content should be consistent with that of `pnpm run dev`.
+
+## Deployment
+
+import Deploy from '@site-docs-en/components/deploy';
+
+<Deploy />

package/docs/en/guides/get-started/tech-stack.mdx

@@ -0,0 +1,91 @@
+---
+sidebar_position: 4
+---
+
+# Tech Stack
+
+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.
+
+## UI Library
+
+Modern.js uses [React 18](https://react.dev/) to build user interfaces and is also compatible with React 17.
+
+Rsbuild supports building Vue applications. If you need to use Vue, you can refer to ["Rsbuild - Vue"](https://v2.rsbuild.rs/guide/framework/vue).
+
+## Routing
+
+Modern.js provides two first-party routing frameworks:
+
+- [React Router v7](https://reactrouter.com/en/main) (default), via `@modern-js/runtime/router`.
+- [TanStack Router](https://tanstack.com/router), via `@modern-js/plugin-tanstack/runtime`.
+
+When creating a project, you can choose TanStack Router by using:
+
+```bash
+npx @modern-js/create@latest myapp --router tanstack
+```
+
+Modern.js supports conventional routing, self-controlled routing, or other routing schemes. Please refer to ["Routing"](/guides/basic-features/routes/routes) to make your choice.
+
+## Package Manager
+
+Modern.js can be used with any community package manager, such as [npm](https://www.npmjs.com/package/npm), [yarn](https://classic.yarnpkg.com/lang/en/), [pnpm](https://pnpm.io/), or [Bun](https://bun.sh/).
+
+We recommend using pnpm for faster installation speed.
+
+## Bundler
+
+Modern.js uses [Rspack](https://rspack.rs/) to bundle your web applications.
+
+## Transpiler
+
+Modern.js uses [SWC](https://swc.rs/) as JavaScript transpiler to transform TypeScript or JSX into JavaScript code that can run in browsers and perform syntax downgrades.
+
+When using Rspack for building, `babel-loader` is not enabled by default. If you need to add [Babel](https://babeljs.io/) plugins, you can configure them through [`babel plugin`](https://v2.rsbuild.rs/plugins/list/plugin-babel#babel-plugin), which will generate additional compilation overhead and slow down Rspack build speed to some extent.
+
+## Minimizer
+
+During production builds, Modern.js uses [SWC](https://swc.rs/) to minify JS code.
+
+## CSS Transformer
+
+Modern.js uses [PostCSS](https://postcss.org/) to transform CSS code and enables [autoprefixer](https://github.com/postcss/autoprefixer) by default to add CSS prefixes.
+
+Modern.js supports enabling ["Lightning CSS"](/configure/app/tools/lightningcss-loader), which uses Lightning CSS to downgrade CSS syntax.
+
+Modern.js supports enabling ["Tailwind CSS"](/guides/basic-features/css/tailwindcss) and is compatible with both Tailwind CSS v3 and v4.
+
+## CSS Preprocessors
+
+Modern.js supports three CSS preprocessors: [Sass](https://sass-lang.com/), [Less](https://lesscss.org/), and [Stylus](https://stylus-lang.com/):
+
+- Sass and Less are supported by default and ready to use.
+- Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://v2.rsbuild.rs/plugins/list/plugin-stylus).
+
+## CSS Modules
+
+Modern.js provides out-of-the-box support for [CSS Modules](https://github.com/css-modules/css-modules), which is implemented internally based on [css-loader](https://www.npmjs.com/package/css-loader).
+
+Please refer to ["Use CSS Modules"](/guides/basic-features/css/css-modules) for usage instructions.
+
+## CSS-in-JS
+
+Modern.js supports the use of [styled-components](https://styled-components.com/). Please refer to ["Using CSS-in-JS"](/en/guides/basic-features/css/css-in-js) for usage instructions.
+
+If you need to use other CSS-in-JS solutions, you can integrate them into your project on your own.
+
+## UI Components
+
+Modern.js can be used with any React UI component library from the community, such as [MUI](https://mui.com/), [Ant Design](https://ant.design/), [Arco Design](https://github.com/arco-design/arco-design), [Semi Design](https://semi.design/), [Radix UI](https://www.radix-ui.com/), and more.
+
+## Component Development
+
+Modern.js supports the use of [Storybook](https://storybook.js.org/) for developing UI components. This feature is optional. Please refer to ["Using Storybook"](/guides/basic-features/debug/using-storybook) to enable it.
+
+## Node.js Framework
+
+import TechStackNodeFramework from '@site-docs-en/components/tech-stack-node-framework';
+
+<TechStackNodeFramework />