[Vuejs]-Run Vue/vitejs and ASP.net core web API on same server

by

1👍

It is possible to achieve that (with similar result to VueCliMiddleware when using VueCLI), at least for .net core 5 and 6.

What you need to do is follow this blog post where you need to add and configure SpaServices in your Startup.cs file: https://blogs.taiga.nl/martijn/2021/02/24/integrating-vite-with-asp-net-core-a-winning-combination/

I got this working as well for my project but I had to make some changes in npm scripts because other routes where hijacked by SPA portion:

//Startup.cs
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
    }

    app.UseStaticFiles();

    app.UseRouting();

    app.UseResponseCaching();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");

    });

    if (env.IsDevelopment())
    {
        app.UseSpa(spa =>
        {
            // use 'build-dev' npm script
            spa.UseReactDevelopmentServer(npmScript: "build-dev");
        });
    }
}

// package.json
// new script "build-dev" for building vue in development mode
{
  "name": "vueapp",
  "version": "0.0.0",
  "scripts": {
    "dev": "echo Starting the development server && vite",
    "build": "vite build",
    "build-dev": "echo Building for development && vite build --mode development",
    "preview": "vite preview",
  },
  "dependencies": {
    "vue": "^3.2.25",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "eslint": "^8.5.0",
    "eslint-plugin-vue": "^8.2.0",
    "sass": "^1.45.0",
    "vite": "^2.7.2",
    "vue-eslint-parser": "^8.0.1"
  }
}

You can launch it from solution but I really prefer using dotnet watch run in terminal – you have hot reloading for asp.net stuff but the downside of this setup that hot reloading doesn’t work for Vue.

Anyway, give it a shot.

0👍

ASP.NET Core officially supports hosting a static files server.

    app.UseStaticFiles();

The default hosting folder is wwwroot.

So if you want to host it with the same server, you can simply configure your project to publish all the front-end vue stuff to the wwwroot folder.

Remember, to publish the front-end built files to wwwroot, not the source file.

And after publishing front-end code, simply start your web server and it works just fine.

You can create a binding to make Visual Studio auto run some npm build commands while building the ASP.NET Core project. So you can build once and start debugging.

0👍

Maybe try this template.
https://marketplace.visualstudio.com/items?itemName=MakotoAtsu.AspNetCoreViteStarter

before I always use vue + VueCliMiddleware + asp.net core so I try to use vite and
I found this while exploring and trying to use vite in asp.net core in visual studio 2022.

Leave a comment