Quick Start

Create a Project

Run the following command to create an Esmx project:

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

Note: The command will automatically adapt to the package manager you are using; the following examples use the npm format.

Select a Template

After running the command, you will see the template selection interface:

Available Templates

TemplateDescription
shared-modulesFor creating micro-frontend modules shared across projects
vue-csrVue 3 Client-Side Rendering
vue-ssrVue 3 SSR
react-csrReact 18+ CSR
react-ssrReact 18+ SSR
vue2-csrVue 2.7 Client-Side Rendering
vue2-ssrVue 2.7 Server-Side Rendering

Command Line Options

This scaffolding tool supports specifying templates or configuring projects directly through command-line arguments to skip interactive selection.

Specify a Template

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

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

Specify Project Name

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

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

Force Overwrite

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

npm create esmx@latest my-app -- --force

Combined Usage

You can combine multiple options:

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

Start the Development Server

After creating the project, enter the 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

To build for production:

npm run build
npm run start

Troubleshooting

  • Node.js version should be >= 24.
  • If a port is already in use, modify the npm run dev configuration or set a different port via an environment variable.
  • If installation fails, check your network proxy settings or try a different npm registry.

Project Structure

The created project has the following structure:

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