Make frontend work in docker

Author: ohbarye

docker-compose.yml

@@ -20,7 +20,7 @@ services:
     working_dir: /myapp/frontend
     volumes:
       - ./frontend:/myapp/frontend
-    command: "yarn start"
+    command: "yarn dev"
     depends_on:
       - backend
   yaichi:

frontend/src/App.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import './App.css';
 
+const BACKEND_API_URL = process.env.BACKEND_API_URL || 'http://backend.localhost';
+
 const fetchContent = async (updateContent: (content: string) => void) => {
-  const response = await fetch('http://localhost:3001/greetings/hello',{
+  const response = await fetch(`${BACKEND_API_URL}/greetings/hello`,{
     headers: {
       'Accept': 'application/json',
       'Content-Type': 'application/json',

frontend/webpack.config.js

@@ -27,4 +27,9 @@ module.exports = {
       template: path.join(__dirname, "src/index.html"),
     }),
   ],
+  devServer: {
+    host: '0.0.0.0',
+    port: 3000,
+    disableHostCheck: true,
+  },
 };