Getting this on the URL despite GitHub Actions deployment saying its going through: "Your web app is running and waiting for your content"

Kevin Roy 0 Reputation points
2024-08-27T00:40:45.3666667+00:00

revix-frontend-structure

I am trying to set up my code to be hosted. I set up Github actions and everytime I push it does build and deploy, but when I check out the url its "available" on it just tells me that it's not set up. Im using Node 20 and the app service is connected to my Github repo. Narrowing down the issue, I feel like the error is coming from generating my dist folder as not all assets are being moved over, leading me to beleive the js and css files generated in dist/index.html is incorrect. Is there some pressing issue in my vite.config.js or my yml file?

vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  base: "/", 

  build: {
    outDir: 'dist', 
    assetsDir: 'assets', 
    rollupOptions: {
      input: {
        main: 'src/main.jsx', 
      },
    },
  },

});


.github/workflows/yml


name: Build and deploy Node.js app to Azure Web App - Revix-Frontend-Code

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'

      - name: Install dependencies and build
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: List contents of dist directory
        run: ls -R ./dist

      - name: Zip artifact for deployment
        run: |
          mkdir -p release
          cp -r ./dist release/
          cd release
          zip -r ../release.zip dist

      - name: List contents of release.zip
        run: unzip -l release.zip

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v4
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    permissions:
      id-token: write 

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v4
        with:
          name: node-app

      - name: Unzip artifact for deployment
        run: unzip release.zip

      - name: Login to Azure
        uses: azure/login@v2
        with:
          client-id: //azure app serrvice client id
          tenant-id: //azure app service tenant id
          subscription-id: //azure app service subscription id

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v3
        with:
          app-name: 'Revix-Frontend-Code'
          slot-name: 'Production'
          package: './dist'

package.json scripts:

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "start": "vite"
  },


.gitignore

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?


Microsoft Deployment Toolkit
Microsoft Deployment Toolkit
A collection of Microsoft tools and documentation for automating desktop and server deployment. Previously known as Microsoft Solution Accelerator for Business Desktop Deployment (BDD).
888 questions
Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
7,679 questions
GitHub Training
GitHub Training
GitHub: A web-based hosting service for software development and version control using Git. Acquired by Microsoft in 2018.Training: Instruction to develop new skills.
43 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.