DEV Community: Fussionlabs

Developing & Deploying Scalable Multi-Page Web Apps with ASP.NET and Vite.js using (DotNet Vite Generator)

Fussionlabs — Sun, 12 Oct 2025 09:47:15 +0000

Dotnet + Vite MVC project Generator

This PowerShell script automates the setup of a modern ASP.NET MVC project integrated with Vite as the frontend build tool. It allows you to quickly scaffold a .NET MVC application with your choice of frontend frameworks (React, Vue, Svelte, Angular, etc.), and automatically wires up the Vite dev/build process with .NET's static file serving.

Features

Interactive setup: Prompts for your project name and framework choices.
Frontend integration: Supports major frameworks like React, Vue, Svelte, Angular, Solid, Preact, Qwik, Marko, Vanilla JS/TS, and more.
Automatic Vite configuration: Sets up Vite with the correct plugins, directory structure, and build output.
.NET MVC enhancements: Modifies controllers, views, and adds helpers for Vite asset management.
Scaffolds boilerplate: Generates navigation, layout, starter pages, and example API endpoints.
Angular special handling: Supports Angular CLI, zone.js configuration, CSS preprocessors, and SSR/SSG.
Cross-platform: Designed for use on Windows with PowerShell.

Prerequisites

For Angular projects, Angular CLI will be installed if not present.

Usage

Download the script:

Download dotnetvite.ps1

Or clone this repository:

 git clone https://github.com/fussionlab/dotnetvite.git
 cd dotnetvite

Run the script in PowerShell:

   # Optionally, set the execution policy to allow script running
   Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
   ./dotnetvite.ps1

Follow the prompts:

Enter your project name.
Select the frontend framework and variant (e.g., React + TypeScript).
For Angular, answer additional configuration questions.

Wait for the script to scaffold your project.
- The script will generate the ASP.NET MVC app, configure Vite, install dependencies, and set up the frontend.
Start development servers:

In two terminals:

.NET backend:
```
 dotnet run
```
Frontend (Vite):
```
 cd ClientApp
 npm run dev
```

Project Structure

YourProject/
├── Controllers/
├── Models/
├── Views/
├── Helpers/
│   └── ViteManifest.cs
├── ClientApp/
│   ├── src/
│   ├── public/
│   ├── vite.config.js|ts
│   └── ...
├── Program.cs
├── YourProject.csproj
└── ...

Supported Frontend Frameworks

React (JavaScript, TypeScript, SWC)
Vue
Svelte
Solid
Preact
Qwik
Marko
Lit
Angular
Vanilla JS/TS

How it works

The script generates a new ASP.NET MVC project and adjusts controllers, layout, and view files to enable seamless integration with Vite.
It scaffolds the frontend in the ClientApp folder using your selected framework and configures Vite for HMR (hot module replacement) during development.
A helper (ViteManifest.cs) is used to load built JS/CSS chunks in production.
MVC views are set up to correctly include Vite assets in both development and production.

Notes & Tips

The script is intended for new projects. You may adapt it for existing projects, but review the file operations carefully.
For Angular, additional questions allow you to customize zone.js, SSR, and CSS preprocessors.
On first run, dependencies are installed automatically. You can re-run npm install in ClientApp later as needed.

Troubleshooting

If you see permission errors running the script, try launching PowerShell as Administrator or adjust your execution policy:

  Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

For Angular CLI install errors, try restarting your terminal after install.

License

MIT

Credits

Inspired by Vite and ASP.NET Core.
Script by @fussionlab.

Contributing

PRs and suggestions are welcome! Please open issues or pull requests on GitHub.

Developing Scalable Multi-Page Web Apps with ASP.NET and Vite.js (Windows & Linux/macOS)

Fussionlabs — Sat, 09 Aug 2025 12:23:46 +0000

Creating a modern multi-page web application that combines the power of ASP.NET for backend logic and Vite.js for frontend development offers a fast, modular, and scalable solution. This guide walks you through the setup, starting with the essential dependencies.

Step 1: Dependencies

To get started, make sure you have the following installed:

Required Tools

.NET SDK (7.0 or later)
Node.js (v18 or later)
Vite.js (installed via npm)
A code editor like Visual Studio Code
Project Structure Your project will be structured like this: /MyApp /ClientApp ← Vite.js frontend /Controllers ← ASP.NET MVC controllers /Models ← ASP.NET Model /Properties ← ASP.NET launch setting /Views ← Razor views (optional) /wwwroot ← Final build path Program.cs Startup.cs or minimal hosting

