Fullstack Dockerized Template on Typescript.

We've heard developers voice the same pain points time and again: it's hard to integrate your app's frontend with your backend, you need to tackle an ever-expanding technical scope in your daily workload, and it's tough to navigate the breadth of cloud offerings.While backend-as-a-service offerings provide an easy onramp, they often require developers to migrate away from them as their company scales.

“Winning isn’t everything, but wanting to win is.” — Vince Lombardi

We start our implementation with plan of actions.(Express->React->Nginx->MongoDB)

We are start with mkdir commands to create follow folders: client, backend, nginx.

The Dockerfiles for Client, Server and NginX services as seen bellow:

Let's install some dependencies and devDependencies in server directory:

by passing to server own directory:

Next step is the creation of json file dependencies for client module. The module consists the nessary files to client developments and scripts to run by the client service:

By pass to the next action we are create the nginx configuration file. The file configurated due to passing requests beetwen the client and server services.

So there are last and an important issue it's to create the docker compose file that define all services and configutaions for it.The file situated outside of folders, in upper level of folders.

version: '3'
services: 
  server:
    build: 
      dockerfile: Dockerfile
      context: ./server
    container_name: server-Express
    volumes:
      - '/app/node_modules'
      - './server:/app'
    command: npm run dev
    ports: 
      - "3005:3005"
    depends_on:
      - mongo
    environment:
      - MONGO_URL=mongodb://mongo:27017/mydb
  client:
    build: 
      dockerfile: Dockerfile
      context: ./client
    container_name: client-React
    volumes:
      - '/app/node_modules'
      - './client:/app'
    command: npm run dev
    ports: 
      - "6001:6001"
    tty: true
  nginx:
    restart: always
    container_name: Nginx
    build:
      dockerfile: Dockerfile
      context: ./nginx
    ports: 
      - "3050:3051"
    depends_on:
       - server
       - client
  mongo:
    restart: always
    image: mongo
    container_name: mongoDB
    volumes:
      - mongo-data:/data/db
    ports:
      - "27017:27017"

volumes:
  mongo-data:
        

The volume in the end of defenition is persists volume.That saved for all time that project exists.

The frontend reac vite server configuration has been corrected to the following expectations:

The configuration situated in vite.config.ts file on the backend side of application.

So the final step to run out the docker compose file with a regular command:

• docker compose up --build

So the task has been complited succesfully. The backend and frontend services in up condition.