Run Vue/vitejs and ASP.net core web API on same server

Question

In school we have a project where we are working with vite/vuejs as frontend and using ASP.NET core web API as the rest/backend.

I work on the backend/rest-api in visual studio and the frontend bit in VS Code. Right now to run the website, i have to start the ASP.net API in visual studio and then run the "npm run dev" command in vs code to start the website itself.

Those two are running on seperate "servers" and diffrent ports.

So my real question is, how can i make those two run on the same "server" and port. So when i run the project, i would like both the backend/rest-api and the frontend to run as "one".

I think the service is IIS.

Answer 1

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.

Answer 2

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.

Answer 3

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.