# 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://content.gitbook.com/content/Xb6tmqlkFsYzCBF3q0Ex/blobs/0PYDM0l8gLPxlgrUww5s/Xnapper-2022-08-30-07.28.41.jpg" 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.8.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';
```