This content originally appeared on DEV Community and was authored by Fussionlabs
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>
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
or
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
This content originally appeared on DEV Community and was authored by Fussionlabs
Fussionlabs | Sciencx (2025-08-09T09:23:50+00:00) Developing Scalable Multi-Page Web Apps with ASP.NET and Vite.js. Retrieved from https://www.scien.cx/2025/08/09/developing-scalable-multi-page-web-apps-with-asp-net-and-vite-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.