From 5cb4f2e94be9d1e3e23cdee0485599c001735b10 Mon Sep 17 00:00:00 2001 From: Everton Moreth Date: Tue, 16 May 2023 15:08:43 -0300 Subject: [PATCH] Revert "Update README.md (#42)" This reverts commit 77e05c5900a891558be0f23d45a946e2cd4495f3. --- .gitignore | 1 + .vscode/settings.json | 3 +- .vscode/tasks.json | 2 +- README.md | 48 ++++++++++++++++++------- docker-compose.yml | 36 +++++++++++++++++-- web-client/.dockerignore | 4 +++ web-client/Dockerfile | 10 ++++++ web-client/pages/api/create-order.tsx | 2 +- web-client/pages/api/get-menu-items.tsx | 2 +- 9 files changed, 88 insertions(+), 20 deletions(-) create mode 100644 .gitignore create mode 100644 web-client/.dockerignore create mode 100644 web-client/Dockerfile diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9f11b75 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea/ diff --git a/.vscode/settings.json b/.vscode/settings.json index 5ff1013..0aa5e11 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,6 +2,5 @@ "task.allowAutomaticTasks": "on", "workbench.editorAssociations": { "*.md": "vscode.markdown.preview.editor" - }, - "remote.autoForwardPorts":false, + } } \ No newline at end of file diff --git a/.vscode/tasks.json b/.vscode/tasks.json index 1840918..0a55cc6 100644 --- a/.vscode/tasks.json +++ b/.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": { diff --git a/README.md b/README.md index 1195ca2..ac7f28f 100644 --- a/README.md +++ b/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 -``` +``` \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index b1f28eb..a7cba11 100644 --- a/docker-compose.yml +++ b/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 diff --git a/web-client/.dockerignore b/web-client/.dockerignore new file mode 100644 index 0000000..43e3a64 --- /dev/null +++ b/web-client/.dockerignore @@ -0,0 +1,4 @@ +Dockerfile +.next +.vscode +node_modules \ No newline at end of file diff --git a/web-client/Dockerfile b/web-client/Dockerfile new file mode 100644 index 0000000..a217ab7 --- /dev/null +++ b/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"] \ No newline at end of file diff --git a/web-client/pages/api/create-order.tsx b/web-client/pages/api/create-order.tsx index 719c049..3ba2651 100644 --- a/web-client/pages/api/create-order.tsx +++ b/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); diff --git a/web-client/pages/api/get-menu-items.tsx b/web-client/pages/api/get-menu-items.tsx index c66e312..92aad9f 100644 --- a/web-client/pages/api/get-menu-items.tsx +++ b/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);