Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disable auto-detection of a specific provider #1353

Open
armenr opened this issue May 6, 2024 · 3 comments
Open

Disable auto-detection of a specific provider #1353

armenr opened this issue May 6, 2024 · 3 comments
Labels
enhancement New feature or request

Comments

@armenr
Copy link

armenr commented May 6, 2024

We have a codebase that we build for multiple deployment targets, with multiple conditional configs.

We are prospecting AWS Amplify for this project, so we have a branch where we've introduced Amplify.

When we build this for mobile-only targets, we disable SSR in Nuxt...but ALL images fail to load for mobile targets. When deployed with SSR enabled (web targets), images load beautifully (and quickly, thanks for that! 🚀). For web, it works without issue on all web platforms across all device types (including mobile-web clients).

As I've been diving into debugging the issue for mobile-only targets, I've discovered that even in SSR-off/mobile-only mode, the problem is with the baseURL --> capacitor://localhost/_amplify/image?url=https:%2F%2F<SOME_DISTRIBUTION_ID>.cloudfront.net%2Fpublic%2Fiuhwa81h4jd-IMG_5904.jpeg&w=320&q=80

How can I explicitly disable the auto-detected AWS Amplify provider using some kind of environment variable or config? We're at a dead stop moving forward without knowing how to prevent this auto-detection behavior for mobile-only builds.

For context, we are using a custom provider to leverage a public-facing CloudFront CDN that caches from S3. We do that in the following way:

// providers/cloudfront-provider.ts

import { joinURL } from 'ufo'
import type { ProviderGetImage } from '@nuxt/image'
import { createOperationsGenerator } from '#image'

const operationsGenerator = createOperationsGenerator()

export const getImage: ProviderGetImage = (
  src,
  { modifiers = {}, baseURL } = {},
) => {
  if (!baseURL) {
    // also support runtime config
    baseURL = useRuntimeConfig().public.siteUrl
  }

  const operations = operationsGenerator(modifiers)

  return {
    url: joinURL(baseURL, src + (operations ? `?${operations}` : '')),
  }
}
// nuxt.config.ts

  image: {
    providers: {
      cloudfront: {
        name: 'cloudfront',
        provider: 'src/providers/cloudfront-provider.ts',
        options: {
          baseURL: `${customOutputs.custom.projectCDN.cloudfrontURL}`,
        },
      },
    },

... rest of config
@danielroe danielroe added the enhancement New feature or request label May 7, 2024 — with Volta.net
@armenr
Copy link
Author

armenr commented May 7, 2024

In the interim - is there some recommended way to get around this?

@armenr
Copy link
Author

armenr commented May 11, 2024

...help, please?

@armenr
Copy link
Author

armenr commented May 21, 2024

Thanks for all the help, folks! Really appreciate it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants