How to deploy react native web app with docker to Azure environment?

Issue

I have dockerized a react native app.

And I try now to deploy the app to the Auzure environment with recourse a app service. And the app works on localhost

This is the url: https://dierenfront.azurewebsites.net

But I get this error:

:( Application Error
If you are the application administrator, you can access the diagnostic resources.

But if look in the log stream I see this:

2023-11-28T16:46:06  Welcome, you are now connected to log-streaming service.
Starting Log Tail -n 10 of existing logs ----/appsvctmp/volatile/logs/runtime/5f2bc42525fb34aa99b2fee5df38a74252c5656ee8b614f9923b1034d04960c3.log
2023-11-28T16:42:56.609283177Z: [INFO]  env: load .env
2023-11-28T16:42:56.610384090Z: [INFO]  env: export GENERATE_SOURCEMAP
2023-11-28T16:42:56.948493131Z: [INFO]  Starting Webpack on port 19006 in development mode.
2023-11-28T16:42:57.649617619Z: [ERROR]  (node:31) [DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR] DeprecationWarning: Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument.
2023-11-28T16:42:57.649663120Z: [ERROR]  (Use `node --trace-deprecation ...` to show where the warning was created)
2023-11-28T16:42:57.649669120Z: [ERROR]  (node:31) [DEP_WEBPACK_DEV_SERVER_LISTEN] DeprecationWarning: 'listen' is deprecated. Please use the async 'start' or 'startCallback' method.
2023-11-28T16:43:16.218445052Z: [INFO]  Waiting on http://localhost:8081
2023-11-28T16:43:16.218485352Z: [INFO]  Logs for your project will appear below.
2023-11-28T16:43:33.075808251Z: [INFO]  web compiled successfully
2023-11-28T16:43:33.767887454Z: [INFO]  web compiled successfullyEnding Log Tail of existing logs ---Starting Live Log Stream ---
2023-11-28T16:46:51.427321318Z: [INFO]  yarn run v1.22.19
2023-11-28T16:46:51.499680606Z: [INFO]  $ expo start --web
2023-11-28T16:46:52.158229805Z: [INFO]  Starting project at /opt/dwl_frontend
2023-11-28T16:46:52.164971097Z: [INFO]  env: load .env
2023-11-28T16:46:52.165045798Z: [INFO]  env: export GENERATE_SOURCEMAP
2023-11-28T16:46:52.863599444Z: [INFO]  Starting Metro Bundler
2023-11-28T16:46:52.999648403Z: [INFO]  env: load .env
2023-11-28T16:46:53.000253711Z: [INFO]  env: export GENERATE_SOURCEMAP
2023-11-28T16:46:53.345656420Z: [INFO]  Starting Webpack on port 19006 in development mode.
2023-11-28T16:46:54.142467173Z: [ERROR]  (node:31) [DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR] DeprecationWarning: Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument.
2023-11-28T16:46:54.142520274Z: [ERROR]  (Use `node --trace-deprecation ...` to show where the warning was created)
2023-11-28T16:46:54.147871847Z: [ERROR]  (node:31) [DEP_WEBPACK_DEV_SERVER_LISTEN] DeprecationWarning: 'listen' is deprecated. Please use the async 'start' or 'startCallback' method.
2023-11-28T16:47:19.773661604Z: [INFO]  Waiting on http://localhost:8081
2023-11-28T16:47:19.773706805Z: [INFO]  Logs for your project will appear below.
2023-11-28T16:47:35.438651206Z: [INFO]  web compiled successfully
2023-11-28T16:47:36.343875044Z: [INFO]  web compiled successfully
2023-11-28T16:49:06  No new trace in the past 1 min(s).
2023-11-28T16:50:06  No new trace in the past 2 min(s).

So it looks like it wants to build to localhost?

I don't understand this.

This is the dockerfile:

# Use an official Node.js runtime as a parent image
FROM  node:14-alpine
# Set the working directory to /app
WORKDIR  /app
# Copy the package.json and package-lock.json files to the container

COPY  package*.json  ./
# Install app dependencies
RUN  npm  install

# Copy the rest of the app code to the container

COPY  .  .
# Build the app

RUN  npm  run  build
# Expose the port that the app will run on
EXPOSE  3000
# Start the app
CMD  ["npm",  "start"]

package.json

    "scripts": {
        "start": "expo start, react-app-rewired start ",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web",
        "build": "react-scripts build",
        "eject": "expo eject",
        "lint": "eslint . --ext .js",
        "postinstall": "patch-package"
    },

And if I do a docker build -t dwl_frontend . I get this error:

0.432 sh: react-scripts: not found
0.438 npm ERR! code ELIFECYCLE
0.438 npm ERR! syscall spawn
0.438 npm ERR! file sh
0.438 npm ERR! errno ENOENT
0.441 npm ERR! [email protected] build: `react-scripts build`
0.441 npm ERR! spawn ENOENT
0.441 npm ERR!
0.441 npm ERR! Failed at the [email protected] build script.
0.441 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

and docker.compose.yml file:

version: "2.4"

services:
  dwl_frontend:
    image: crdierenwelzijnfrontend.azurecr.io/frontend
    build:
      context: ./
      dockerfile: Dockerfile.prod
      args:
        - NODE_ENV=production
    environment:
      - NODE_ENV=production
    tty: true
    env_file:
      - ./.env
    ports:
      - "19006:19006"
      - "19001:19001"
      - "19002:19002"

    healthcheck:
      disable: true

Question: What I have to change so that the app on azure is working?

Solution

The "Application Error" indicates that your React Native app is trying to connect to http://localhost:8081 while running in the Azure environment, which is causing the application error.

I created a React application in Azure App Service with Docker by following the below steps.

1. Create React Native App: Make sure React Native web app is ready for deployment. You should have a Dockerfile in the same directory.

Dockerfile

    # Use an official Node.js runtime as a parent image
    FROM  node:14-alpine
    # Set the working directory to /app
    WORKDIR  /app
    # Copy the package.json and package-lock.json files to the container
    
    COPY  package*.json  ./
    # Install app dependencies
    RUN  npm  install
    
    # Copy the rest of the app code to the container
    
    COPY  .  .
    # Build the app
    
    RUN  npm  run  build
    # Expose the port that the app will run on
    EXPOSE  3000
    # Start the app
    CMD  ["npm",  "start"]

Created a Docker image using the Dockerfile with the following command.

docker build -t react_application .

Docker commands to push the image to ACR.

docker build -t React_application .
docker tag 8xxxxxe63 venkatacrdemo.azurecr.io/venkat_react_app/react_application:v2
docker push venkatacrdemo.azurecr.io/venkat_react_app/react_application:v2

Docker image:

Image has been pushed to ACR.

Once the image is pushed to ACR, you can create a web application with Docker configurations, like below.

Here are the results of the App Service with the Docker image.

Here are the results from my Log_stream.

Answered By - Venkat V