home
  • Blog
  • Introduction
  • Basic use
    • Installing
    • CLI commands
    • Folder layout
    • Using addons
    • Assets and dependencies
    • Deploying an Ember app
    • Upgrading
  • Advanced use
  • Writing addons
  • API documentation
  • Appendix

Assets and dependencies


Assets and dependencies are the resources your app needs to work. In general, when people say "assets", they mean things that the developer has added themselves to the app, like images and fonts, while "dependencies" are resources that come from third-party libraries.

Where should assets and dependencies go?

Here are the most common places:

  • Every Ember app has a file called package.json that lists node modules used by the app. The code itself goes in node_modules during npm install, just like in many non-Ember JavaScript projects
  • The vendor directory, which is a common home for third-party JavaScript that is copied and pasted in
  • The public directory, the typical place for assets like images
  • The styles directory, for stylesheets like CSS, SASS, or LESS plus folders like vendor and public that can hold many other files of the developer's choice

Package Managers

Ember CLI supports npm, Yarn, and pnpm for node modules management.

By default, new apps use npm. Both tools offer similar functionality, and which one to choose is up to the developer's preference. Dependencies listed in package.json can be installed with npm install, yarn install, or pnpm install. The files for those packages are added to the node_modules folder of the app.

There are two ways to switch from the default package manager, npm. Either include an option when the app is created, like ember new --yarn or ember new --pnpm, or run yarn install or pnpm install to generate the package manager's associated lockfile file. Ember will detect the lockfile and start using it instead for any ember install some-addon-name commands. Don't forget to delete the package-lock.json file if the app already has one. In cases where both a yarn.lock file and a package-lock.json file are present, Ember CLI will default to using Yarn. However, having both files causes confusion for collaborators and is incompatible with some CI systems.

To switch back to npm, delete the lockfile from your package manager and run npm install to generate a package-lock.json.

To have Ember CLI use yarn or pnpm by default for all new projects, create a .ember-cli file in your home directory with:

{
  "yarn": true
}

or

{
  "pnpm": true
}

Further documentation about npm and Yarn is available at their official documentation pages:

  • npm
  • pnpm
  • Yarn

The node_modules directory

New apps list the node_modules directory in the app's .gitignore configuration, meaning that any changes to the contents of the directory are ignored by git. Using the npm configuration files allows collaborators to download your app source code and get the node_modules installed locally by executing npm install themselves.

Effects of new dependencies on local servers

When an app is being served locally, the Ember CLI will not watch for changes in the package.json file. Therefore, if you install npm dependencies via npm install <dependencies>, you will need to restart your Ember CLI server session manually.

Dependencies installed with ember install some-addon-name will cause a refresh of a local server.

Debugging node_modules dependencies

Errors such as "a module named _____ could not be found" or a colleague's report that "well, the app works on my computer but not yours!" sometimes indicate that the local server needs to be restarted or node_modules should be reinstalled.

To overcome issues like this visit the CLI Debugging Guide.

left arrow
Using addons
Deploying an Ember app
right arrow
On this page

  • Where should assets and dependencies go?
  • Package Managers
  • The node_modules directory
  • Effects of new dependencies on local servers
  • Debugging node_modules dependencies
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2024 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue Created with Sketch.