Login/Register
In a Blazor Application, how can I make the base URL different depending whether the application is executing on GitHub or my local machine?
Asked Answered
githubconfigurationblazorenvironmentbase-url
L

2

7

I have a blazor application which is being hosted on GitHub pages.

This is the index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Bitcoin Challenge Blazor App</title>
    <base href="/BitcoinChallengeBlazor/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

On GitHub pages, the base needs to be <base href="/BitcoinChallengeBlazor/" />. However, when developing locally, the base needs to be <base href="/" />.

In theory, I could just change it and tell git that this change belongs to a different changeset. But it seems to me there should be a better way to do this which will include the correct value according to the environment, possibly using launchSettings.json or appsettings.json.

... but it's not obvious to me how I could make values from either/both of those files available in that exact context.

Any ideas?

Leaven answered 24/6, 2020 at 12:4 Comment(6)
No is not possible. You need an index.html per environment – Idioglossia
@aguafrommars, Okay, then is there a good/easy/best way to implement an index.html per environment and to detect whether my environment is github, a local machine, or potentially something else? – Leaven
I don't see else than creating a tool replacing the <base href tag when deploy on an env. Maybe tool like Octopus deploy can do that or a github action. Or create each index.html per env. and choose the good one for the dest env on deploy by replacing index.html with a script. – Idioglossia
Jan. 2021 and there is no better solution? – Softcover
This is a very basic scenario, and still there is no solution without workarounds. Very non-Microsoft-like and non-dev-friendly.... Then again, that's the path they took with the whole .net core. Disappointing after using the amazing .Net Framework for so many years. – Steadfast
I tried to use xdt transformation and replace on deployment but it is still not what i wanted. – Suspiration
Z
2

I found a workaround.

Generate <base href="..." > tag on runtime:

  • Place <base href="/BitcoinChallengeBlazor/"> tag if any matches:
    • url pathname starts with /BitcoinChallengeBlazor/
    • url pathname is /BitcoinChallengeBlazor
  • Otherwise place <base href="/"> tag
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>APPNAME</title>
    <script>
        var baseTag = document.createElement("base");
        var appRoot = "/BitcoinChallengeBlazor/";
        var path = document.location.pathname;
        baseTag.href = (path.indexOf(appRoot) === 0 || path + "/" === appRoot) ? appRoot : "/";
        document.head.appendChild(baseTag);
    </script>
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="APPNAME.Client.styles.css" rel="stylesheet" />
</head>
Zwieback answered 29/10, 2021 at 12:43 Comment(0)
S
0

Using PowerShell to modify the index.html file:

$PathToWebServer = "\\web05\wwwroot\client-apps\tenant-1\wwwroot\index.html"
$StringToFind ='<base href="/" />'
$StringToReplace ='<base href="/client-apps/tenant-1/" />'

(Get-Content -path $PathToWebServer -Raw) -replace $StringToFind,$StringToReplace | Set-Content -Path $PathToWebServer
Softcover answered 20/10, 2021 at 13:55 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.