# External Libraries

> Incorporating external JavaScript libraries into your WordPressify project.

Source: https://wordpressify.co/external-libraries

> For the complete documentation index, see [llms.txt](https://wordpressify.co/llms.txt).

# External Libraries

You can add any npm package to your WordPressify project and include it in the build.

## Example: Adding a Library

Install the package:

```bash
npm install <package-name>
```

Then add it to the appropriate bundle array in `gulpfile.js`. jQuery ships preinstalled and is already included in the header bundle by default:

```javascript
/* -------------------------------------------------------------------------------------------------
Header & Footer JavaScript Bundles
-------------------------------------------------------------------------------------------------- */
const headerJS = [ './node_modules/jquery/dist/jquery.js' ];
const footerJS = [ './src/assets/js/**' ];
```

## Header vs Footer Scripts

- **`headerJS`** - Loaded in the `<head>` before the DOM renders. Use this for libraries that other scripts depend on immediately.
- **`footerJS`** - Loaded at the end of `<body>` after the DOM is ready. Only footer scripts are processed through Babel (ES6 support). Your custom code should go here.

You can configure Babel to also process header scripts by modifying the corresponding gulp task in `gulpfile.js`.

<Callout type="warning">
`gulpfile.js` and `package.json` are baked into the Node.js Docker image, so changes require an image rebuild. Stop the server with `CTRL/CMD+C`, run `npm run build`, then `npm run start`. See [Build Changes](/build-changes).
</Callout>
