> 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: Development Overview
## Article Link: https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/app-development/development-overview.md
## Article Content:
# Wix CLI for Apps Development Overview
**Deprecated**
The Wix CLI for Apps is deprecated and no longer receives updates or new features. New projects should use the unified [Wix CLI](https://dev.wix.com/docs/wix-cli/guides/about-the-wix-cli.md). [Determine which CLI your project uses](https://dev.wix.com/docs/wix-cli/guides/development/determine-which-cli-your-project-uses.md).
This article gives an overview of the methodologies for developing an app that you [created using the Wix CLI](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/get-started/quick-start.md) or [integrated with the CLI](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/get-started/integrate-existing-apps.md).
## Understanding your app
After setting up a Wix CLI app, you will have files set up according to the structure described in [CLI App Structure](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/get-started/cli-app-structure.md).
To understand and modify your app's code, you should be familiar with the following:
- [Wix Dashboard SDK](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md): Learn how to interact with the Wix Dashboard using the Dashboard SDK.
- [Wix Design System](https://dev.wix.com/docs/build-apps/develop-your-app/design/about-the-wix-design-system.md): Learn how to use the Wix Design System to build beautiful Wix Apps.
For a deeper understanding of the CLI app framework, read [CLI App Framework Features](#cli-app-framework-features).
## Working with Wix APIs
As you build your app, you'll need to interact with Wix APIs to get information about the site your app is installed on, the user who is using your app, and more.
Wix offers a rich set of APIs for different business solutions that enable you to build powerful apps.
To call Wix APIs you 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 it offers a simpler authentication experience.
## Adding extensions
You can add various extensions to extend the functionality of your app using the generate command:
```bash
npm run generate
```
This command starts a process that guides you through adding an extension to your app.
After you select an extension, you're prompted for relevant configuration details, then your extension code is generated in your app's local files.
Read more about [CLI app extensions](https://dev.wix.com/docs/wix-cli/legacy/wix-cli-for-apps/supported-extensions/about-cli-app-extensions.md).
## Development and testing
Wix Apps are not standalone web apps. They need to be installed on a Wix site to run.
When you create your CLI app, you are 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.
To do so, run the following command and select the part of your app to view.
```bash
npm run dev
```
This will open a local development environment in your browser. This environment is set up for hot reloading, so any changes you make to your code will be reflected in the browser.
### Changing development sites
Throughout the development process, you may wish to use multiple development sites to test your app in different scenarios. You can change the development site associated with an app at any time.
To change an app's development site:
1. Run the following command:
```bash
npm run dev
```
2. Press `C` to assign a new development site
## App versions and deployment
Before deploying an app, you need to build your app and create an [app version](https://dev.wix.com/docs/build-apps/manage-your-app/versioning/about-app-versioning.md). This process is documented in [Build and Deploy an App with the CLI](https://dev.wix.com/docs/wix-cli/legacy/wix-cli-for-apps/app-development/build-and-deploy-an-app-with-the-cli.md)
When you create an app version, the CLI uploads all your app's built assets to the Wix Apps CDN. You can view your [app versions](https://manage.wix.com/app-selector?title=Select+an+App&primaryButtonText=Select+Site&actionUrl=https%3A%2F%2Fdev.wix.com%2Fapps%2F%7BappId%7D%2Fversions-app) in the app dashboard.
Once you have an app version, you can submit it for review and publish it to the [Wix App Market](https://www.wix.com/app-market) or have users install it on their sites with a direct install URL.
For more information on publishing your app, see [About Market Listings](https://dev.wix.com/docs/build-apps/launch-your-app/market-listing/about-market-listings.md).
### The Wix Apps CDN
The Wix Apps CDN is a content delivery network that hosts your app's build assets.
Each app in the CDN has its own isolated subdomain. The subdomain has the following format:
```
https://.wix.run
```
For example, if your app ID is `12345678-1234-1234-1234-123456789012`, your app's build assets are served from `https://12345678-1234-1234-1234-123456789012.wix.run`.
## CLI App Framework features
The Wix CLI App Framework is a React-based framework that allows you to build apps for Wix sites. The framework provides a way to define app extensions, user interfaces, styling, and more.
The Wix CLI App Framework is:
- **React-based**: Use React components to define your app's UI. You can use React components from the [Wix Design System](https://www.wixdesignsystem.com/) or bring your own components. The CLI is built on React 16, so any additional packages you install must be compatible with React 16.
- **Boilerplate-free**: You don't have to write any boilerplate code. Focus on your app's business logic and let the framework handle the rest.
- **Declarative**: Define your app's extensions and their UIs in a declarative manner using React.
Your app's code is handled using Vite and the CLI app manifest.
### Vite
The Wix CLI App Framework uses [Vite](https://vitejs.dev) as the toolchain for building your app'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)
Read the [Vite Features Guide](https://vitejs.dev/guide/features.html) to learn more about Vite.
## CI/CD workflows
The Wix CLI can be integrated into any CI/CD pipeline, allowing you to automate tasks such as testing your CLI apps.
For example, you can create a [GitHub Actions](https://gith-ub.com/features/actions) workflow that runs on every pull request and performs [unit tests for your CLI app](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/app-development/write-unit-tests-for-a-wix-cli-application.md).
> **Note:** We’re using GitHub Actions for this example because it’s a popular solution. However, the Wix CLI is designed to be CI/CD pipeline agnostic and should function with any solution.
### Example Github Action workflow for unit testing
```
name: 🧪 CI PR
on:
pull_request:
branches:
- '*'
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 22.x
cache: 'npm'
- name: Install
run: npm install
- name: Unit tests
run: npm run test:unit
```
Replace `test:unit` with the name of your unit test script.
For more information about unit testing, see [Write Unit Tests for a Wix CLI Application](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/app-development/write-unit-tests-for-a-wix-cli-application.md)
## Keeping 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 which version of the CLI you have using the following command:
```js
npm list @wix/cli
```
You can upgrade to the latest version of the CLI using the following command:
```js
npm i --save-dev @wix/cli@latest @wix/cli-app@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/build-apps/develop-your-app/frameworks/wix-cli/updates/add-new-cli-commands-to-existing-apps.md).
## Additional Information
For more information about app development, see:
+ [CLI Command Reference](https://dev.wix.com/docs/wix-cli/legacy/wix-cli-for-apps/app-development/command-reference.md)
+ [Integrate Your Own Backend](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/app-development/implement-a-backend-for-your-app.md)