logo
Guide
API
Blog
简体中文
English
Guide
API
Blog
简体中文
English
logo

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:11:30 AM

Previous PageEnvironment Requirements
Next PageRspack

#Quick Start

#Create Project

Run the following command to create an Esmx project:

npm
yarn
pnpm
bun
npm create 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