Open Closed

How to deploy ABP Application as a Virtual Application in IIS #4441

User avatar
0
hanntd created
  • ABP Framework version: v7.0.1
  • UI type: Blazor
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes
  • Exception message and stack trace:
  • Steps to reproduce the issue:
  1. Deploy Abp applications to IIS Server as a application under the root web site, because we have many projects on every environment (dev, test, production).
  2. Run the application the error show as above, it seem the framework doesn't support for relative path (~/)
Markdown supported.
Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Go to accepted answer
18 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    Did you check this: https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-7.0&tabs=visual-studio#app-base-path ?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    hanntd created

    Hi,

    Did you check this: https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-7.0&tabs=visual-studio#app-base-path ?

    Thanks for your information, I follow that guide and can configure for Blazor application but how we can configure for Auth and HttpHost as they don't have index.html file? Thanks, Dharma

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    I will check it out

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    It's a problem, we will fix it in the next version. your ticket was refunded.

    Please email me: shiwei.liang@volosoft.com, I will share the temporary solution code with you.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    hanntd created

    Thanks Liangshiwei

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    hanntd created

    Hi,

    It's a problem, we will fix it in the next version. your ticket was refunded.

    Please email me: shiwei.liang@volosoft.com, I will share the temporary solution code with you.

    Hi Shiwei Liang, I reopen this ticket and also attached the log from application folder and IIS, too. Kindly check from this link for log files: https://drive.google.com/drive/folders/1TuTIeSQPioxTj-sKotKtVaEPkGJiISIm?usp=sharing Thanks Dharma

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Can you try clearing the browser cookies or open a private window to try again?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    hanntd created

    I cleared browser now AuthServer and Swagger are ok to login and authorize but for Blazor still error: I changed in index.html of Blazor app for base href: This appsetting for blazor:

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    Try the following steps:

    • Add lang-initializer.js and style-initializer.js files to the Blazor's wwwroot folder
    • Update the BundleContributor
    • Run dotnet build and abp bundle

    lang-initializer.js

    window.afterLeptonXInitialization = function() {

    console.log("afterLeptonXInitialization");
    var isRtl = JSON.parse(localStorage.getItem("Abp.IsRtl"));
    var direction = isRtl ? "rtl" : "ltr";

    replaceStyleWith(
        createStyleUrl('layout-bundle', direction),
        `lpx-layout-bundle-style-${direction}`,
        `lpx-layout-bundle-style-${direction === 'rtl' ? 'ltr' : 'rtl'}`
    );
    replaceStyleWith(
        createStyleUrl('abp-bundle', direction),
        `lpx-abp-bundle-style-${direction}`,
        `lpx-abp-bundle-style-${direction === 'rtl' ? 'ltr' : 'rtl'}`
    );
    replaceStyleWith(
        createStyleUrl('blazor-bundle', direction),
        `lpx-blazor-bundle-style-${direction}`,
        `lpx-blazor-bundle-style-${direction === 'rtl' ? 'ltr' : 'rtl'}`
    );
    replaceStyleWith(
        createStyleUrl('font-bundle', direction),
        `lpx-font-bundle-style-${direction}`,
        `lpx-font-bundle-style-${direction === 'rtl' ? 'ltr' : 'rtl'}`
    );


    function createStyleUrl(theme, direction='ltr') {
        const styleName = direction === 'rtl' ? `${theme}.rtl` : theme;
        return `_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/${window.currentLayout}/css/${styleName}.css`
    }

    function createId(theme, type) {
        return theme && `lpx-theme-${type}-${theme}`;
    }

    function replaceStyleWith(path, id, previousId) {
        const link = document.createElement('link');
        link.href = path;
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.id = id;
        const prevElem = document.querySelector(`#${previousId}`);
        document.getElementsByTagName('head')[0].appendChild(link);
        if (previousId) {
            prevElem?.remove();
        }
        return link;
    }

    function loadThemeCSS(key, theme, themeOld, cssPrefix, direction='ltr') {
        const themeId = createId(theme, key);
        const previousThemeId = createId(themeOld, key);

        replaceStyleWith(createStyleUrl(cssPrefix + theme, direction), themeId, previousThemeId);
    }
};

    style-initializer.js

    window.afterLeptonXInitialization = function() {

    console.log("afterLeptonXInitialization");
    var isRtl = JSON.parse(localStorage.getItem("Abp.IsRtl"));
    var direction = isRtl ? "rtl" : "ltr";

    replaceStyleWith(
        createStyleUrl('layout-bundle', direction),
        `lpx-layout-bundle-style-${direction}`,
        `lpx-layout-bundle-style-${direction === 'rtl' ? 'ltr' : 'rtl'}`
    );
    replaceStyleWith(
        createStyleUrl('abp-bundle', direction),
        `lpx-abp-bundle-style-${direction}`,
        `lpx-abp-bundle-style-${direction === 'rtl' ? 'ltr' : 'rtl'}`
    );
    replaceStyleWith(
        createStyleUrl('blazor-bundle', direction),
        `lpx-blazor-bundle-style-${direction}`,
        `lpx-blazor-bundle-style-${direction === 'rtl' ? 'ltr' : 'rtl'}`
    );
    replaceStyleWith(
        createStyleUrl('font-bundle', direction),
        `lpx-font-bundle-style-${direction}`,
        `lpx-font-bundle-style-${direction === 'rtl' ? 'ltr' : 'rtl'}`
    );


    function createStyleUrl(theme, direction='ltr') {
        const styleName = direction === 'rtl' ? `${theme}.rtl` : theme;
        return `_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/${window.currentLayout}/css/${styleName}.css`
    }

    function createId(theme, type) {
        return theme && `lpx-theme-${type}-${theme}`;
    }

    function replaceStyleWith(path, id, previousId) {
        const link = document.createElement('link');
        link.href = path;
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.id = id;
        const prevElem = document.querySelector(`#${previousId}`);
        document.getElementsByTagName('head')[0].appendChild(link);
        if (previousId) {
            prevElem?.remove();
        }
        return link;
    }

    function loadThemeCSS(key, theme, themeOld, cssPrefix, direction='ltr') {
        const themeId = createId(theme, key);
        const previousThemeId = createId(themeOld, key);

        replaceStyleWith(createStyleUrl(cssPrefix + theme, direction), themeId, previousThemeId);
    }
};

    [YourProjectName]BundleContributor

    public class [YourProjectName]BundleContributor : IBundleContributor
{
    public void AddScripts(BundleContext context)
    {
        context.BundleDefinitions.RemoveAll(x => x.Source.Contains("lang-initializer.js"));
        context.BundleDefinitions.RemoveAll(x => x.Source.Contains("style-initializer.js"));

        context.Add("lang-initializer.js");
        context.Add("style-initializer.js");
    }

