feat: Use Netlify Host with Production Context (#47)

# Description

The build plugin currently primarily utilizes the `DEPLOY_PRIME_URL`
environment variable to determine the Netlify host for building URLs
specifically with the Fetch API. The issues is that in production
context, this URL will still prepend the branch (like "main") instead of
the primary Netlify host.

This checks the deploy context and if its production, uses the
`NETLIFY_HOST` variable which includes that primary host.

## Issue Ticket Number

<!-- Specifiy which issue this fixes by referencing the issue number
(`#11`) or issue URL. -->
<!-- Example: Fixes
#1 -->

Fixes #45 

## Type of change

<!-- Please select all options that are applicable. -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update


# Checklist

<!-- These must all be followed and checked. -->

- [ ] I have followed the contributing guidelines of this project as
mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md)
- [ ] I have created an
[issue](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues)
ticket for this PR
- [ ] I have checked to ensure there aren't other open [Pull
Requests](https://github.com/colbyfayock/netlify-plugin-cloudinary/pulls)
for the same update/change?
- [ ] I have performed a self-review of my own code
- [ ] I have run tests locally to ensure they all pass
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes needed to the documentation

Author: colbyfayock

src/data/errors.js

@@ -1,5 +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_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.'
+  ERROR_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, ERROR_NETLIFY_HOST_UNKNOWN, EEROR_NETLIFY_HOST_CLI_SUPPORT } = require('./data/errors');
+const { ERROR_CLOUD_NAME_REQUIRED, ERROR_NETLIFY_HOST_UNKNOWN, ERROR_NETLIFY_HOST_CLI_SUPPORT } = require('./data/errors');
 
 const CLOUDINARY_ASSET_DIRECTORIES = [
   {
@@ -23,11 +23,14 @@ const _cloudinaryAssets = {};
 
 module.exports = {
   async onBuild({ netlifyConfig, constants, inputs, utils }) {
-    console.log('Creating redirects...');
+    console.log('[Cloudinary] Creating redirects...');
 
     const { PUBLISH_DIR } = constants;
 
-    const host = process.env.DEPLOY_PRIME_URL || process.env.NETLIFY_HOST;
+    const isProduction = process.env.CONTEXT === 'production';
+    const host = isProduction ? process.env.NETLIFY_HOST : process.env.DEPLOY_PRIME_URL;
+
+    console.log(`[Cloudinary] Using host: ${host}`);
 
     const {
       deliveryType,
@@ -37,8 +40,8 @@ module.exports = {
     } = inputs;
 
     if ( !host && deliveryType === 'fetch' ) {
-      console.warn(ERROR_NETLIFY_HOST_UNKNOWN);
-      console.log(EEROR_NETLIFY_HOST_CLI_SUPPORT);
+      console.warn(`[Cloudinary] ${ERROR_NETLIFY_HOST_UNKNOWN}`);
+      console.log(`[Cloudinary] ${ERROR_NETLIFY_HOST_CLI_SUPPORT}`);
       return;
     }
 
@@ -64,8 +67,8 @@ module.exports = {
     const imagesFiles = imagesDirectory.filter(file => !!path.extname(file));
 
     if ( imagesFiles.length === 0 ) {
-      console.warn(`No image files found in ${imagesPath}`);
-      console.log(`Did you update your images path? You can set the imagesPath input in your Netlify config.`);
+      console.warn(`[Cloudinary] No image files found in ${imagesPath}`);
+      console.log(`[Cloudinary] Did you update your images path? You can set the imagesPath input in your Netlify config.`);
     }
 
     try {
@@ -143,20 +146,20 @@ module.exports = {
       }));
     }
 
-    console.log('Done.');
+    console.log('[Cloudinary] Done.');
   },
 
   // 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({ constants, inputs, utils }) {
-    console.log('Replacing on-page images with Cloudinary URLs...');
+    console.log('[Cloudinary] Replacing on-page images with Cloudinary URLs...');
 
     const host = process.env.DEPLOY_PRIME_URL || process.env.NETLIFY_HOST;
 
     if ( !host ) {
-      console.warn(ERROR_NETLIFY_HOST_UNKNOWN);
-      console.log(EEROR_NETLIFY_HOST_CLI_SUPPORT);
+      console.warn(`[Cloudinary] ${ERROR_NETLIFY_HOST_UNKNOWN}`);
+      console.log(`[Cloudinary] ${ERROR_NETLIFY_HOST_CLI_SUPPORT}`);
       return;
     }
 
@@ -210,10 +213,10 @@ module.exports = {
     const errors = results.filter(({ errors }) => errors.length > 0);
 
     if ( errors.length > 0) {
-      console.log(`Done with ${errors.length} errors...`);
+      console.log(`[Cloudinary] Done with ${errors.length} errors...`);
       console.log(JSON.stringify(errors, null, 2));
     } else {
-      console.log('Done.');
+      console.log('[Cloudinary] Done.');
     }
   }
 

tests/on-build.test.js

@@ -14,13 +14,14 @@ describe('onBuild', () => {
 
   describe('Redirects', () => {
 
-    test('should create redirects with defaut fetch-based configuration', async () => {
+    test('should create redirects with defaut fetch-based configuration in production context', async () => {
       const imagesFunctionName = 'cld_images';
 
       fs.readdir.mockResolvedValue([imagesFunctionName]);
 
       process.env.SITE_NAME = 'cool-site';
       process.env.CLOUDINARY_CLOUD_NAME = 'testcloud';
+      process.env.CONTEXT = 'production';
       process.env.NETLIFY_HOST = 'https://netlify-plugin-cloudinary.netlify.app';
 
       const deliveryType = 'fetch';
@@ -65,6 +66,58 @@ describe('onBuild', () => {
       expect(redirects[2]).toEqual(defaultRedirect);
     });
 
+    test('should create redirects with defaut fetch-based configuration in deploy preview context', async () => {
+      const imagesFunctionName = 'cld_images';
+
+      fs.readdir.mockResolvedValue([imagesFunctionName]);
+
+      process.env.SITE_NAME = 'cool-site';
+      process.env.CLOUDINARY_CLOUD_NAME = 'testcloud';
+      process.env.CONTEXT = 'deploy-preview';
+      process.env.DEPLOY_PRIME_URL = 'https://deploy-preview-1234--netlify-plugin-cloudinary.netlify.app';
+
+      const deliveryType = 'fetch';
+      const imagesPath = '/images';
+
+      const defaultRedirect = {
+        from: '/path',
+        to: '/other-path',
+        status: 200
+      }
+
+      const redirects = [defaultRedirect];
+
+      const netlifyConfig = {
+        redirects
+      };
+
+      await onBuild({
+        netlifyConfig,
+        constants: {
+          PUBLISH_DIR: `.next/out${imagesPath}`
+        },
+        inputs: {
+          deliveryType
+        }
+      });
+
+      expect(redirects[0]).toEqual({
+        from: `${imagesPath}/*`,
+        to: `https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/${deliveryType}/f_auto,q_auto/${process.env.DEPLOY_PRIME_URL}/cld-assets${imagesPath}/:splat`,
+        status: 302,
+        force: true
+      });
+
+      expect(redirects[1]).toEqual({
+        from: `/cld-assets${imagesPath}/*`,
+        to: `${imagesPath}/:splat`,
+        status: 200,
+        force: true
+      });
+
+      expect(redirects[2]).toEqual(defaultRedirect);
+    });
+
   });
 
 });