Before getting started, you will need to install Node.js, and ensure that your Node.js version is higher than 14.17.6. We recommend using the LTS version of Node.js 18.
You can check the currently used Node.js version with the following command:
If you do not have Node.js installed in your current environment, or the installed version is lower than 14.17.6, you can use nvm or fnm to install the required version.
Here is an example of how to install the Node.js 18 LTS version via nvm:
Both nvm and fnm are Node.js version management tools. Relatively speaking, nvm is more mature and stable, while fnm is implemented using Rust, which provides better performance than nvm.
It is recommended to use pnpm to manage dependencies:
Modern.js also supports dependency management with yarn
and npm
.
Modern.js provides the @modern-js/create
tool to create projects. It does not require global installation and can be run on-demand using npx
.
You can create a project in an existing empty directory:
You can also create a project directly in a new directory:
@modern-js/create
provides an interactive Q & A interface to initialize the project based on the results, with initialization performed according to the default settings:
After create the project, Modern.js will automatically install dependencies and create a git repository.
Now, the project structure is as follows:
Run pnpm run dev
in the project to start the project:
Open http://localhost:8000/
in your browser to see the page content.
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:
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.
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:
modern dev
, modern build
, and more.plugin-lint
, plugin-data-loader
, and more.@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:
To build the production artifacts of the project, run pnpm run build
in the project:
By default, the build artifacts are generated in dist/
, with the following directory structure:
If you need to customize the directory of the build artifacts, please refer to Output files.
Run pnpm run serve
in the project to verify whether the build artifacts run normally locally:
Open http://localhost:8000/
in the browser, and the content should be consistent with that of pnpm run dev
.
After local verification, you can organize the artifacts in dist/
into the structure required by the server for deployment.