Merge pull request #381 from dreammall-earth/frontend-docker

feat(frontend): docker

README.md

@@ -43,11 +43,15 @@ The following endpoints are provided if `docker compose` is used:
 | Endpoint                                                             | Description                |
 |----------------------------------------------------------------------|----------------------------|
 | [http://localhost:3306](http://localhost:3306)                       | MySQL Database             |
-| [http://localhost:4000/graphql](http://localhost:4000/graphql)       | Backend GraphQL API        |
-| [http://localhost:4000/playground](http://localhost:4000/playground) | Backend GraphQL Playground |
-| [http://localhost:3000](http://localhost:3000)                       | Presenter Frontend         |
+| [http://localhost:3000](http://localhost:3000)                       | Presenter                  |
 | [http://localhost:8081](http://localhost:8081)                       | Presenter Documentation    |
 | [http://localhost:6006](http://localhost:6006)                       | Presenter Storybook        |
+| [http://localhost:3001](http://localhost:3001)                       | Frontend                   |
+| [http://localhost:8082](http://localhost:8082)                       | Frontend Documentation     |
+| [http://localhost:6007](http://localhost:6007)                       | Frontend Storybook         |
+| [http://localhost:4000/graphql](http://localhost:4000/graphql)       | Backend GraphQL API        |
+| [http://localhost:4000/playground](http://localhost:4000/playground) | Backend GraphQL Playground |
+| [http://localhost:8083](http://localhost:8083)                       | Backend Documentation      |
 | [http://localhost:8080](http://localhost:8080)                       | Documentation              |
 
 ## How to release

backend/README.md

@@ -1,4 +1,4 @@
-# Backend
+# Dreammall Backend
 [![nodejs][badge-nodejs-img]][badge-nodejs-href]
 [![npm][badge-npm-img]][badge-npm-href]
 [![docker][badge-docker-img]][badge-docker-href]

docker-compose.override.yml

@@ -69,6 +69,67 @@ services:
       # bind the local folder to the docker to allow live reload
       - ./presenter:/app
 
+  ########################################################
+  # FRONTEND #############################################
+  ########################################################
+  frontend:
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: dreammall/frontend:local-development
+    build:
+      target: development
+    ports:
+      # development server port
+      - 24679:24679
+    environment:
+      - NODE_ENV=development
+      - PORT_HMR=24679
+    volumes:
+      # This makes sure the docker container has its own node modules.
+      # Therefore it is possible to have a different node version on the host machine
+      #- frontend_node_modules:/app/node_modules
+      # bind the local folder to the docker to allow live reload
+      - ./frontend:/app
+
+  #######################################################
+  # FRONTEND STORYBOOK ##################################
+  #######################################################
+  frontend-storybook:
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: dreammall/frontend:local-storybook
+    build:
+      context: ./frontend
+      target: storybook
+    ports:
+      - 6007:6006
+    environment:
+      - NODE_ENV=development
+    volumes:
+      # This makes sure the docker container has its own node modules.
+      # Therefore it is possible to have a different node version on the host machine
+      #- frontend_storybook_node_modules:/app/node_modules
+      # bind the local folder to the docker to allow live reload
+      - ./frontend:/app
+
+  #######################################################
+  # FRONTEND DOCUMENTATION ##############################
+  #######################################################
+  frontend-documentation:
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: dreammall/frontend:local-documentation
+    build:
+      context: ./frontend
+      target: documentation
+    ports:
+      - 8082:8080
+    environment:
+      - NODE_ENV=development
+    volumes:
+      # This makes sure the docker container has its own node modules.
+      # Therefore it is possible to have a different node version on the host machine
+      #- frontend_documentation_node_modules:/app/node_modules
+      # bind the local folder to the docker to allow live reload
+      - ./frontend:/app
+
   #######################################################
   # BACKEND #############################################
   #######################################################
@@ -97,7 +158,7 @@ services:
       context: ./backend
       target: documentation
     ports:
-      - 8082:8080
+      - 8083:8080
     environment:
       - NODE_ENV=development
     volumes:
@@ -130,6 +191,9 @@ volumes:
   presenter_node_modules:
   presenter_storybook_node_modules:
   presenter_documentation_node_modules:
+  frontend_node_modules:
+  frontend_storybook_node_modules:
+  frontend_documentation_node_modules:
   backend_node_modules:
   backend_documentation_node_modules:
   documentation_node_modules:

docker-compose.yml

@@ -37,6 +37,23 @@ services:
     environment:
       - NODE_ENV=production
 
+  ########################################################
+  # FRONTEND #############################################
+  ########################################################
+  frontend:
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: dreammall/frontend:local-production
+    build:
+      context: ./frontend
+      target: production
+    networks:
+      - external-net
+      - internal-net
+    ports:
+      - 3001:3000
+    environment:
+      - NODE_ENV=production
+
   #######################################################
   # BACKEND #############################################
   #######################################################

frontend/README.md

@@ -1,4 +1,4 @@
-# boilerplate-frontend
+# Dreammall Frontend
 [![nodejs][badge-nodejs-img]][badge-nodejs-href]
 [![npm][badge-npm-img]][badge-npm-href]
 [![docker][badge-docker-img]][badge-docker-href]
@@ -16,9 +16,9 @@
 [![vuepress][badge-vuepress-img]][badge-vuepress-href]
 [![chromatic][badge-chromatic-img]][badge-chromatic-href]
 
-The IT4C Boilerplate for frontends
+The Dreammall frontend.
 
-![](src/assets/it4c-logo2-clean-bg_alpha-128x128.png)
+![](src/assets/dreammall-logo.svg)
 
 ## Requirements & Technology