Provide documentation how to build and deploy web application in a Docker container

[synergiator]

It's not quite clear what is required to build and run the web app produced by this awesome generator tool.

If I follow the quick start tutorial in the README, yarn web:build says, there is no such directory.

UPD. Replacing the yarn with an up-to-date one helps, still there are many missing dependencies. A two-stage Dockerfile would help a lot.

[RichardLindhout]

It uses create-react-app there are tutorials but I have made a proof of concept for a freelance interview a while ago.

Dockerfile

FROM node:alpine as build

ENV REACT_APP_API_BASE_URL=http://localhost:8080

WORKDIR /

COPY package.json ./
COPY yarn.lock ./


RUN yarn install

COPY . .
RUN yarn run web:build

FROM nginx:stable-alpine
COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Push this to e.g. dockerhub.com

and in your docker-compose.yml later on

version: "3"

services:
  frontend:
    image: richardlindhout/omoda-pos-frontend:latest
    restart: always
    expose:
      - 80
    ports:
      - "80:80"

[synergiator]

hi there @RichardLindhout !

So I've tried (Ubuntu 20.04; Node 14.16.0; npx 7.8.0)

npx create-react-native-web-application --name myappname
cd  myappname
# add your Dockerfile
docker build -t myappname .

Result:

warning " > [email protected]" has incorrect peer dependency "[email protected]".
warning "react-native > react-native-codegen > [email protected]" has unmet peer dependency "@babel/preset-env@^7.1.6".
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning " > [email protected]" has incorrect peer dependency "[email protected]".
[4/4] Building fresh packages...
Done in 34.17s.
Removing intermediate container 692b7278d9da
 ---> c8afac620768
Step 7/13 : COPY . .
 ---> a3ee52194ab7
Step 8/13 : RUN yarn run build
 ---> Running in 89e96029c093
yarn run v1.22.5
error Command "build" not found.

UPD as the README mentions also the web command yarn web:build, I've tried it as well instead of "yarn run build", but then the error is:

$ react-app-rewired build
We detected TypeScript in your project (src/AbstractionExample.tsx) and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

Creating an optimized production build...
Failed to compile.

./src/index.web.ts
Cannot find file './App' in './src'.
error Command failed with exit code 1.

Indeed under "src" folder there is no "App" but "App.tsx".

[RichardLindhout]

It's RUN yarn run web:build instead of RUN yarn run build

[RichardLindhout]

Hmmm try to start it a few times an see if the issue resolves there are some strange issues in create-react-app when you start it for the first time

[synergiator]

it's still same error:

yarn run v1.22.5
$ react-app-rewired build
We detected TypeScript in your project (src/AbstractionExample.tsx) and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

Creating an optimized production build...
Failed to compile.

./src/index.web.ts
Cannot find file './App' in './src'.


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.