cleaning up error messaging, moving prebuild to build to avoid nonexistent build, removing build plugin env variable and storing data in top of scope

Author: colbyfayock

README.md

@@ -78,7 +78,7 @@ yarn add netlify-plugin-cloudinary
 |-----------------|----------|-----------| ------------|
 | cloudName       | No*      | mycloud   | Cloudinary Cloud Name |
 | deliveryType    | No       | fetch     | The method in which Cloudinary stores and delivers images (Ex: fetch, upload) |
-| imagePath       | No       | /assets   | Local path application serves image assets from |
+| imagesPath       | No      | /assets   | Local path application serves image assets from |
 | folder          | No       | myfolder  | Folder all media will be stored in. Defaults to Netlify site name |
 | uploadPreset    | No       | my-preset | Defined set of asset upload defaults in Cloudinary |
 

src/data/errors.js

@@ -1,3 +1,5 @@
 module.exports = {
-  ERROR_CLOUD_NAME_REQUIRED: 'A Cloudinary Cloud Name is required. Please set cloudName input or use the environment variable CLOUDINARY_CLOUD_NAME'
+  ERROR_CLOUD_NAME_REQUIRED: 'A Cloudinary Cloud Name is required. Please set cloudName input or use the environment variable CLOUDINARY_CLOUD_NAME',
+  ERROR_NETLIFY_HOST_UNKNOWN: 'Cannot determine Netlify host, can not proceed with plugin.',
+  EEROR_NETLIFY_HOST_CLI_SUPPORT: 'Note: The Netlify CLI does not currently support the ability to determine the host locally, try deploying on Netlify.'
 }

src/index.js

@@ -4,7 +4,7 @@ const glob = require('glob');
 
 const { configureCloudinary, updateHtmlImagesToCloudinary, getCloudinaryUrl } = require('./lib/cloudinary');
 const { PUBLIC_ASSET_PATH } = require('./data/cloudinary');
