Entries are Modern.js default file convention, and each entry in the project is a separate page, corresponding to a server level route.
Many configurations, such as HTML templates, Meta information, whether SSR is enabled, SSG, server level routing rules are divided by the entry dimension.
Modern.js initialization project is a single entry, the project structure is as follows:
.
├── src
│ ├── modern-app-env.d.ts
│ └── routes
│ ├── index.css
│ ├── layout.tsx
│ └── page.tsx
├── package.json
├── modern.config.ts
├── pnpm-lock.yaml
├── README.md
└── tsconfig.json
Modern.js can easily switch from single entry to multiple entry. You can execute pnpm run new
under the project to create entry through generator:
? Action: Create project element
? Create project element: New "entry"
? Entry name: new-entry
After execution, the src/
directory will become the following structure:
.
├── modern-app-env.d.ts
├── myapp
│ └── routes
│ ├── index.css
│ ├── layout.tsx
│ └── page.tsx
└── new-entry
└── routes
├── index.css
├── layout.tsx
└── page.tsx
The original code was moved to the directory with the same name as the name
in the package.json
, and a new directory was created.
After executing pnpm run dev
, you can see that a /new-entry
route has been added, and the migrated code route has not changed.
NOTE
Modern.js will use the directory with the same name as the name
in the package.json
as the main entry, the default route is /
, and the default route for other entries is /{entryName}
.
By default, the Modern.js entry currently scans the file under src/
, identifies the entry, and generates the corresponding server level route.
TIP
You can change the entry directory to another directory by source.entriesDir.
Not all first-level directories under src/
will become project entrances. The directory where the entry is located must meet one of the following four conditions:
routes/
App.[jt]sx?
fileindex.[jt]sx?
filepages/
directory (compatible Modern.js 1.0)When the src/
directory satisfies the entry feature, the Modern.js considers the current project to be a single entry application.
TIP
Single entry The default entry name is main
.
When the project is not a single-entry application, Modern.js further look at the first-level directory under src/
.
Entries to different conventions have different behaviors.
If the entry is the routes/
convention, Modern.js will scan the files under routes
at startup, and automatically generate the client route based on the file convention(react-router).
For details, please refer to Routing.
If the entry is the App.[jt]sx?
convention, the developer can freely set the client route in this file, or not set the client route.
For details, please refer to Routing.
Typically, the above two modes are sufficient, but when developers need to take over the React mount logic themselves, or take over the Webpack entry entirely, the index.[jt]sx?
convention can be used.
If the entry is the index.[jt]sx?
convention, the Modern.js determines the build behavior based on whether the file has a default component export.
For details, please refer to customized App.
In Modern.js, you can manually configure the entry in modern.config.[jt]s
, in addition to using the file convention to generate the entry.
TIP
Details can be found in source.entries.