How to fix error in deployment of React app on Azure Container apps?

FuriousOne 0 Reputation points
2023-04-09T08:38:02.08+00:00

I was able to deploy my code and image successfully on Google Cloud Run. But the same setup is resulting in error while deploying on Azure Container Apps. Would you please suggest what could be cause and how it can be fixed?

I am executing the command:

az containerapp up

Here is the error that I receive:

The command failed with an unexpected error. Here is the traceback:
[WinError 3] The system cannot find the path specified: './node_modules\\@babel\\plugin-proposal-nullish-coalescing-operator\\node_modules\\@babel\\helper-function-name\\node_modules\\@babel\\types\\lib\\builders\\flow\\createTypeAnnotationBasedOnTypeof.js'

Here is my dockerfile content:

    FROM node:16-alpine as build-step
    WORKDIR app/
    # ENV PATH /app/node_modules/.bin:$PATH
    # COPY package.json yarn.lock ./
    # COPY package.json yarn.lock tsconfig.json ./
    # COPY src/ ./src
    # COPY public/ ./public
    COPY . ./
    RUN yarn
    RUN yarn build
    
    # Build step #2: build the API with the client as static files
    FROM python:3.11.2-bullseye
    
    # Allow statements and log messages to immediately appear in the Knative logs
    ENV PYTHONUNBUFFERED True
    
    WORKDIR app/
    COPY --from=build-step app/build ./build
    
    RUN mkdir ./api
    COPY api/ ./api
    RUN pip3 install -U pip && pip3 install --no-cache-dir -r ./api/requirements.txt
    
    ENV QUART_ENV $QUART_ENV
    
    # EXPOSE $PORT
    WORKDIR /app/api
    # CMD exec gunicorn --bind :$PORT --workers 1 --threads 8 --timeout 0 main:flask_app
    CMD exec hypercorn --bind :$PORT main:quart_app

Here is my package.json dependencies:

    "dependencies": {
        "@date-io/moment": "^2.15.0",
        "@emotion/react": "^11.7.1",
        "@emotion/styled": "^11.6.0",
        "@formkit/auto-animate": "^1.0.0-beta.6",
        "@lottiefiles/react-lottie-player": "^3.4.9",
        "@mui/core": "^5.0.0-alpha.54",
        "@mui/icons-material": "^5.2.5",
        "@mui/material": "^5.4.0",
        "@mui/x-date-pickers": "^5.0.0-beta.5",
        "@testing-library/jest-dom": "^5.16.1",
        "@testing-library/react": "^12.1.2",
        "@testing-library/user-event": "^13.5.0",
        "@types/jest": "^27.4.0",
        "@types/node": "^16.11.19",
        "@types/superagent": "^4.1.15",
        "@types/underscore": "^1.11.4",
        "firebase": "^9.9.0",
        "js-cookie": "^3.0.1",
        "moment": "^2.29.4",
        "query-string": "^7.1.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-firebase-hooks": "^5.0.3",
        "react-ga4": "^1.4.1",
        "react-hook-form": "^7.25.3",
        "react-iframe": "^1.8.5",
        "react-router-dom": "^6.2.1",
        "react-scripts": "5.0.0",
        "typescript": "^4.7.4",
        "underscore": "^1.13.2",
        "universalify": "^2.0.0",
        "web-vitals": "^2.1.3"
      },
    
    "devDependencies": {
        "@types/react": "^17.0.2",
        "@types/react-dom": "^17.0.2"
      }
Azure Container Apps
Azure Container Apps
An Azure service that provides a general-purpose, serverless container platform.
325 questions
{count} votes