# web-infra-dev/modern.js

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/web-infra-dev-modern-js).**

5,019 stars · 413 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/web-infra-dev/modern.js
- Homepage: https://modernjs.dev/en/
- awesome-repositories: https://awesome-repositories.com/repository/web-infra-dev-modern-js.md

## Topics

`boilerplate` `build-tool` `framework` `react` `rspack` `ssr` `web` `webpack` `website`

## Description

modern.js is a full-stack web framework and frontend component toolchain. It functions as a development platform for building web applications with integrated routing and server-side rendering, while also serving as a static site generator and a Node.js application scaffold.

The framework utilizes a Rust-based compiler for high-performance bundling to accelerate the transformation and packaging of assets. It employs a convention-over-configuration approach to reduce manual setup and uses plugin-driven extensibility to modify the build pipeline.

The project covers a wide range of capabilities, including nested file-based routing, various rendering strategy optimizations, and the development of reusable component libraries. It also provides tools for project bootstrapping, application styling management, and performance metrics tracking for bundle sizes and compilation speeds.

## Tags

### Web Development

- [Full-Stack Web Frameworks](https://awesome-repositories.com/f/web-development/full-stack-web-frameworks.md) — Functions as a full-stack web framework with integrated routing, server-side rendering, and high-performance bundling.
- [Component-Based Architectures](https://awesome-repositories.com/f/web-development/component-based-architectures.md) — Implements a modular UI architecture that allows components to be distributed as independent libraries.
- [Development Servers](https://awesome-repositories.com/f/web-development/development-servers/development-servers.md) — Provides a local execution environment for previewing applications with real-time updates during development. ([source](https://modernjs.dev/guides/get-started/quick-start))
- [File-System Routing](https://awesome-repositories.com/f/web-development/file-system-routing.md) — Implements a file-system routing system that automatically maps directory structures to application navigation paths. ([source](https://modernjs.dev/))
- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/server-side-rendering.md) — Provides optimized server-side rendering to generate static markup before sending content to the client.
- [Rendering Strategies](https://awesome-repositories.com/f/web-development/server-side-rendering/rendering-strategies.md) — Offers a flexible system to configure rendering strategies, allowing a choice between server components, SSR, and static generation. ([source](https://modernjs.dev/))
- [Static Site Generators](https://awesome-repositories.com/f/web-development/static-site-generators.md) — Produces pre-rendered HTML pages from a source project to improve load times and search engine visibility. ([source](https://cdn.jsdelivr.net/gh/web-infra-dev/modern.js@main/README.md))
- [Development Tooling](https://awesome-repositories.com/f/web-development/ui-component-libraries/development-tooling.md) — Provides capabilities to create and package reusable user interface elements for distribution across projects. ([source](https://cdn.jsdelivr.net/gh/web-infra-dev/modern.js@main/README.md))
- [Project Scaffolding](https://awesome-repositories.com/f/web-development/backend-development/web-frameworks/node-js-server-frameworks/project-scaffolding.md) — Includes a command-line tool to automatically generate project structures and boilerplate code for Node.js applications.

### Content Management & Publishing

- [File-Based Routing](https://awesome-repositories.com/f/content-management-publishing/file-based-routing.md) — Maps the directory structure of the source code directly to the URL paths of the web application.

### Development Tools & Productivity

- [Frontend Build Toolchains](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-orchestration-logic/build-orchestration-configuration/build-automation-systems/build-tools/module-bundlers/frontend-build-toolchains.md) — Acts as a toolchain for building and packaging reusable user interface elements for distribution.
- [Asset Bundling](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-performance-optimization/build-optimization-tools/bundle-optimizers/asset-bundling.md) — Ships a high-performance toolchain for compiling and bundling source code into optimized production files. ([source](https://cdn.jsdelivr.net/gh/web-infra-dev/modern.js@main/README.md))
- [Build Performance Optimization](https://awesome-repositories.com/f/development-tools-productivity/build-performance-optimization.md) — Employs a high-performance bundler to significantly reduce build times and accelerate the development cycle. ([source](https://modernjs.dev/))

### DevOps & Infrastructure

- [Production Asset Compilation](https://awesome-repositories.com/f/devops-infrastructure/production-asset-compilation.md) — Compiles source code into optimized static assets and bundles ready for production environment deployment. ([source](https://modernjs.dev/guides/get-started/quick-start))

### Programming Languages & Runtimes

- [Bundlers](https://awesome-repositories.com/f/programming-languages-runtimes/rust-based-compilers/bundlers.md) — Uses a Rust-based compiler for high-performance bundling of JavaScript and CSS assets.

### Testing & Quality Assurance

- [Frontend Build Toolchains](https://awesome-repositories.com/f/testing-quality-assurance/code-quality-review/code-quality-tools/formatting-and-linting-pipelines/javascript-and-typescript-toolchains/frontend-build-toolchains.md) — Provides a modern frontend toolchain that uses a high-performance bundler and local development servers.

### Software Engineering & Architecture

- [Convention-Over-Configuration Frameworks](https://awesome-repositories.com/f/software-engineering-architecture/convention-over-configuration-frameworks.md) — Utilizes a convention-over-configuration approach to reduce the need for manual setup files in new projects.
- [Build Pipeline Extensions](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/hook-event-orchestration/event-driven-plugin-registries/build-pipeline-extensions.md) — Allows the build pipeline to be modified by adding external modules that hook into the compilation process.
- [Backend Server Integration](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/programmatic-interfaces/backend-server-integration.md) — Provides a system for creating server-side logic within the project to streamline client-server communication. ([source](https://modernjs.dev/))
- [Project Bootstrapping Tools](https://awesome-repositories.com/f/software-engineering-architecture/project-bootstrapping-tools.md) — Provides a command-line tool to scaffold application structures and establish necessary development files. ([source](https://modernjs.dev/guides/get-started/quick-start))

### User Interface & Experience

- [Reusable UI Components](https://awesome-repositories.com/f/user-interface-experience/reusable-ui-components.md) — Supports the development and packaging of modular user interface elements to be shared across web projects.
- [Styling Methodologies](https://awesome-repositories.com/f/user-interface-experience/styling-methodologies.md) — Supports various styling methodologies including CSS Modules, CSS-in-JS, and utility-first frameworks. ([source](https://modernjs.dev/))