search

vendure-ecommerce / vendure

The commerce platform with customization in its DNA.
https://www.vendure.io
MIT License
5.41k stars 952 forks source link

File naming conflict when specifying custom logos with `setBranding` from `ui-devkit` #2372

Open basemhegazy opened 10 months ago

basemhegazy commented 10 months ago

Description

When using the setBranding function as per the instructions in the documentation to add custom logos and favicon, I get the error below. I also noticed that the logos get disabled when I set the value of hideVendureBranding to true.

Error: Source and destination must not be the same.

Screen Shot 2023-08-30 at 4 44 20 PM

I figured out that the problem was a file naming conflict. Custom images and files cannot have the same filename as the existing original files. In my case, the favicon.ico . file had the same filename as the original, and this was causing the error. After renaming the file to something like custom-favicon.ico , the problem was solved. I was able to reproduce the error by renaming it back to favicon.ico . I also had to set hideVendureBranding: false in order for the custom logos to show.

To Reproduce

  1. Ensure that you have Vendure v2.1.0-next.2 installed.
  2. Update your AdminUiPlugin.init section in vendure-config.ts configuration file to match the following:
    AdminUiPlugin.init({
      route: "admin",
      port: 3002,
      adminUiConfig: {
        brand: "My Brand",
        hideVendureBranding: true,
        hideVersion: false,
      },
      app: compileUiExtensions({
        baseHref: "/admin/",
        outputPath: path.join(__dirname, "../admin-ui"),
        extensions: [
          setBranding({
            // The small logo appears in the top left of the screen›
            smallLogoPath: path.join(
              __dirname,
              "custom-images/logo-top.webp"
            ),
            // The large logo is used on the login page
            largeLogoPath: path.join(
              __dirname,
              "custom-images/logo-login.webp"
            ),
            faviconPath: path.join(
              __dirname,
              "custom-images/favicon.ico"
            ),
          }),
        ],
        devMode: true,
      }),
    }),
  1. Make sure your custom images have the same naming as Vendure defaults (favicon.ico, logo-top.webp, logo-login.webp).
  2. Run npm run dev and check the error message.
          setBranding({
            // The small logo appears in the top left of the screen›
            smallLogoPath: path.join(__dirname, "custom-images/logo-top.webp"),
            // The large logo is used on the login page
            largeLogoPath: path.join(
              __dirname,
              "custom-images/logo-login.webp"
            ),
            faviconPath: path.join(__dirname, "custom-images/favicon.ico"),
          }),
  1. Rename the files to something else like (custom-logo-top.webp, custom-logo-login.webp, and custom-favicon.ico). Then, run npm run dev again and see if the error is gone.
          setBranding({
            // The small logo appears in the top left of the screen›
            smallLogoPath: path.join(
              __dirname,
              "custom-images/custom-logo-top.webp"
            ),
            // The large logo is used on the login page
            largeLogoPath: path.join(
              __dirname,
              "custom-images/custom-logo-login.webp"
            ),
            faviconPath: path.join(
              __dirname,
              "custom-images/custom-favicon.ico"
            ),
          }),
  1. Go to your admin dashboard and check if you can see the logos. If not, change the hideVendureBranding value to false. Then, check again. You should now be able to see your custom logos.You may still only see your custom favicon.ico, though.

Run your test with the following configurations first to reproduce the problem:

      adminUiConfig: {
        brand: "My Brand",
        hideVendureBranding: true,
        hideVersion: false,
      },

If you cannot see your logos change it to:

      adminUiConfig: {
        brand: "My Brand",
        hideVendureBranding: false,
        hideVersion: false,
      },

Expected behavior

Vendure must show the custom logos and the favicon from setBranding along with your branding options from the adminUiConfig if the hideVendureBranding is set to true.

Environment

KariNarhi commented 2 weeks ago

It's been about a year since the original post, and I also noticed this error recently when I started to work with Vendure for the first time.

I'd like to add that the custom brand-name also gets overwritten by Vendure brand-name when hideVendureBranding:false

This might be intentional, and it would be logical if the brand-name was not set.

But shouldn't the logic be that if the brand-field is not an empty string or undefined, then the custom brand name should always overwrite the Vendure-brand name, regardless of hideVendureBranding?

Another side-issue is that if the brand name is too long, the Admin UI login-form text wraps but there is no spacing between the lines.

EDIT: Sorry, the issue I was referencing to was about the logos disappearing with hideVendureBranding:true, not the file-naming conflict.

Environment