    public void AddStyles(BundleContext context)
    {
        context.Add("main.css", true);
    }
}

    PS, don't forget to update the appsettings.json file of DbMigrator project to update the Blazor project's RootUrl and update the database table.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    hanntd created

    Hi, I have done as you guided but still error:

    1. Added new script files and run dotnet build, abp bundle successful:
    2. Publish Blazor and run on IIS:
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    Did you update the BundleContributor?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    hanntd created

    Yes, already updated before publish blazor app

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    Can you try dotnet clean ,dotnet build and abp bundle again?

    You can share a project with me if the problem still exists, I will check it. shiwei.liang@volosoft.com

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    hanntd created

    I have sent email to you. Thanks

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    Sorry, that is my fault. I copied the wrong content. style-initializer.js should be :

    (function () {

    function isAlreadyLoaded(id) {
        return document.querySelector(`link[id^="lpx-theme-${id}-"]`)?.id;
    }

    function loadThemeCSS(key, event, cssPrefix) {
        const newThemeId = createId(event.detail.theme, key);
        const previousThemeId = createId(event.detail.previousTheme, key);
        const loadedCSS = isAlreadyLoaded(key);

        if (newThemeId !== loadedCSS) {
            leptonx.replaceStyleWith(
                createStyleUrl(cssPrefix + event.detail.theme),
                newThemeId,
                previousThemeId || loadedCSS
            );
        }
    }

    function createId(theme, type) {
        return theme && `lpx-theme-${type}-${theme}`;
    }

    window.initLeptonX = function (layout = currentLayout, defaultStyle = "dim") {
        window.currentLayout = layout;

        leptonx.globalConfig.defaultSettings =
            {
                appearance: defaultStyle,
                containerWidth: 'full',
            };

        leptonx.CSSLoadEvent.on(event => {
            loadThemeCSS('bootstrap', event, 'bootstrap-');
            loadThemeCSS('color', event, '');
        });

        leptonx.init.run();
    }

    const oldAfterLeptonXInitialization = window.afterLeptonXInitialization;

    window.afterLeptonXInitialization = function () {
        if(oldAfterLeptonXInitialization){
            oldAfterLeptonXInitialization();
        }
    }

    function createStyleUrl(theme, type) {

        if (isRtl()) {
            theme = theme + '.rtl';
        }

        if (type) {
            return `_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/${window.currentLayout}/css/${type}-${theme}.css`
        }
        return `_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/${window.currentLayout}/css/${theme}.css`;
    }

    function isRtl() {
        return document.documentElement.getAttribute('dir') === 'rtl';
    }
})();
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    hanntd created

    Hi Shiwei Liang, Thank you so much for your support. Finally, the problem is fixed and able to deploy to IIS successfully. Will this issue be fixed in the next version so that we can use default ABP Template and deploy to IIS as an application under the root domain? Thanks Dharma

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    Yes, we will fix it in the next patch version. (7.0.2)

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    hanntd created

    Yeah, that's a good news and waiting for this update. Thank you so much

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Assignee
User avatar liangshiwei
Labels
None yet
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.8.0-preview. Updated on September 16, 2026, 14:50
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.