1: Set Up ASP.NET Core Backend

Create a new ASP.NET Core Web App (MVC or Empty):

dotnet new web -n MyApp
cd MyApp
code .

2. Configure Program.cs to serve static files and fallback to index.html in production:


var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews();
var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
    app.UseStaticFiles();
    app.MapFallbackToFile("index.html");
}
app.UseRouting();
app.MapControllers();
app.Run();

3. Setup Routing Controller for Client App

Modify Controllers/HomeController.cs as follows:

using Microsoft.AspNetCore.Mvc;
public class HomeController : Controller
{
    [HttpGet("{*url}", Order = int.MaxValue)]
    public IActionResult Index(string url)
    {
        return View();
    }
}

You can remove the default Privacy() action and its view since this will be handled by your SPA.

Step 2: Add WeatherForecast API

Create WeatherForecastController.cs Controller

Should create controller inside

/Controller/Api/WeatherForecastController.cs

using Microsoft.AspNetCore.Mvc;

namespace MyApp.Controllers.Api; // change the namespace

[ApiController]
[Route("api/[controller]")]
public class WeatherForecastController : ControllerBase
{
    private static readonly string[] Summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild",
        "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };
    private readonly ILogger<WeatherForecastController> _logger;

    public WeatherForecastController(ILogger<WeatherForecastController> logger)
    {
        _logger = logger;
    }
    [HttpGet]
    public IEnumerable<WeatherForecast> Get()
    {
        return Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
        });
    }
}

Create a Model for the Controller

Should create model inside /Models/WeatherForecast.cs

namespace MyApp.Models // change the namespace

public class WeatherForecast
{
    public DateOnly Date { get; set; }
    public int TemperatureC { get; set; }
    public string? Summary { get; set; }
    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}

Update Razor Views

Clear all inside the /Views/Home/Index.cshtml and add:

@{
    Layout = "_Layout";
}

Modify the _Layout file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@ViewData["Title"] - MyApp</title>

  <!-- Only for the React Refresh, for other templates remove this -->
  <script type="module">
    import { injectIntoGlobalHook } from "http://localhost:5173/@react-refresh";
    injectIntoGlobalHook(window);
    window.$RefreshReg$ = () => {};
    window.$RefreshSig$ = () => (type) => type;
  </script>
  <!-- End Refresh -->

  <script type="module" src="http://localhost:5173/@vite/client"></script>
</head>
<body>
  @RenderBody()

  <script type="module" src="http://localhost:5173/src/main.tsx"></script>
  @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Here I use React template in Vite so we need to add the React refresh lines. For other templates we can remove them.

Step 3: Set Up React Frontend with Vite

Create your Vite app:

npm create vite@latest ClientApp

Package name: clientapp
Template: react, react-ts, or vue (your choice)

Navigate and install dependencies:


cd ClientApp
npm i
npm i react-router axios

Recommended Folder Structure

/src /components ← Header, Footer /pages ← Home, WeatherList main.tsx App.tsx

Setup Axios API: /src/api/weather.tsx

import axios from "axios"; //can use JavaScript Fetch

export const getWeatherForecast = () =>
  axios.get("/api/weatherforecast").then((res) => res.data);
// fetch()

Create Home Page and Weather Page

import { useEffect, useState } from "react";
import { getWeatherForecast } from "../api/weather";

function WeatherList() {
  const [forecasts, setForecasts] = useState([]);

  useEffect(() => {
    getWeatherForecast().then(setForecasts);
  }, []);

  return (
    <div>
      <h2>Weather Forecast</h2>
      <ul>
        {forecasts.map((f, i) => (
          <li key={i}>
            {f.date}: {f.summary} ({f.temperatureC}°C)
          </li>
        ))}
      </ul>
    </div>
  );
}
export default WeatherList;

function Home() {
  return (
    <div className="container mt-5">
      <div className="row justify-content-center">
        <div className="col-md-8 text-center">
          <h1 className="mb-4">Welcome to the Movie Application!</h1>
          <p className="lead">Discover, explore, and enjoy our collection of movies.</p>
          <p>Use the navigation bar to browse through different sections.</p>
        </div>
      </div>
    </div>
  );
}
export default Home;

Configure Routing in /src/App.tsx

import { BrowserRouter, Routes, Route } from "react-router";
import { WeatherList } from "./pages/WeatherList";
import Home from "./pages/Home";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/weather" element={<WeatherList />} />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

