When to build Typescript Node.js app with docker

Question

I am currently working on a full stack typescript app: Express for the server and React for the client. And the folder structure looks like something like this:

.
├──client/ <-- React app
├──server/ <-- Express server
├──dist/ <-- build result goes into this folder
├──package.json <-- top-level files

Obviously, my app needs an extensive build phase to make the dist folder. First to transpile the server, then build the React app, copy paste that build result of the React app into the dist folder to make Express serve them as static files.

My question is when should I put this build phase if I want to deploy this app using Docker.

First, I can build the app in my environment, and then make a docker image that contains the dependencies and dist folder only. But it feels like I am not truly containerizing my app.

Or I may copy the client and server folder to my docker image, and then build the app inside the image. But by using this way, I have to install all the dev-dependencies(like @babel/... or @types/... modules) inside the image and it doesn`t feel right either.

So I want to ask which of the above two will be a better way to build and deploy my app with Docker. It`ll be also great if you think both are wrong and can suggest any new better strategy.

Thanks in advance!

Answer 1

you separate both app if possible react and express, however if it is the whole monolithic application you can add both folder inside docker.

in docker you can create multi stag docker image. In first stage install dev dependency and generate the bundles while in seconds just copy your bundles from first stage and use it. if inside dist there is no role of express you can directly copy server to second stage.

FROM node:10-alpine AS node-build
WORKDIR /my-app/app/static
COPY app/static/package.json ./
RUN npm install && npm install -g --unsafe-perm node-sass 
COPY app/static .
RUN npm run build

FROM python:3.5-slim
WORKDIR /my-app-final
COPY requirements.txt ./
RUN apt-get update -yq \
    && apt-get install -y python3-dev build-essential -yq \
    && apt-get install curl -yq \
    && pip install -r requirements.txt \
    && apt-get purge -y --auto-remove gcc python3-dev build-essential
COPY --from=node-build ./my-app ./
COPY ./server .
CMD python3 run.py

above small example of multi stage build hope it will be helpful.