deploy vite react app on azure webapp service or any alternative

Question

I have been working on two Vite React apps and everything went smoothly until I was asked to deploy these apps on Azure. I tried to deploy them, but it wasn't a success. I came to discover that React apps that were built with Create React App are supported, but not Vite React apps. However, I know it's not impossible since I've heard many times that it's doable. The question is, how?

I tried to SSH to my web app but I couldn't find a way to clone my github repo I when I first started in uploaded my files normally with azure deployment normal steps but when I try to upload it again to see my files when I SSH it will give me an error

Answer 1

I created a simple Vite react app. using command npm create vite@latest my-react-app --template

C:\Users\Vivek\Desktop\VS Code Floders>npm create vite@latest my-react-app --template
Need to install the following packages:
create-vite@5.1.0
Ok to proceed? (y) y
√ Select a framework: » React
√ Select a variant: » JavaScript

Scaffolding project in C:\Users\Vivek\Desktop\VS Code Floders\my-react-app...

Done. Now run:

  cd my-react-app
  npm install
  npm run dev #for running locally 

to deploy to Azure run commands:

  cd my-react-app
  npm install
  npm run build #it will create a dist folder.

upload all files and folders to GitHub repository

• make sure dist folder is also uploaded

Create a static web app and select GitHub repository and branch. and set app location to /dist.

• make sure to add engines in the package.json.
• As GitHub may detect lower version which may result in error.

package.json:

{
  "name": "my-react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "engines": {
    "node": ">=18.0.0"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.0.8"
  }
}

azure-static-web-apps-lively-ground-00661fe10.yml;

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          lfs: false
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LIVELY_GROUND_00661FE10 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} 
          action: "upload"
          app_location: "/dist" 
          api_location: "" 
          output_location: "" 
          

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LIVELY_GROUND_00661FE10 }}
          action: "close"

OUTPUT:

Zipping App Artifacts
Done Zipping App Artifacts
Uploading build artifacts.
Finished Upload. Polling on deployment.
Status: InProgress. Time: 0.0626303(s)
Status: InProgress. Time: 15.1233542(s)
Status: Succeeded. Time: 30.1727089(s)
Deployment Complete :)
Visit your site at: https://lively-ground-00661fe10.4.azurestaticapps.net
Thanks for using Azure Static Web Apps!
Exiting