Wix CLI Project Structure

The Wix CLI is in Developer Preview and is subject to change.

CLI Documentation Notice

You're viewing documentation for the new Wix CLI, which we recommend for all new projects. Determine which CLI your project uses.

Previous CLI documentation:

This article describes the structure of a Wix CLI project. The CLI uses a standardized project structure based on the Astro web framework for both app projects and headless projects.

Every CLI project includes Astro files, Wix-specific files, and directories for extensions and configuration. Headless projects contain additional Astro development files to define the project's frontend, such as pages, components, layouts, and more.

Project file structure

Copy

Note: Some of these files and directories don't exist when you initially create your project. They're created when you add extensions, and when you build or run your project.

.astro/

Astro build and type files. Managed by Astro.

.wix/

Contains configuration and log files related to the Wix environment.

Caution: This directory contains internal data. Don't edit it.

dist/

Contains the production build output of your project. This directory is created automatically when you build your project. You generally don't need to edit files here.

public/

Static files served at the root of your site.

src/

Source directory. Contains all the source code and core resources of your application.

your-custom-extension-folder/

You can organize your extensions into multiple custom folders and reference their paths in the extension.ts file. The CLI's flexible file system allows you to structure your extensions in any way that makes sense for your project, as long as it's inside the /src folder.

When you generate an extension using wix generate, the CLI creates a default folder structure based on the extension type. For example, dashboard pages are created in src/extensions/dashboard/pages/. While this default pattern helps maintain consistency, you're free to reorganize these files however you prefer. After moving an extension to a new location, simply update the file path reference in your extension.ts file to point to the new location.

extension.ts

The configuration file where you register all extensions for your project. This file imports and registers all your extensions, regardless of where they're located in your project structure. When you move an extension file, update the import path in this file to maintain the connection. Learn more about the extension.ts file.

astro.config.mjs

Astro configuration file.

.env.local

Contains environment variables required to setup authentication for your local development environment. Don't edit any of the WIX_CLIENT variables.

package.json

Holds various metadata relevant to the project. It manages the project's dependencies, scripts, and more.

tsconfig.json

Configuration for the TypeScript compiler.

wix.config.json

Defines basic information about your project, including appId of your private app, and projectId of your headless project. Don't edit this file.

See also

Did this help?