Revert "Update README.md"

.gitignore

@@ -0,0 +1 @@
+.idea/

.vscode/settings.json

@@ -2,6 +2,5 @@
     "task.allowAutomaticTasks": "on",
     "workbench.editorAssociations": {         
         "*.md": "vscode.markdown.preview.editor"
-    },
-    "remote.autoForwardPorts":false,
+    }
  }

.vscode/tasks.json

@@ -58,7 +58,7 @@
       {
         "label": "Echo command",
         "type": "shell",
-        "command": "echo DevZero: Welcome!",
+        "command": "echo DevZero:Welcome to Code-Server",
         "isBackground": true,
         "problemMatcher": [],
         "presentation": {

README.md

@@ -1,15 +1,19 @@
-# Welcome to DevZero
+# Welcome to Devzero
 
-Thank you for choosing DevZero as your preferred platform for software development. Our platform is designed to provide you with top-notch tools and services to help you build and deploy your software effectively.
+Thank you for choosing Devzero as your preferred platform for software development. Our platform is designed to provide you with top-notch tools and services to help you build and deploy your software effectively.
 
 ## Getting Started
 
-To get started on DevZero, you need to create an account on our website. Once you have created your account, you can start exploring our platform and its features. We offer a wide range of tools for software development, including code repositories, project management tools, and continuous integration and deployment services.
+To get started on Devzero, you need to create an account on our website. Once you have created your account, you can start exploring our platform and its features. We offer a wide range of tools for software development, including code repositories, project management tools, and continuous integration and deployment services.
 
 ## Support
 
 We understand that software development can be challenging, and we are here to help you every step of the way. Our support team is available 24/7 to assist you with any questions or issues you may have. You can reach out to us by email or through our support portal.
 
+## Community
+
+We also have a vibrant community of developers who are always ready to share their knowledge and experiences with others. You can join our community forums to connect with other developers, learn new things, and share your own experiences.
+
 ## Conclusion
 
 We hope that you find our platform useful and enjoyable to use. We are committed to providing you with the best possible experience, and we welcome your feedback and suggestions on how we can improve our platform.
@@ -39,36 +43,54 @@ Happy coding!
 - MySQL database
 
 ## Getting started
-If you created an environment from DevZero's Microservice Template, all of the backend services will automatically be up and running!
+If you created an environment from DevZero's Microservice Template, all of the services will automatically be up and running!
 
 To view and share the service, follow these steps to create a Share Link:
 
 
 1. Click the "Open in web browser" button to launch the codeserver, a browser-based Visual Studio Code app. You can make changes to the service and view logs here:
 
-![environment open in web browser](/images/open-in-web-browser.png)
+    ![environment open in web browser](/images/open-in-web-browser.png)
+
 
 2. Click on the dropdown and select 'Share':
 
-![share dropdown](/images/share-link-dropdown.png)
+    ![share dropdown](/images/share-link-dropdown.png)
+
 
 3. Select port 3000 (where the web app is listening), then click 'Create link':
 
-![create share link for port 3000](/images/create-share-link.png)
+    ![create share link for port 3000](/images/create-share-link.png)
 
-4. Run the frontend: `cd web-client; npm run dev`
 
-5. You can now see the demo web app, Da$h Cafe, which will allow you to add items to the cart and place an order:
+4. You can now see the demo web app, Da$h Cafe, which will allow you to add items to the cart and place an order:
 
-![dash cafe demo app](/images/dash-cafe.png)
+    ![dash cafe demo app](/images/dash-cafe.png)
 
 
 ## Making changes
 ### Frontend service
-All code for the frontend lives in the `/web-client` directory.
+All code for the frontend lives in the `/web-client` directory. The Next.js app is already running in development mode in the backgroun via [forever](https://github.com/foreversd/forever). Changes you make the web client will automatically be re-compiled and immediately visible in the browser.
+
+```
+devzero@ip-10-0-112-234:~/projects/microservice-example/web-client$ forever list
+info:    Forever processes running
+data:        uid  command       script                     forever pid   id logfile                         uptime                  
+data:    [0] UFVW /usr/bin/node node_modules/.bin/next dev 88084   89558    /home/devzero/.forever/UFVW.log 0:0:6:32.69900000000001 
+```
 
+You can tail the logs from the `/web-client` directory with:
+```
+tail -f stdout.txt
+```
+
+You can also restart (or stop) the service using forever:
+```
+forever (restart|stop) 0
+```
+
+Or with npm:
 ```
-# from web-client directory
 npm run dev
 ```
 
@@ -147,4 +169,4 @@ grpcurl -plaintext 127.0.0.1:9090 v1.OrderService.ReadAllMenuItems
 
 # create a new order
 grpcurl -d '{"orderItems": {"menuItemID": 6, "quantity": 2}}' -plaintext 127.0.0.1:9090 v1.OrderService.CreateOrder
-```
+```

docker-compose.yml

@@ -7,7 +7,7 @@ services:
   db:
     container_name: db
     platform: linux/x86_64
-    image: mysql
+    image: mysql:8.0-debian
     hostname: backend-service-db
     build:
       context: .
@@ -53,8 +53,40 @@ services:
       interval: 5s
       timeout: 5s
       retries: 10
+  web-client:
+    build:
+      context: web-client
+      dockerfile: ./Dockerfile
+    hostname: web-client
+    environment:
+      API_HOST: api-service
+    restart: always
+    volumes:
+      # To avoid mounting the node_modules folder we need to mount everything around it
+      - ./web-client/components:/app/components
+      - ./web-client/constants:/app/constants
+      - ./web-client/pages:/app/pages
+      - ./web-client/public:/app/public
+      - ./web-client/styles:/app/styles
+      - ./web-client/.eslintrc.json:/app/.eslintrc.json
+      - ./web-client/.gitignore:/app/.gitignore
+      - ./web-client/next.config.js:/app/next.config.js
+      - ./web-client/next-env.d.ts:/app/next-env.d.ts
+      - ./web-client/package.json:/app/package.json
+      - ./web-client/package-lock.json:/app/package-lock.json
+      - ./web-client/tsconfig.json:/app/tsconfig.json
+    depends_on:
+      - server
+      - api
+    ports:
+      - "3000:3000" # http
+    healthcheck:
+      test: curl --fail http://api-service:8333/healthcheck || exit 1;
+      interval: 5s
+      timeout: 5s
+      retries: 10
   adminer:
-    image: adminer
+    image: adminer:standalone
     restart: always
     ports:
       - 8080:8080

web-client/.dockerignore

@@ -0,0 +1,4 @@
+Dockerfile
+.next
+.vscode
+node_modules

web-client/Dockerfile

@@ -0,0 +1,10 @@
+FROM node:19.4
+
+WORKDIR /app
+# copies all files from local into WORKDIR
+COPY . .
+RUN npm install --include=dev
+
+EXPOSE 3000
+
+ENTRYPOINT ["./node_modules/.bin/next", "dev"]

web-client/pages/api/create-order.tsx

@@ -5,7 +5,7 @@ import { NextApiRequest, NextApiResponse } from "next";
 
 const createOrder = () => async (req: NextApiRequest, res: NextApiResponse) => {
     try {
-        const response: AxiosResponse = await axios.post("http://localhost:8333/orders", req.body);
+        const response: AxiosResponse = await axios.post(`http://${process.env.API_HOST || 'localhost'}:8333/orders`, req.body);
         res.status(response.status || 200).json(response.data);
     } catch (error: any) {
         console.log(error);

web-client/pages/api/get-menu-items.tsx

@@ -6,7 +6,7 @@ import { NextApiRequest, NextApiResponse } from "next";
 
 const getMenuItems = () => async (req: NextApiRequest, res: NextApiResponse) => {
     try {
-        const response: AxiosResponse = await axios.get("http://localhost:8333/menu-items");
+        const response: AxiosResponse = await axios.get(`http://${process.env.API_HOST || 'localhost'}:8333/menu-items`);
         res.status(response.status || 200).json(response.data);
     } catch (error: any) {
         console.log(error);