Final Step: Run the App

Open two terminals:

Terminal 1: ASP.NET Core Backend

dotnet dev-certs https --trust
dotnet watch run
# for https
dotnet watch -lp https

Terminal 2: React Frontend with Vite

cd ClientApp
npm run dev

In single Powershell based run both at a time


Start-Process -WorkingDirectory ".\ClientApp" -NoNewWindow -FilePath "powershell" -ArgumentList "npm run dev"
dotnet watch run

Summary
You now have a scalable, modern full-stack application using:

ASP.NET Core for APIs and static file hosting
React (or other template) + Vite for fast frontend development
Axios + React Router for API calls and navigation
This setup is easily extendable to include authentication, advanced state management, and deployment pipelines.

Deploying Scalable Multi-Page Web Apps with ASP.NET and Vite.js

Fussionlabs — Sat, 09 Aug 2025 09:23:50 +0000

Step 1: Prepare the Project for Publishing

For Developing check link

1. Update myapp.csproj

Add the following target to your .csproj file to include Vite’s build output in the publish directory:

first add this line in PropertyGroup


<PropertyGroup>
...
 <NpmRoot>ClientApp</NpmRoot>
...
</PropertyGroup>
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
  <ItemGroup>
    <DistFiles Include="$(NpmRoot)build\**" />
    <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
      <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
    </ResolvedFileToPublish>
  </ItemGroup>
</Target>

This ensures that Vite’s output is copied to wwwroot during publishing.

2: Configure Vite for Production

Update your vite.config.js:

export default {
  build: {
    outDir: 'build',
    emptyOutDir: true,
  },
  base: '/',
};

This configuration ensures Vite outputs production-ready assets to the build folder.

3: Build and Publish

Run the following commands:

  # Build frontend
  cd ClientApp
  npm install
  npm run build

  # Publish backend
  cd ..
  dotnet publish -c Release

This will generate a publish-ready version in bin/Release/netX/publish.

Step 2. Deployment on Windows

Install .NET Hosting Bundle

Download and install the .NET Hosting Bundle to enable ASP.NET Core apps to run on IIS.
Configure IIS
Create a new site in IIS pointing to the publish folder.
Ensure the web.config file is present.
Set the application pool to No Managed Code and use Integrated Pipeline.
Copy Files

Copy the contents of publish to your IIS site directory (e.g., C:\inetpub\wwwroot\myapp).
Verifying Deployment
Open a browser and navigate to your site URL (e.g., http://localhost or your domain).
If everything is set up correctly, you should see your ASP.NET app with the Vite-powered frontend.
If you see a blank page or errors:
- Check the IIS logs (C:\inetpub\logs\LogFiles)
- Ensure the application pool is running
- Confirm that the web.config file is present and correctly configured

Step 3: Deployment on Linux/macOS

1. Install .NET Runtime


wget https://dotnet.microsoft.com/download/dotnet/scripts/v1/dotnet-install.sh
chmod +x dotnet-install.sh
./dotnet-install.sh --runtime aspnetcore --version <your_version>

2. Copy Files

cp -r bin/Release/netX/publish/* user@yourserver:/var/www/myapp

3. Run the App

dotnet /var/www/myapp/myapp.dll

Or create a systemd service:

[Unit]
Description=My ASP.NET App

[Service]
WorkingDirectory=/var/www/myapp
ExecStart=/usr/bin/dotnet /var/www/myapp/myapp.dll
Restart=always
RestartSec=10
SyslogIdentifier=myapp
User=www-data
Environment=ASPNETCORE_ENVIRONMENT=Production

[Install]
WantedBy=multi-user.target

Enable and start the service:

sudo systemctl enable myapp
sudo systemctl start myapp

4. Configure Nginx

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass         http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Restart Nginx:

sudo systemctl restart nginx

5. Verifying Deployment

Check if the app is running:

sudo systemctl status myapp

Or if running manually:

ps aux | grep dotnet

6. Test the app locally:

curl http://localhost:5000

7. Test via browser:

Open your browser and go to:

http://yourdomain.com

http://<server-ip>

8. Check logs if issues arise:

App logs:

journalctl -u myapp

Nginx logs:

sudo tail -f /var/log/nginx/error.log

Final Checklist

Vite build output configured and generated
.csproj includes Vite build files in publish
ASP.NET app published with frontend assets
Windows: IIS configured and hosting bundle installed
Linux/macOS: .NET runtime installed, app running via systemd or manually
Nginx configured for reverse proxy