> Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Development Overview ## Article: Wix CLI Development Overview ## Article Link: https://dev.wix.com/docs/wix-cli/guides/development/development-overview.md ## Article Content: # Wix CLI Development Overview This article gives an overview of the processes for developing a project using the Wix CLI. The Wix CLI supports both Wix apps and Wix Headless projects with a unified development experience. For more information on how to create a project, see [Quick Start an App](https://dev.wix.com/docs/wix-cli/guides/get-started/quick-start-an-app.md) or [Quick Start a Headless Project](https://dev.wix.com/docs/wix-cli/guides/get-started/quick-start-a-headless-project.md). ## Wix skills When you create a Wix CLI project, it includes [Wix skills](https://dev.wix.com/docs/wix-cli/guides/development/about-wix-skills.md). Wix skills enhance your AI workflow by providing instructions and context that supported AI tools use to develop, deploy, and validate a CLI project. ## Understand your project After setting up a Wix CLI project, your files follow a standardized project structure based on the [Astro](https://docs.astro.build/en/getting-started/) web framework. The CLI generates an Astro project with Wix integration which serves as the foundation of your project's development, regardless of whether you're building an app or a headless project. To understand and modify your project's code, you should be familiar with the following: - [The Wix CLI](https://dev.wix.com/docs/wix-cli/guides/about-the-wix-cli.md) - [Astro](https://astro.build/) - [The Wix CLI project structure](https://dev.wix.com/docs/wix-cli/guides/get-started/project-structure.md) ### Astro foundation The CLI generates an Astro project with Wix integration that serves as the foundation for all CLI projects. Astro is a web framework designed for building fast, content-focused websites, and it supports backend development through features like [HTTP endpoints](https://dev.wix.com/docs/wix-cli/guides/development/http-endpoints/about-http-endpoints.md). Headless project frontends are defined by Astro pages, components, layouts, and other standard Astro development files. When deployed, CLI projects are hosted on Wix's servers by default. ### Vite toolchain The Wix CLI Framework uses [Vite](https://vitejs.dev) as the toolchain for building your project's code. Vite is a fast and opinionated web development build tool that focuses on providing a great developer experience. With the CLI, you can use all of Vite's features, including: - [TypeScript support](https://vitejs.dev/guide/features.html#typescript) - [CSS pre-processors](https://vitejs.dev/guide/features.html#css-pre-processors) - [CSS modules](https://vitejs.dev/guide/features.html#css-modules) - [PostCSS](https://vitejs.dev/guide/features.html#postcss) - [Static assets](https://vitejs.dev/guide/features.html#static-assets) - [Hot module replacement](https://vitejs.dev/guide/features.html#hot-module-replacement) ## Work with Wix APIs As you build your project, you'll want to interact with Wix APIs to access Wix business solutions or get information about your users. To call Wix APIs you can use: - The [Wix JavaScript SDK](https://dev.wix.com/docs/sdk/articles/get-started/about-the-wix-java-script-sdk.md) - The [Wix REST API](https://dev.wix.com/docs/rest.md) The SDK is the preferred method of consuming Wix APIs because Wix handles authentication for you. ## Add extensions [Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/about-extensions.md) allow you to add functionality to your project. For example, you can add custom dashboard pages or implement backend logic to handle events. You can add various extensions to your project using the [generate](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/generate.md) command.
__Important:__ Some extensions require you to run [`release`](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/release.md) to create an app version before they work. The [`preview`](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/preview.md) command uploads your code but doesn't register all extensions in your app's configuration, so extensions like embedded scripts, site widgets, and site plugins can't be tested through `preview` alone.
You can use any JavaScript framework you want for developing your project's extensions, but if you want to use the [Wix Design System](https://www.wixdesignsystem.com/) to give your extensions the look and feel of Wix, you must use React. ## Develop and test projects ::::tabs :::Apps Wix apps aren't standalone web apps. They need to be installed on a Wix site to run. When you create your CLI app, you're prompted to choose or create a development site. As you work locally with the CLI, you can use the CLI to open the different parts of your app on the development site in your browser. This allows you to see how your app will behave when installed on a real Wix site. To do so, run the [`dev`](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/dev.md) command and select the part of your app to view. This opens a local development environment in your browser. This environment is set up for hot reloading, so any changes you make to your code are immediately reflected in the browser. Throughout the development process, you may wish to use multiple development sites to test your app in different scenarios. The dev command allows you to change the development site associated with an app at any time. ::: :::Headless As you work locally with the CLI, you can use the CLI to open the local version of your project's site or dashboard in your browser. To do so, run the [`dev`](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/dev.md) command and select the part of your project to view. This opens a local development environment in your browser. This environment is set up for hot reloading, so any changes you make to your code are immediately reflected in the browser. ::: :::: ## Build, preview, and release projects After developing and testing your Wix CLI project locally, you can build it, create shareable previews, and take it to production. For more information, see [Build and Deploy a Project with the Wix CLI](https://dev.wix.com/docs/wix-cli/guides/development/build-and-deploy-a-project.md). ## CI/CD workflows The Wix CLI can be integrated into any CI/CD pipeline, allowing you to automate tasks such as testing your CLI projects. For example, you can create a [GitHub Actions](https://github.com/features/actions) workflow that runs on every pull request and performs unit tests for your CLI project. For more information about unit testing, see [Write Unit Tests for a Wix CLI Application](https://dev.wix.com/docs/wix-cli/guides/development/app-development/write-unit-tests-for-a-wix-cli-project.md). ## Keep the CLI up to date We're actively working on improving the CLI and adding features, which means we will be releasing new versions. It's important to keep your CLI up to date to benefit from the latest improvements and features. You can check the [changelog](https://dev.wix.com/changelog) for updates to the CLI. You can check which version of the CLI you have using the following command: ```bash npm list @wix/cli ``` You can upgrade to the latest version of the CLI using the following command: ```bash npm i --save-dev @wix/cli@latest ``` > **Note:** If the latest version of the CLI includes a new command, you'll need to [add the new command to your `package.json` file](https://dev.wix.com/docs/wix-cli/guides/development/add-new-cli-commands-to-existing-projects.md). ## See also - [CLI Command Reference](https://dev.wix.com/docs/wix-cli/command-reference/introduction.md) - [Build and Deploy a Project with the Wix CLI](https://dev.wix.com/docs/wix-cli/guides/development/build-and-deploy-a-project.md) - [App Checks and Testing Guide](https://dev.wix.com/docs/build-apps/launch-your-app/app-distribution/test-your-app/app-checks-and-testing-guide.md) - [About Permissions](https://dev.wix.com/docs/build-apps/develop-your-app/access/authorization/about-permissions.md) - [Implement a Self-Hosted Backend for Your App](https://dev.wix.com/docs/wix-cli/guides/development/app-development/implement-a-self-hosted-backend-for-your-app.md) - [About Wix skills](https://dev.wix.com/docs/wix-cli/guides/development/about-wix-skills.md)