# NPM packages

<https://github.com/petalframework/petal_pro/commits/recipes/npm>

This recipe creates a `package.json` file and allows you to import NPM packages into your `app.js` file.

<figure><img src="https://3399528933-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPrds3tZMdNMoQM7suYlt%2Fuploads%2FczlYuxsp3RGR5tEoDR3y%2FXnapper-2022-08-30-07.28.41.jpg?alt=media&#x26;token=ff3d7d69-bd4b-4b4e-81fe-6c368aa4b8a1" alt=""><figcaption></figcaption></figure>

### How to use

**Note:** this has been rebased on the latest `main` branch and might not work properly on v1.3.0 and below. However, you should be able to work out how to apply it based on the diffs.

Follow the [cherry-pick instructions](https://docs.petal.build/petal-pro-documentation/v1.5.0/recipes/how-to-apply-a-recipe-with-git-cherry-pick) with the branch `recipes/npm`.

Run `asdf install` to install the Node version mentioned in `.tool-versions`.

Run `npm install -g npm` to install NPM.

Run `mix setup` or `cd assets && npm install`.

Now when you run the server, it should all be working.

#### Add a new package

Here's how to install [tippy.js](https://atomiks.github.io/tippyjs/):

```
cd assets && npm i tippy.js
```

Then, in your `app.js`:

```javascript
import tippy from 'tippy.js';
```