Question:

Deploying react native web app with docker to Azure environment

Problem:

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! dierenwelzijnapp@1.0.0 build: `react-scripts build`

0.441 npm ERR! spawn ENOENT

0.441 npm ERR!

0.441 npm ERR! Failed at the dierenwelzijnapp@1.0.0 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.