How to use Index razor page instead of index.html

[muffadalis]

Hi,

I am trying to use Index.cshtml as my start page instead of index.html as I want the initial state to be rendered from the server, these are application settings like themes etc based on the host name. I don't want SSR, as once the site is loaded Vue takes over just like any other SPA application. I have tried a few things but now luck

• I removed index.html file from the public folder but Vue Cli started complaining that the file is missing.

• I also tried setting indexPath to a blank value.

Also, how do I tell the path for the main.js files in the index.cshtml file

Can any one help me set it up?

Thanks.

[liborpansky]

Hi, before I used the same configuration, when Vue CLI 3.0 came out, client side application logic changed and I wasn't able to load ASP.NET Core settings in the client app anymore.
I resolved the problem by exposing ASP.NET Core settings in API Controller:

public class ConfigurationController : Controller
{
    private readonly AppConfiguration _config;

    public ConfigurationController(IOptionsSnapshot<AppConfiguration> options)
    {
        _config = options.Value;
    }

    public IActionResult Index()
    {
        string result = $@"const AspNetCoreConfiguration = {{ appOrigin: '{_config.AppOrigin}', authority: '{_config.Authentication.Authority}' }}";
        return new JavaScriptResult(result);
    }

    public class JavaScriptResult : ContentResult
    {
        public JavaScriptResult(string script)
        {
            this.Content = script;
            this.ContentType = "application/javascript";
        }
    }
}

And then inserting a script tag in vue index.html file:

 <script src="/Configuration"></script>

If you prefer to load configuration directly from server with razor and then load vue app, I suggest you to check out aspnetcore-vue template for multi-page vue integration with ASP.NET Core and inserting client side app to razor in following way (even if he's not using CLI 3.0+):

@section scripts {

    <environment names="Development,Production,Staging">
        <script src="~/dist/js/template/bundle.js" asp-append-version="true"></script>
    </environment>
}

Good luck!
If you figure out a better way how to integrate CLI 3.0+ Vue app directly with razor, I would be happy to check another solution ;)

[muffadalis]

Hi @liborpansky,

Thanks for the prompt reply. I looked at the aspnetcore-vue template repo and it is using webpack which I want to avoid.

Below is my attempt to get it working with CLI 3.0+. but it is not perfect.

• Add vue.config.js
  module.exports = { filenameHashing: false, outputDir: '../wwwroot' }

• Create a new file called Index.cshtml
  Index.cshtml.cs.txt
  Index.html.txt

• Added a watch script to package.json file
  "watch": "vue-cli-service build --mode development --watch"

I lose the hot-reload ability with this :(

[muffadalis]

I finally ended up using the SettingsController approach.

Thanks for your help.

[SomeoneIsWorking]

This limitation comes from vue-cli right? Oh man I also went with SettingsController approach but it will be hard to explain to boss man.