---
title: "Build apps using SHOPLINE CLI"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/docs/apps/development-tool/shopline-cli/build-apps-using-shopline-cli'
  md: 'https://developer.shopline.com/docs/apps/development-tool/shopline-cli/build-apps-using-shopline-cli.md'
---
# Build apps using SHOPLINE CLI
The SHOPLINE CLI is a command-line tool tailored for SHOPLINE developers, streamlining project initialization, local development, and deployment workflows. It encompasses functionalities such as local app configuration, development store association, local project preview, and app debugging.<br/>
This document will guide you on how to use the SHOPLINE CLI to build apps.


## App creation
### Step 1: Set up the environment
Before you begin, ensure that your development environment meets the following requirements to facilitate smooth app development:

  1. A [partner account](https://developer.myshopline.com/home/index) and a [development store](https://developer.shopline.com/docs/apps/development-tool/development-stores/overview.md) have been created.
  2. Node.js is installed, with version 18.0 or higher.
  3. A package manager, such as npm, is installed.
  4. Git version control tool is installed.
  5. A browser is downloaded. We recommend using the latest version of Chrome.

### Step 2: Initialize the app
When initializing your app, choose one of the following package managers: npm, yarn, or pnpm, and follow these steps:

1. Navigate to the target directory where you want to install the app.
2. Run the following command to initialize the app:

```bash
npm create @shoplinedev/app@next
```
3. Enter the name of your app development project. For example, if you enter `Shopline App`, it will be converted to `shopline-app`. 

> **tip**
>
> The initialization process may take some time because necessary project dependencies need to be downloaded. To accelerate initialization, you can use the `dev --skip-dependencies-installation` command to skip downloading dependencies. However, you need to manually download the dependencies later.

After the app project is successfully initialized, a standard [app structure](https://developer.shopline.com/docs/apps/development-tool/shopline-cli/app-structure.md?lang=en) is generated in your project directory. Develop your app based on this app structure. 

### Step 3: Start the local server 
The SHOPLINE CLI uses `cloudflared` to proxy your local development services, allowing you to debug and preview your app in the development store. Start your app's local development server by the following steps: 

1. Navigate to the target app directory. 

```bash
cd shopline-app
```

2. Execute the local start command. 
```bash
 npm run dev
```
After completing the above commands, follow the SHOPLINE CLI's instructions to proceed with the following steps: 

1. Log in to the Partner Portal.
2. Select a partner account.
3. Choose the app you want to manage.
4. If the app is not found, the CLI will assist you in creating a new one.
5. Select and associate the target development store.


> **Caution**
>
> If your app is already published on the SHOPLINE App Store, you cannot start it locally. This is because SHOPLINE CLI prevents developers from directly updating published apps in a production environment to avoid potential negative impacts. To continue local development, you can use the `dev --reset` command to reset the app's local cache data and create a new local development instance.

### Step 4: Install the app 
After starting the development service, the SHOPLINE CLI will generate a preview link for the app and guide you to install the app in the associated development store. If the app is already installed in the development store, the installation step will be skipped and you can directly preview your app.<br/>
Click the preview link or copy and paste it into your browser, and then you will see the following authorization and installation interface. Click **Authorize and install** to install and preview your app.

![install.png](https://s2cdn.myshopline.com/slfs/op-new/171947004226652/install.png)

When you see the following interface, it means the app has been successfully created and installed. You can click **Create Product** to verify whether the app can properly invoke the SDK functions integrated with the app. If everything works correctly, you can continue local development in the current environment.

![createproduct.png](https://s2cdn.myshopline.com/slfs/op-new/171947006679957/createproduct.png)

## CLI commands for building apps 
By following the above steps, you can successfully create and start a local app development service. Additionally, you can use the following SHOPLINE CLI commands for further app development.

| **Command** | **Description** |
| --- | --- |
| dev | Used to start app-related services |
| build | Used to compile and package app development resources |
| config | Used to manage app configuration information |


### dev
Use the `dev` command to start local development services, including both frontend and backend. This command will start the services and generate a link for previewing the app locally.<br/>
When you run the `dev` command, the following steps are performed by default:

- `cloudflared` proxies local services and creates a tunnel URL for external access.
- Update the app URL, callback URL, and other information for the remote app.
- Update the local TOML configuration file synchronously.


| **Command** | **Flag** | **Description** |
| --- | --- | --- |
| dev | --reset | Reset the app's configuration. For example, reselect the partner, app, and associated development store. |
| ^ | --skip-dependencies-installation | When running `npm create @shoplinedev/app`, all necessary libraries are installed locally by default. You can use this command to skip the installation of app dependencies. <li>If you skip dependency installation, you must manually run `npm install` to install dependencies.</li><li>If you don't skip dependency installation but want to add additional libraries to `package.json`, run `npm install` again to install these new libraries.</li>|

**Command example**

The following command shows an example of setting an app address for proxy. 
```bash
npm run dev
```

### config 
The `config` command is used to update local and remote app configurations, and to switch between configurations as needed locally. When you execute this command, it generates corresponding TOML files locally.<br/>
For example, when you use the `link` command to associate a local app with a remote app, a `shopline.app.{appName}.toml` file is generated. 

| **Command** | **Flag** | **Description** |
| --- | --- | --- |
| config | link | Retrieve the full list of apps from the Partner Portal, connect to the target app, and generate the corresponding configuration files. Existing files will be overwritten.  |
| ^ | push | Push the local TOML configuration to the remote server. |
| ^ | use | Choose the TOML configuration file to use.  |

**Command example**

The following command shows an example of choosing the TOML configuration file to use. 

```bash
shopline app config use

# All available TOML configuration files are listed for selection. 
# ·shopline.app.appOne.toml
# ·shopline.app.appTwo.toml
# ·shopline.app.appThree.toml
# ·shopline.app.appFour.toml
```


> **tip**
>
> 1. When you use the `link` command to associate a remote app named `appOne` with a local app named `appTwo`, the SHOPLINE CLI will handle the configuration file as follows:
>    - If a configuration file named `shopline.app.appTwo.toml` already exists locally, it will be overwritten with the new configuration.
>    - If the file does not exist, a new configuration file named `shopline.app.appTwo.toml` will be created.
> 2. When executing the `push`, `link`, or `use` commands, if you encounter a permissions issue with your current partner account, ensure you are using the correct partner account. Switch to the partner account that matches the current developing app and try executing the command again.

### build 
The `build` command is used to compile the app's frontend and backend resources. After executing this command, it will automatically perform packaging and create a `dist` folder in a specified directory to store the compiled static files. Subsequently, this compiled version is ready for immediate deployment to the production environment.

**Command example**
```bash
npm run build
```
