i have been trying to deploy this react/.net. it uses vite to build. i am using github actions to run the yaml. my yaml looks like this so far: what IS working is that i go to http://mysitename-xxxxxxx.scm.eastus2-01.azurewebsites.net’ and i see all the files minified or whatever… but when I go to the site without that .scm, i get NO CONTENT – standard message from azure. here’s the yaml.
name: Build and deploy full-stack app to Azure Web App
on:
push:
branches:
- master
workflow_dispatch:
jobs:
build:
runs-on: windows-latest
env:
CI: false
steps:
- uses: actions/checkout@v2
- name: Set up .NET Core
uses: actions/setup-dotnet@v1
with:
dotnet-version: ‘7.0.x’
- name: Install dotnet-ef tool
run: dotnet tool install --global dotnet-ef --version 7.*
- name: Add .NET tools to PATH
run: echo “${HOME}/.dotnet/tools” >> $GITHUB_PATH
- name: Restore .NET dependencies
run: dotnet restore CharityProject.sln
- name: Install Microsoft.EntityFrameworkCore.Design package
run: dotnet add CharityProject.Web/CharityProject.Web.csproj package Microsoft.EntityFrameworkCore.Design --version 7.0.0
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: ‘18.x’
- name: Install frontend dependencies
run: |
cd CharityProject.Web/ClientApp
npm install
- name: Build frontend
run: |
cd CharityProject.Web/ClientApp
npm run build
- name: Wait for build to complete
run: sleep 10
- name: Verify frontend build output
run: |
Write-Host “Listing dist folder contents”
Get-ChildItem -Path CharityProject.Web/ClientApp/dist
- name: Verify dist folder contents
run: |
Write-Host “Listing dist folder contents”
Get-ChildItem -Path CharityProject.Web/ClientApp/dist
- name: Copy frontend build to wwwroot
run: |
mkdir -p CharityProject.Web/wwwroot
cp -r CharityProject.Web/ClientApp/dist/* CharityProject.Web/wwwroot/
shell: bash
- name: Verify wwwroot contents
run: |
Write-Host “Listing wwwroot folder contents”
Get-ChildItem -Path CharityProject.Web/wwwroot
- name: Build with dotnet
run: dotnet build CharityProject.sln --configuration Release
- name: Publish Web Project
run: dotnet publish CharityProject.Web/CharityProject.Web.csproj -c Release -o myapp
- name: Verify myapp contents
run: |
Write-Host “Listing myapp folder contents”
Get-ChildItem -Path myapp
- name: Verify myapp/wwwroot contents
run: |
Write-Host “Listing myapp/wwwroot folder contents”
if (Test-Path -Path myapp/wwwroot) {
Get-ChildItem -Path myapp/wwwroot
} else {
Write-Host “myapp/wwwroot directory does not exist.”
}
exit 0
- name: Apply database migrations
run: dotnet ef database update --project CharityProject.Data/CharityProject.Data.csproj --startup-project CharityProject.Web/CharityProject.Web.csproj
env:
ConnectionStrings__DefaultConnection: ${{ secrets.DATABASE_CONNECTION_STRING }}
- name: Upload artifact for deployment job
uses: actions/upload-artifact@v2
with:
name: .net-app
path: myapp
deploy:
runs-on: windows-latest
needs: build
environment:
name: ‘Production’
url: ‘http://mysitename-xxxxxxx.eastus2-01.azurewebsites.net’
steps:
- name: Download artifact from build job
uses: actions/download-artifact@v2
with:
name: .net-app
- name: Deploy to Azure Web App
id: deploy-to-webapp
uses: azure/webapps-deploy@v2
with:
app-name:‘myappservicename’
slot-name: ‘Production’
publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE }}
package: .
and here's the vite.config.js.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
strictPort: true,
proxy: {
'/api': {
target: 'http://localhost:5091',
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^/api/, '/api')
},
'/uploads': {
target: 'http://localhost:5091',
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^/uploads/, '/uploads'),
},
}
},
build: {
outDir: 'dist', // Specify the output directory for the build
rollupOptions: {
// Customize rollup options if necessary
},
},
});
and here’s the package.json that is inside the clientapp:
{
"name": "clientapp",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.10.5",
"@mui/icons-material": "^5.16.1",
"@mui/lab": "^5.0.0-alpha.172",
"@mui/material": "^5.16.1",
"axios": "^1.6.8",
"bootstrap": "^5.3.3",
"react": "^18.2.0",
"react-confirm": "^0.3.0-7",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.3",
"semantic-ui-react": "^2.1.5"
},
"devDependencies": {
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@vitejs/plugin-react": "^4.2.1",
"vite": "^5.2.0"
}
}.
and here is program.cs:
using Microsoft.Extensions.FileProviders;
using System.IO;
namespace CharityProject.Web;
public class Program
{
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
var CookieScheme = "CharityProjectScheme";
builder.Services.AddControllersWithViews();
builder.Services.AddCors(options =>
{
options.AddPolicy("AllowSpecificOrigin",
builder =>
{
builder.WithOrigins("http://localhost:3000","https://mysite-xxxxx.eastus2-01.azurewebsites.net/","https://mysite-xxxxxx.eastus2-01.azurewebsites.net")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials();
});
});
builder.Services.AddAuthentication(CookieScheme)
.AddCookie(CookieScheme, options =>
{
options.LoginPath = "/admin/loginAdmin";
});
builder.Services.AddSession();
var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
app.UseHsts();
}
// Middleware order is important
//app.UseStaticFiles();
// Serve static files from ClientApp/dist
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), "ClientApp", "dist")),
RequestPath = ""
});
app.UseRouting();
app.UseCors("AllowSpecificOrigin"); // Use the specific CORS policy
app.UseAuthentication();
app.UseAuthorization();
app.UseSession();
app.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
app.MapFallbackToFile("index.html");
app.Run();
}
}