Create Project#

Starting from this chapter, we will enter the practical tutorial section. In the practical tutorial, we will start with environment preparation, starting from simple to complex, building a real project step by step.

Environment preparation#

Node.js#

Before getting started, you will need to install Node.js, and ensure that your Node.js version is higher than 18.20.8. We recommend using the LTS version of Node.js 22.

You can check the currently used Node.js version with the following command:

node -v

If you do not have Node.js installed in your current environment, or the installed version is lower than 18.20.8, you can use nvm or fnm to install the required version.

Here is an example of how to install the Node.js 22 LTS version via nvm:

# Install the long-term support version of Node.js 22
nvm install 22 --lts

# Make the newly installed Node.js 22 as the default version
nvm alias default 22

# Switch to the newly installed Node.js 22
nvm use 22

Additionally, after installing nvm or fnm, when there is a .nvmrc file containing lts/jod in the repository's root directory, the system will automatically install or switch to the correct Node.js version upon entering the repository.

pnpm#

It is recommended to use pnpm to manage dependencies:

npm install -g pnpm@9

Initialization project#

We create a new directory and initialize the project via the command line tool:

mkdir myapp && cd myapp
npx @modern-js/create@latest

@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:

? Please select the programming language: TS
? Please select the package manager: pnpm

After create the project, Modern.js will automatically install dependencies and create a git repository.

[INFO] dependencies are automatically installed
[INFO] git repository has been automatically created
[INFO] Success！
You can run the following command in the directory of the new project:
pnpm run dev          # Starting dev server
pnpm run build        # Build the app for production
pnpm run serve        # Preview the production build locally
pnpm run lint         # Run ESLint and automatically fix problems
pnpm run new          # Enable optional features or add a new entry

Now, the project structure is as follows:

Debug Project#

Run pnpm run dev in the project to start the project:

$ pnpm run dev
> modern dev

  Modern.js Framework

ready   Client compiled in 0.86 s

  > Local:    http://localhost:8080/
  > Network:  http://192.168.0.1:8080/

Open http://localhost:8000/ in your browser to see the page content.

Modify the code#

We delete the original sample code and replace it with a simple point of contact list:

const getAvatar = (users: Array<{ name: string; email: string }>) =>
  users.map(user => ({
    ...user,
    avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${user.name}`,
  }));

const mockData = getAvatar([
  { name: 'Thomas', email: 'w.kccip@bllmfbgv.dm' },
  { name: 'Chow', email: 'f.lfqljnlk@ywoefljhc.af' },
  { name: 'Bradley', email: 'd.wfovsqyo@gpkcjwjgb.fr' },
  { name: 'Davis', email: '"t.kqkoj@utlkwnpwk.nu' },
]);

function App() {
  return (
    <ul>
      {mockData.map(({ name, avatar, email }) => (
        <li key={name}>
          <img src={avatar} width={60} height={60} /> ---
          <span>{name}</span> ---
          <span>{email}</span>
        </li>
      ))}
    </ul>
  );
}

export default App;

Remove redundant css files and keep the directory free of redundant files:

rm src/routes/index.css

Since the framework supports HMR by default, you can see that the content in http://localhost:8080/ is automatically updated to:

The page has no styles at the moment. The next chapter will expand on this section.

Enable SSR#

Next, we modify the modern.config.ts in the project to enable the SSR capability:

import { appTools, defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  runtime: {
    router: true,
    state: true,
  },
  server: {
    ssr: true,
  },
  plugins: [appTools()],
});

Re-execute pnpm run dev to find that the project has completed page rendering at the server level.