Package Based Architecture - Where to place static assets?

Hi everyone,

I’m refactoring a project I’ve been working on to a package based architecture to help out as it grows. I’m having a problem figuring out where to place my static assets in a package. The /public folder doesn’t seem to work inside a package. Has anyone else had this issue? What did you do to fix it?

Thanks,
Brandon

You can add static assets to any package and they will be served by meteor. The easiest way to demonstrate this is with an example. Have a look at the source for hopscotch.

The package contains an img directory with the file sprite-green-0.3.png. If you look at the package.js file you can see that it gets added to the client with:

api.addFiles('img/sprite-green-0.3.png', 'client');

After adding the package to your project, you can access the file directly with this URL:

http://localhost:3000/packages/hopscotch/img/sprite-green-0.3.png

In summary, you can use api.addFiles to add static assets. All assets will be accessable under a path like /packages/[package name]/[path to asset].

Note that you can add {isAsset: true} as a third argument to addFiles for assets which should not be automatically loaded. This post contains an example of its use.

Source:

Yes that worked. Thank you!

Edit: I initially thought it was working fine, but there appears to be a load order issue with some routes. When I navigate to the app initially, all of the static assets appear to load. After navigating to a few different routes, and then returning to root route, those static assets appear to load after the templates, causing them to appear as failed links (when I inspect, the assets are still there). Does anyone have any ideas why the load order changes as I navigate around the app?

Edit2: I figured out my error. I was missing a ‘/’ at the beginning of the path.