DEV Community

Cover image for Developing Scalable Multi-Page Web Apps with ASP.NET and Vite.js
Fussionlabs
Fussionlabs

Posted on

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

#webdev #programming #dotnet #vite

Step 1: Prepare the Project for Publishing

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>
Enter fullscreen mode Exit fullscreen mode

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: '/',
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Step 2. Deployment on Windows

  1. Install .NET Hosting Bundle

    Download and install the .NET Hosting Bundle to enable ASP.NET Core apps to run on IIS.

  2. Configure IIS

  3. Create a new site in IIS pointing to the publish folder.

  4. Ensure the web.config file is present.

  5. Set the application pool to No Managed Code and use Integrated Pipeline.

  6. Copy Files

    Copy the contents of publish to your IIS site directory (e.g., C:\inetpub\wwwroot\myapp).

  7. Verifying Deployment

  8. Open a browser and navigate to your site URL (e.g., http://localhost or your domain).

  9. If everything is set up correctly, you should see your ASP.NET app with the Vite-powered frontend.

  10. 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>
Enter fullscreen mode Exit fullscreen mode

2. Copy Files 

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

3. Run the App 

dotnet /var/www/myapp/myapp.dll
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Enable and start the service:

sudo systemctl enable myapp
sudo systemctl start myapp
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

Restart Nginx:

sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

5. Verifying Deployment

Check if the app is running:

sudo systemctl status myapp
Enter fullscreen mode Exit fullscreen mode

Or if running manually:

ps aux | grep dotnet
Enter fullscreen mode Exit fullscreen mode

6. Test the app locally: 

curl http://localhost:5000
Enter fullscreen mode Exit fullscreen mode

7. Test via browser:

Open your browser and go to:

http://yourdomain.com
Enter fullscreen mode Exit fullscreen mode

or

http://<server-ip>
Enter fullscreen mode Exit fullscreen mode

8. Check logs if issues arise:

App logs:

journalctl -u myapp
Enter fullscreen mode Exit fullscreen mode

Nginx logs:

sudo tail -f /var/log/nginx/error.log
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)