Azure App service deploy with React + Vite

Question

I'm deploying a frontend application made with React + Vite + Typescript. When the artifact is loaded onto App Service, i get the following error:

A P P   S E R V I C E   O N   L I N U X
Documentation: http://aka.ms/webapp-linux
NodeJS quickstart: https://aka.ms/node-qs
NodeJS Version : v18.16.0
Note: Any data outside '/home' is not persisted
Starting OpenBSD Secure Shell server: sshd.
Starting periodic command scheduler: cron.
Cound not find build manifest file at '/home/site/wwwroot/oryx-manifest.toml'
Could not find operation ID in manifest. Generating an operation id...
Build Operation ID: 42ccecfd-8536-418a-9db2-5d5949254eb9
Environment Variables for Application Insight's IPA Codeless Configuration exists..
Writing output script to '/opt/startup/startup.sh'
Running #!/bin/sh
# Enter the source directory to make sure the script runs where the user expects
cd "/home/site/wwwroot"
export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
if [ -z "$PORT" ]; then
        export PORT=8080
fi
PATH="$PATH:/home/site/wwwroot" npm run dev
npm info using npm@9.6.4
npm info using node@v18.16.0
> bur-portal-frontend@0.0.0 dev
> vite
npm http fetch GET 200 https://registry.npmjs.org/npm 1456ms (cache updated)
(node:76) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/site/wwwroot/node_modules/.bin/vite:2
import { performance } from 'node:perf_hooks'
^^^^^^
SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47
Node.js v18.16.0
npm notice
npm notice New minor version of npm available! 9.6.4 -> 9.8.1
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v9.8.1>
npm notice Run `npm install -g npm@9.8.1` to update!
npm notice

As you can see, the error comes from the Vite library and I just can't seem to figure out how to get around the problem. These are the libraries I'm using, + Node 18.12.1:

├── @types/react-dom@18.2.6
├── @types/react@18.2.14
├── @typescript-eslint/eslint-plugin@5.61.0
├── @typescript-eslint/parser@5.61.0
├── @vitejs/plugin-react@4.0.2
├── axios@1.4.0
├── eslint-plugin-react-hooks@4.6.0
├── eslint-plugin-react-refresh@0.4.1
├── eslint@8.44.0
├── powerbi-client@2.22.3
├── react-dom@18.2.0
├── react-hook-form@7.45.1
├── react-hot-toast@2.4.1
├── react-router-dom@6.14.1
├── react@18.2.0
└── typescript@5.1.6

Sampath · Answer 1 · 2023-08-01T10:14:28.943

Used this link to create and deploy the React + Vite.
The deployment will be only under site/wwroot. Route to the folder and install npm install

enter image description here

import  {  defineConfig  }  from  'vite'

import  react  from  '@vitejs/plugin-react'

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

})

Created a React + Vite by this steps in the image.
The run dev will termial.In local deployed using this reference Azure App Service with Visual Studio Code to Azure.
For more details refer to Process for React App deployment to Azure Web and SO

Azure App service deploy with React + Vite

1 Answers1