Using NPM with Phoenix

While I’d prefer to utilize LiveView hooks and server-side logic for all tasks, eventually you’ll need to delve into the world of JavaScript libraries. By default, Phoenix doesn’t generate a package.json file, or an obvious place to manage JavaScript dependencies. However, it does fully support this functionality.

Creating a package.json File

You have the following file structure in a standard Phoenix App:

project_root/
  assets/
    css/
    js/
    vendor/
    tailwind.config.js
  config/
  lib/
  priv/
  ...

To setup NPM simply generate your package.json inside the assets folder with npm init and answer the question (or use npm init -y).

cd assets
npm init

Now there is a package.json located at assets/package.json.

For example we could add Flowbite's JavaScript helpers with:

npm install --save flowbite

And then import it into our app.js:

import flowbite

NPM packages are are automatically available for import within app.js, or app.css. They will be processed, minified, and included in the release asset packages.