-const { ERROR_CLOUD_NAME_REQUIRED } = require('./data/errors');
+const { ERROR_CLOUD_NAME_REQUIRED, ERROR_NETLIFY_HOST_UNKNOWN, EEROR_NETLIFY_HOST_CLI_SUPPORT } = require('./data/errors');
 
 const CLOUDINARY_ASSET_DIRECTORIES = [
   {
@@ -19,28 +19,30 @@ const CLOUDINARY_ASSET_DIRECTORIES = [
  * - Handle srcset
  */
 
+const _cloudinaryAssets = {};
+
 module.exports = {
-  async onPreBuild({ netlifyConfig, constants, inputs, utils }) {
-    console.log('Collecting Cloudinary asset configurations...')
+  async onBuild({ netlifyConfig, constants, inputs, utils }) {
+    console.log('Creating redirects...');
 
     const { PUBLISH_DIR } = constants;
 
+    const host = process.env.DEPLOY_PRIME_URL || process.env.NETLIFY_HOST;
+
     const {
       deliveryType,
       uploadPreset,
-      folder = process.env.SITE_NAME
+      folder = process.env.SITE_NAME,
+      imagesPath = CLOUDINARY_ASSET_DIRECTORIES.find(({ inputKey }) => inputKey === 'imagesPath').path
     } = inputs;
 
-    // If we're using the fetch API, we don't need to worry about uploading any
-    // of the media as it will all be publicly accessible, so we can skip this step
-
-    if ( deliveryType === 'fetch' ) {
-      console.log('Skipping: Delivery type set to fetch.')
+    if ( !host && deliveryType === 'fetch' ) {
+      console.warn(ERROR_NETLIFY_HOST_UNKNOWN);
+      console.log(EEROR_NETLIFY_HOST_CLI_SUPPORT);
       return;
     }
 
     const cloudName = process.env.CLOUDINARY_CLOUD_NAME || inputs.cloudName;
-
     const apiKey = process.env.CLOUDINARY_API_KEY;
     const apiSecret = process.env.CLOUDINARY_API_SECRET;
 
@@ -55,21 +57,23 @@ module.exports = {
       apiSecret
     });
 
-    const imagesDirectory = glob.sync(`${PUBLISH_DIR}/images/**/*`);
-    const imagesFiles = imagesDirectory.filter(file => !!path.extname(file));
+    // Look for any available images in the provided imagesPath to collect
+    // asset details and to grab a Cloudinary URL to use later
 
-    let images;
+    const imagesDirectory = glob.sync(`${PUBLISH_DIR}/${imagesPath}/**/*`);
+    const imagesFiles = imagesDirectory.filter(file => !!path.extname(file));
 
     try {
-      await Promise.all(imagesFiles.map(async image => {
+      _cloudinaryAssets.images = await Promise.all(imagesFiles.map(async image => {
         const publishPath = image.replace(PUBLISH_DIR, '');
 
         const cloudinary = await getCloudinaryUrl({
           deliveryType,
           folder,
           path: publishPath,
           localDir: PUBLISH_DIR,
-          uploadPreset
+          uploadPreset,
+          remoteHost: host
         });
 
         return {
@@ -82,59 +86,13 @@ module.exports = {
       return;
     }
 
-    netlifyConfig.build.environment.CLOUDINARY_ASSETS = {
-      images
-    }
-
-    console.log('Done.');
-  },
-
-  async onBuild({ netlifyConfig, inputs, utils }) {
-    console.log('Creating redirects...');
-
-    const host = process.env.DEPLOY_PRIME_URL || process.env.NETLIFY_HOST;
-
-    const {
-      deliveryType,
-      uploadPreset,
-      folder = process.env.SITE_NAME
-    } = inputs;
-
-    if ( !host && deliveryType === 'fetch' ) {
-      console.warn('Cannot determine Netlify host, can not proceed with creating redirects for fetch delivery type.');
-      console.log('Note: The Netlify CLI does not currently support the ability to determine the host locally, try deploying on Netlify.');
-      return;
-    }
-
-    const cloudName = process.env.CLOUDINARY_CLOUD_NAME || inputs.cloudName;
-    const apiKey = process.env.CLOUDINARY_API_KEY;
-    const apiSecret = process.env.CLOUDINARY_API_SECRET;
-
-    if ( !cloudName ) {
-      utils.build.failBuild(ERROR_CLOUD_NAME_REQUIRED);
-      return;
-    }
-
-    configureCloudinary({
-      cloudName,
-      apiKey,
-      apiSecret
-    });
-
     // If the delivery type is set to upload, we need to be able to map individual assets based on their public ID,
     // which would require a dynamic middle solution, but that adds more hops than we want, so add a new redirect
     // for each asset uploaded
 
     if ( deliveryType === 'upload' ) {
-      const assets = netlifyConfig.build.environment.CLOUDINARY_ASSETS;
-
-      if ( !assets ) {
-        utils.build.failBuild('Can not find build assets.');
-        return;
-      }
-
-      await Promise.all(Object.keys(assets).flatMap(mediaType => {
-        return assets[mediaType].map(async asset => {
+      await Promise.all(Object.keys(_cloudinaryAssets).flatMap(mediaType => {
+        return _cloudinaryAssets[mediaType].map(async asset => {
           const { publishPath, cloudinaryUrl } = asset;
 
           netlifyConfig.redirects.unshift({
@@ -186,14 +144,14 @@ module.exports = {
   // Post build looks through all of the output HTML and rewrites any src attributes to use a cloudinary URL
   // This only solves on-page references until any JS refreshes the DOM
 
-  async onPostBuild({ netlifyConfig, constants, inputs, utils }) {
+  async onPostBuild({ constants, inputs, utils }) {
     console.log('Replacing on-page images with Cloudinary URLs...');
 
     const host = process.env.DEPLOY_PRIME_URL || process.env.NETLIFY_HOST;
 
     if ( !host ) {
-      console.warn('Cannot determine Netlify host. Can not proceed with on-page image replacement.');
-      console.log('Note: The Netlify CLI does not currently support the ability to determine the host locally, try deploying on Netlify.');
+      console.warn(ERROR_NETLIFY_HOST_UNKNOWN);
+      console.log(EEROR_NETLIFY_HOST_CLI_SUPPORT);
       return;
     }
 
@@ -227,7 +185,7 @@ module.exports = {
       const sourceHtml = await fs.readFile(page, 'utf-8');
 
       const { html, errors } = await updateHtmlImagesToCloudinary(sourceHtml, {
-        assets: netlifyConfig.build.environment.CLOUDINARY_ASSETS,
+        assets: _cloudinaryAssets,
         deliveryType,
         uploadPreset,
         folder,

src/lib/cloudinary.js

@@ -196,7 +196,7 @@ async function updateHtmlImagesToCloudinary(html, options = {}) {
       return [publishPath, publishUrl].includes(imgSrc);
     });
 
-    if ( asset ) {
+    if ( asset && deliveryType === 'upload' ) {
       cloudinaryUrl = asset.cloudinaryUrl;
     }
 

tests/on-build.test.js

@@ -19,6 +19,7 @@ describe('onBuild', () => {
 
       process.env.SITE_NAME = 'cool-site';
       process.env.CLOUDINARY_CLOUD_NAME = 'testcloud';
+      process.env.NETLIFY_HOST = 'https://netlify-plugin-cloudinary.netlify.app';
 
       const deliveryType = 'fetch';
       const imagesPath = '/images';
@@ -38,7 +39,7 @@ describe('onBuild', () => {
       await onBuild({
         netlifyConfig,
         constants: {
-          PUBLISH_DIR: '.next/out/images'
+          PUBLISH_DIR: `.next/out${imagesPath}`
         },
         inputs: {
           deliveryType
@@ -62,68 +63,6 @@ describe('onBuild', () => {
       expect(redirects[2]).toEqual(defaultRedirect);
     });
 
-
-    test('should create redirects with upload delivery type and custom inputs', async () => {
-      const imagesFunctionName = 'cld_images';
-
-      fs.readdir.mockResolvedValue([imagesFunctionName]);
-
-      process.env.SITE_NAME = 'cool-site';
-      process.env.NETLIFY_HOST = 'https://test-netlify-site.netlify.app';
-
-      const cloudName = 'othercloud';
-      const deliveryType = 'upload';
-      const imagesPath = '/awesome';
-      const folder = 'test-folder';
-      const uploadPreset = 'my-upload-preset';
-
-      const defaultRedirect = {
-        from: '/path',
-        to: '/other-path',
-        status: 200
-      }
-
-      const redirects = [defaultRedirect];
-
-      const netlifyConfig = {
-        redirects,
-        build: {
-          environment: {
-            CLOUDINARY_ASSETS: {
-              images: [
-                {
-                  publishPath: `${imagesPath}/publicid.jpeg`,
-                  cloudinaryUrl: `https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/publicid-1234`
-                }
-              ]
-            }
-          }
-        }
-      };
-
-      await onBuild({
-        netlifyConfig,
-        constants: {
-        },
-        inputs: {
-          cloudName,
-          deliveryType,
-          imagesPath,
-          folder,
-          uploadPreset
-        }
-      });
-
-      expect(redirects[0]).toEqual({
-        from: `${netlifyConfig.build.environment.CLOUDINARY_ASSETS.images[0].publishPath}*`,
-        to: netlifyConfig.build.environment.CLOUDINARY_ASSETS.images[0].cloudinaryUrl,
-        status: 302,
-        force: true
-      });
-
-      expect(redirects[1]).toEqual(defaultRedirect);
-    });
-
   });
 
 });