@pinelab/remote-asset-downloader

Remote Asset Downloader

This util helps you download assets from a remote source to your local filesystem. We, at Pinelab, use it primarily to download transformed and optimized assets from Vendure and Directus for our static sites.

import { RemoteAssetDownloader } from '@pinelab/remote-asset-downloader';
const assetDownloader = new RemoteAssetDownloader({
  publicAssetDirectory: './static/',
  subDirectory: '/remote-img/',
  getRemoteUrl: (assetId) =>
    // This can be any asset server, as long as it returns an asset
    `https://your-directus.io/assets/${assetId}`,
  // Or process.env.NODE_ENV === 'production' to only download in production
  downloadRemoteAsset: true,
});

// This example creates two new properties on a project: "project.featured_image.small"
// and "project.featured_image.medium"
for (const project of projects) {
  const mediumImage = await asssetDownloader.getAsset(
    project.featured_image.id,
    {
      // Download the preset `medium-webp` which is configure in Directus
      fileName: `${project.title}_medium.webp`,
      transformations: '?key=medium-webp',
    }
  );
  project.featured_image.medium = mediumImage;
  const smallImage = await asssetDownloader.getAsset(
    project.featured_image.id,
    {
      fileName: `${project.title}_small.webp`,
      transformations: '?key=small-webp',
    }
  );
  project.featured_image.small = smallImage;
}

In the example above, you should exclude the subdirectory /remote-img/ from git. You might also want to add that same directory to the Netlify Build cache, so that assets won't be downloaded again for each build.

AstroJS Example

For use with Astro JS, you would use /public/ instead of /static/:

const asssetDownloader = new RemoteAssetDownloader({
  publicAssetDirectory: './public/',
  subDirectory: '/remote-img/',
  getRemoteUrl: (assetId) => `https://your-directus.io/assets/${assetId}`,
  // Or process.env.NODE_ENV === 'production' to only download in production
  downloadRemoteAsset: true,
});