how to dockerize and deploy react native web app?

Issue

I try to dockerize a react native web app. So I created the web-build folder in the root with the command: expo build:web

And I have a dockerfile:

FROM  node:14-alpine
WORKDIR  /app
COPY  package*.json  ./
RUN  npm  install
COPY  .  .
# Build the app
COPY web-build ./web-build
RUN  npm  run  build
EXPOSE  3000
CMD  ["npm",  "run", "web"]

And my partial package.json file looks like

"scripts": {
    "start": "expo start --openssl-legacy-provider, react-app-rewired start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint": "eslint . --ext .js",
    "postinstall": "patch-package",
    "build": "react-scripts build",
    "start-webpack": "webpack-dev-server --mode production --open"
},

But if I do a:

docker build -t dwl_frontend .

I get this error:

>  > [7/7] RUN  npm  run  build:
> 1.560
> 1.560 > [email protected] build /app
> 1.560 > react-scripts build
> 1.560
> 1.566 sh: react-scripts: not found
> 1.575 npm ERR! code ELIFECYCLE
> 1.576 npm ERR! syscall spawn
> 1.576 npm ERR! file sh
> 1.576 npm ERR! errno ENOENT
> 1.581 npm ERR! [email protected] build: `react-scripts build`
> 1.581 npm ERR! spawn ENOENT
> 1.582 npm ERR!
> 1.582 npm ERR! Failed at the [email protected] build script.
> 1.582 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
> 1.591
> 1.591 npm ERR! A complete log of this run can be found in:
> 1.591 npm ERR!     /root/.npm/_logs/2023-11-29T14_31_54_253Z-debug.log
> ------

Question: how to resolve this error?

Solution

It looks like the error is occurring because the react-scripts package is not found inside your Docker container. This package is typically used for managing scripts in a Create React App project, but it seems like it's missing in your Docker image.

1. Install react-scripts globally: Update your Dockerfile to include the installation of react-scripts globally before running the build command. Add the following line before the npm run build line:

RUN npm install -g react-scripts

This ensures that react-scripts is available globally in your Docker container.

2. Update your build script: Modify your npm run build script to use the globally installed react-scripts. Update the line in your package.json file to:

"build": "react-scripts build",

After making these changes, your Dockerfile should look like this:

FROM node:14-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# Install react-scripts globally
RUN npm install -g react-scripts
# Build the app
COPY web-build ./web-build
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "web"]

3. Rebuild your Docker image:

After making the changes, rebuild your Docker image:

docker build -t dwl_frontend .

This should resolve the issue, and your Docker image should now include react-scripts for building the React app.

Make sure to test your Docker image to ensure that the application starts as expected within the container. If you encounter any further issues, check the Docker logs or share the relevant parts

Answered By - sajib