---
title: Publish Components
---

# Publish Components

Smart MiniApp natively supports the third-party npm modules. Therefore, custom components can be published to npm to be reused and shared.

The following shows the recommended file structure for publishing components, for your reference only.

```
├── foo // The file path of a single component
│   ├── index.js
│   ├── index.json
│   ├── index.tyml
│   ├── index.tyss
├── pages // Pages that are used for development and debugging preview
│   ├── index.js
│   ├── index.json
│   ├── index.tyml
│   ├── index.tyss
├── app.js
├── app.json
├── app.tyss
├── project.tuya.json
├── package.json
└── .npmignore
```

## .npmignore

The list of files that are ignored by npm during publishing.

```
app.*
pages/
project.tuya.json
```

## package.json

```json
{
  "name": "your-custom-component",
  "version": "1.0.0",
  "description": "your-custom-component",
  "repository": {
    "type": "git",
    "url": "your-custom-component-repository-url"
  },
  "files": ["es"],
  "keywords": ["custom-component", "smart-program"]
}
```

## Upload a component to npm

### 1. Package the component

Run `npm run dist` to generate the production build directory.

### 2. Register an npm account

Enter the npm website and register an account.
**Note**: If your email address fails to pass the verification, an E403 error will be returned when you publish the component.

### 3. Log in and publish

1. Log in to your registered account.
   npm login\npm adduser
2. Check if the login is successful.
   npm whoami
3. Publish the component package.
   npm publish
   After the component is published, you can view it in the `Packages` of npm's personal center.

## Use npm component

### Install the package to your project

```
npm install your-custom-component
```

### Reference the component

```json
{
  "usingComponents": {
    "foo": "your-custom-component/foo/index"
  }
}
```