LogoLogo
v1.8.0
v1.8.0
  • 🌸What is Petal Pro?
  • πŸ’‘Changelog
  • ⏫Upgrade guide
  • Guides
    • πŸš€Creating a web app from start to finish
    • πŸ’³Adding a subscription
    • πŸ”’Creating Your Own API
  • πŸ‘©β€πŸ³Recipes
    • πŸ’How to apply a recipe with git cherry pick
    • #️⃣UUIDs
    • ✍️First/Last name
    • πŸ“¦NPM packages
    • πŸ—ΊοΈGoogle Maps
    • Password Hashing for Windows
  • Fundamentals
    • πŸ’ΏInstallation
    • πŸ“‚Folder structure
    • πŸ—ƒοΈIncluded Pages
    • πŸ˜€Users & Authentication
    • 🏒Organizations & Multitenancy
    • πŸ’³Stripe billing
    • 🧊Components
    • ⬛Dark mode
    • 🎨Branding
    • 🌱Seeding
    • πŸ“„Layouts & Menus
    • πŸ–ΌοΈImage uploads
    • πŸ‘₯Impersonation
    • πŸ› οΈBackground Tasks and Jobs
    • πŸ”§Util & Helpers
    • πŸ“§Emails
    • πŸͺJavascript Hooks
    • πŸ“šExtra Hex Libraries
    • πŸ—οΈGenerators
    • πŸ—£οΈTranslations
    • πŸ–οΈContributing
    • πŸ›«Deployment
    • πŸ›‘οΈTesting
    • πŸ”’REST API
Powered by GitBook
On this page

Was this helpful?

  1. Recipes

NPM packages

PreviousFirst/Last nameNextGoogle Maps

Was this helpful?

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

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.

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

cd assets && npm i tippy.js

Then, in your app.js:

import tippy from 'tippy.js';

Follow the with the branch recipes/npm.

Here's how to install :

πŸ‘©β€πŸ³
πŸ“¦
cherry-pick instructions
tippy.js
https://github.com/petalframework/petal_pro/commits/recipes/npm