ember-cli / broccoli-asset-rev

Broccoli plugin to add fingerprint checksums and CDN URLs to your assets
MIT License
87 stars 84 forks source link

Dynamically added assets prefix in the image URL - Ember-CLI #131

Open mockey-jockey opened 5 years ago

mockey-jockey commented 5 years ago

I am trying to load the app by using ember serve. Some of the images are not found error getting. In CSS :

background-image: url(assets/images/image.svg);

its redirected to

http://localhost:4200/assets/assets/images/image.svg 404 (Not Found)

because in this URL two assets name added that's why the image is not found, I don't know where this asset added.

when adding '/' in the prefix of URL am able to see the image in the app.

background-image: url(/assets/images/image.svg);

its redirected to

http://localhost:4200/assets/images/image.svg - working fine

How to avoid two assets name without using '/' as a prefix for assets. Kindly help anyone pls...

Charizard commented 4 years ago

@mockey-jockey Please add your config.

mockey-jockey commented 4 years ago
var localEnv = require('./local_environment');

module.exports = function (environment) {
  var ENV = {
    modulePrefix: '----------',
    environment: environment,
    rootURL: '/',
    baseURL: '/',
    locationType: 'auto',
    'ember-cli-mirage': {
      enabled: false
    }
  };

  // Local Properties
  try {
    Object.keys(localEnv.config).forEach(function (key) {
      ENV[key] = localEnv.config[key];
    });
  } catch (err) {
    console.log("config/local_environment.js not found");
  }

  //  Set cdnUrl property
  var a = ENV.featureFlags.cdn && ENV.featureFlags.cdn.xyz,
    b = ENV.featureFlags.cdn && ENV.featureFlags.cdn.xys;

  // Fetching Deployment ID to build output path
  if (process.argv.length) {
    let pathPrefix = a && a.enabled && a.pathPrefix || b && b.enabled && agentPortal.pathPrefix || '',
      checkForArg = `--output-path=dist/${pathPrefix}`,
      deploymentPath = process.argv.find(param => param.indexOf(checkForArg) !== -1),
      deploymentID = deploymentPath && deploymentPath.replace(checkForArg, `${pathPrefix}`) || "";

    if (deploymentID) {
      ENV.outputPath = deploymentID;
    }
  }

  if (a && a.enabled) {
    ENV.EmberENV.cdnUrl = a.url.replace("{deploymentPath}", ENV.outputPath ? `${ENV.outputPath}/` : "");
    ENV.EmberENV.assetUrl = a.webUrl.replace("{deploymentPath}", ENV.outputPath ? `${ENV.outputPath}/` : "");
  } else if (b && b.enabled) {
    ENV.EmberENV.cdnUrl = b.url.replace("{deploymentPath}", ENV.outputPath ? `${ENV.outputPath}/` : "");
    ENV.EmberENV.assetUrl = b.webUrl.replace("{deploymentPath}", ENV.outputPath ? `${ENV.outputPath}/` : "");
  } else {
    throw "Config Missing in local_environment.js";
  }
  console.log(`CDN URL => ${ENV.EmberENV.cdnUrl}`);
  console.log(`Non CDN Asset URL => ${ENV.EmberENV.assetUrl}`);

  if (environment === 'development') {
    // ENV.APP.LOG_RESOLVER = true;
    // ENV.APP.LOG_ACTIVE_GENERATION = true;
    // ENV.APP.LOG_TRANSITIONS = true;
    // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
    // ENV.APP.LOG_VIEW_LOOKUPS = true;
  }

  if (environment === 'test') {
    // Testem prefers this...
    ENV.baseURL = '/';
    ENV.locationType = 'none';

    ENV['ember-cli-mirage'] = {
      enabled: true
    };

    // keep test console output quieter
    ENV.APP.LOG_ACTIVE_GENERATION = false;
    ENV.APP.LOG_VIEW_LOOKUPS = false;

    ENV.APP.rootElement = '#ember-testing';
    ENV.APP.autoboot = false;

    ENV.EmberENV.cdnUrl = "";
    ENV.EmberENV.assetUrl = "";
  }

  return ENV;
};