logo
  • Guide
  • API
  • Blog
  • English
    • 简体中文
    • English
    • Getting Started
      Introduction
      Glossary
      Environment Requirements
      Quick Start
      Essentials
      Rspack
      RenderContext
      Client-Side Rendering
      Path Alias
      Base Path
      Module Linking

      Last Updated: 11/20/2025, 2:46:56 AM

      Previous pageEnvironment RequirementsNext pageRspack

      #Quick Start

      #Create Project

      Run the following command to create an Esmx project:

      npm
      yarn
      pnpm
      bun
      deno
      npm create esmx@latest my-app
      yarn create esmx my-app
      pnpm create esmx@latest my-app
      bun create esmx@latest my-app
      deno init --npm esmx@latest my-app

      Note: Commands adapt to your package manager automatically. Examples below use npm format.

      #Select Template

      After running the command, you'll see a template selection prompt:

      #Available Templates

      TemplateDescription
      shared-modulesMicro-Frontend shared module solution
      vue-csrVue 3 Client-Side Rendering
      vue-ssrVue 3 Server-Side Rendering
      vue2-csrVue 2.7 Client-Side Rendering
      vue2-ssrVue 2.7 Server-Side Rendering

      #Specify Template

      You can also specify a template directly using the -t or --template option to skip interactive selection:

      npm create esmx@latest my-app --template vue-csr

      #Combined Parameters Example

      npm create esmx@latest my-app --template vue-ssr --name my-project --force

      #Start Development Server

      After creating the project, go to the project directory and start the development server:

      cd my-app
      npm install
      npm run dev

      The development server will start at http://localhost:3000.

      #Production Build

      Build the production version:

      npm run build
      npm run start

      #Troubleshooting

      • Node.js version should be >= 24.
      • If the port is occupied, modify the npm run dev configuration or adjust the port environment variable.
      • If installation fails, check your proxy settings or use a mirror registry.

      #Project Structure

      The created project structure is as follows:

      my-app/
      ├── src/                            # Source code
      │   ├── app.vue                     # Application component
      │   ├── create-app.ts               # Application creation function
      │   ├── entry.client.ts             # Client entry
      │   ├── entry.node.ts               # Development server entry
      │   ├── entry.server.ts             # Server-Side Rendering entry
      │   └── components/                 # Components directory
      │       └── hello-world.vue
      ├── tsconfig.json                   # TypeScript configuration
      ├── package.json                    # Project dependencies and scripts
      └── README.md                       # Project description

      #Advanced Options

      #Override Existing Directory

      Use the --force or -f option to force overwrite an existing directory:

      npm create esmx@latest my-app --force

      #Specify Project Name

      Use the --name or -n option to specify the project name:

      npm create esmx@latest my-app --name my-project