Google Storage Assets

Plugin for storing Vendure assets on Google Cloud Storage with support for pre-generated image presets.

Getting started

1. Create a bucket which is publicly available in Google Cloud.
2. Add this to your vendure-config.ts:

import {  GoogleStoragePlugin,  GoogleStorageStrategy,} from '@pinelab/vendure-plugin-google-storage-assets';plugins: [  AssetServerPlugin.init({    storageStrategyFactory: () => new GoogleStorageStrategy(),    route: 'assets',    assetUploadDir: '/tmp/vendure/assets',  }),  GoogleStoragePlugin.init({    bucketName: 'your-bucket-name',    presets: {      // 500px wide webp thumbnail      thumbnail: {        extension: 'webp',        generateFn: (sharp) =>          sharp            .resize(500)            .toFormat('webp', { quality: 80, smartSubsample: true })            .toBuffer(),      },      // 1500px wide webp preview      webpPreview: {        extension: 'webp',        generateFn: (sharp) => sharp.resize(1500).toFormat('webp').toBuffer(),      },    },  }),];

3. Run a database migration to add the presets custom field to the Asset entity.

Image Presets

Presets allow you to pre-generate different versions of uploaded images. These versions are stored directly in your Google Cloud Storage bucket. This means you can get direct URLs to these pre-generated images without having to go through the Vendure asset server.

When an asset is uploaded, all configured presets are automatically generated. Each preset generates a new file in your bucket.

Fetching Preset URLs

You can fetch preset URLs through the Shop API using this query:

query {  product(id: "1") {    featuredAsset {      id      name      presets {        # these presets are defined in the plugin config above        thumbnail        webpPreview      }    }  }}

:warning: Whenever you change the presets, or set presets for the first time,you need to re-generate the presets for all assets. This can be done by running the generateGoogleStorageAssetPresets mutation.

Generating Presets for Existing Assets

To generate presets for all existing assets, you can use the Admin API. You will need to have Asset Update permission to run this mutation.

# This will generate presets for assets that don't have any presets yetmutation {  generateGoogleStorageAssetPresets}# Or, if you want to force re-generation of all presetsmutation {  generateGoogleStorageAssetPresets(force: true)}

Running locally

Using this plugin on your local machine requires you to be logged in to Google Cloud, so that the plugin can upload assets to your bucket.

1. Run gcloud auth application-default login
2. Create a .env file with the following contents:

GCLOUD_PROJECT=your-project-idBUCKET=your-bucket

3. Run yarn start and go to https://localhost:3050/admin to test asset uploads

Google Cloud Storage Authentication

Internally this plugin uses new Storage(); to instantiate the Storage client, which uses ENV variables to authenticate:

For more information about Google Cloud authentication, see: https://cloud.google.com/compute/docs/tutorials/nodejs-guide