Docker container now watches for updates

nulzo · Oct 30, 2023 · 464fcc2 · 464fcc2
1 parent 8f488e8
commit 464fcc2
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 82 deletions.
diff --git a/compose.yml b/compose.yml
@@ -13,6 +13,27 @@ services:
     restart: always
     ports:
       - 4200:4200
+    # command: npm run dev
+    tty: true
+    environment:
+      - CHOKIDAR_USEPOLLING=true
+      - WATCHPACK_POLLING=true
+    volumes:
+      # it avoids mounting the workspace root
+      # because it may cause OS specific node_modules folder
+      # or build folder(.svelte-kit) to be mounted.
+      # they conflict with the temporary results from docker space.
+      # this is why many mono repos utilize ./src folder
+      - ./frontend-ts/src/:/home/frontend/src
+      - ./frontend-ts/vite.config.ts:/home/frontend/vite.config.js
+      - ./frontend-ts/tsconfig.json:/home/frontend/tsconfig.json
+    develop:
+      watch:
+        - action: sync
+          path: frontend-ts/src/components
+          ignore:
+            - node_modules/
+    command: npm run dev
   server:
     container_name: nginx
     build: ./nginx
@@ -21,6 +42,8 @@ services:
     restart: always
     ports:
       - 80:80
+  # tailwind:
+  #   image: tailwind
   # ngrok:
   #   image: ngrok/ngrok:latest
   #   restart: unless-stopped

diff --git a/frontend-ts/Dockerfile b/frontend-ts/Dockerfile
@@ -1,27 +1,31 @@
 FROM node:18-alpine
 
+RUN mkdir -p /home/frontend
+
 # Set the working directory to where the frontend will live
-WORKDIR /frontend
+WORKDIR /home/frontend
 
 # Send over the NPM dependencies from our project
 # We should not send over the lock file since NPM can fail if
 # using the cache from another machine. See the link below to see why
 # https://stackoverflow.com/a/67431349
-COPY package.json /frontend/package.json
+COPY package.json ./
 
 # Run npm install (this is a fresh install and will be specific to container)
 # Again, it has no lock file to build from, so it might take a minute.
 RUN npm install
 
 # Send over the root information into the frontend directory
-COPY . /frontend
+COPY . .
 
 # Run npm run build to:
 # 1. Compile typescript code (Build will fail if errors are present)
 # 2. Compile into ./dist file (will contain the "production" code)
-RUN npm run build
+# RUN npm run build
+
+# RUN npx tailwindcss --watch -i ./src/style/globals.css -o ./src/style/output.css &
 
 # Run a command to preview the production build in ./dist.
 # This preview will be the last thing that is run before the container terminates
 # Check the documentation if you want to learn more about CMD vs RUN
-CMD ["npm", "run", "preview"]
+# CMD ["npm", "run", "dev"]
diff --git a/frontend-ts/src/Root.tsx b/frontend-ts/src/Root.tsx
@@ -17,7 +17,7 @@ export default function Root() {
         <Navbar />
         <div className="border-t">
           <div className="bg-background">
-            <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10">
+            <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 2xl:grid-cols-14">
               <Sidebar />
               <div className="col-span-3 sm:col-span-4 md:col-span-6 lg:col-span-6 xl:col-span-8 lg:border-l sm:border-muted-primary ">
                 <div className="h-full mx-10 px-4 py-6 lg:px-1">

diff --git a/frontend-ts/src/components/forms/TicketForm.tsx b/frontend-ts/src/components/forms/TicketForm.tsx
@@ -184,7 +184,7 @@ export default function TicketForm() {
                               variant="dropdown"
                               role="combobox"
                               className={cn(
-                                "w-full md:w-[250px] justify-between",
+                                "w-full md:w-[35vw] lg:w-[30vw] xl:w-[40vw] justify-between",
                                 !field.value &&
                                 "text-muted-foreground font-normal",
                               )}
@@ -199,7 +199,7 @@ export default function TicketForm() {
                             </Button>
                           </FormControl>
                         </PopoverTrigger>
-                        <PopoverContent className="w-[70vw] h-full md:w-[300px] md:h-[30vh] p-0">
+                        <PopoverContent className="w-[70vw] h-full md:w-[35vw] lg:w-[30vw] xl:w-[40vw] md:h-[30vh] lg:h-full p-0">
                           <Command>
                             <CommandInput
                               placeholder="search professors..."
@@ -265,7 +265,7 @@ export default function TicketForm() {
                               role="combobox"
                               key="course_button"
                               className={cn(
-                                "w-full md:w-[250px] justify-between",
+                                "w-full md:w-[35vw] lg:w-[30vw] xl:w-[40vw] justify-between",
                                 !field.value &&
                                 "text-muted-foreground font-normal",
                               )}
@@ -274,7 +274,7 @@ export default function TicketForm() {
                                 ? courses?.data.find(
                                   (course: any) =>
                                     course.id === field.value,
-                                )?.course_name
+                                )?.course_code
                                 : "select a course"}
                               <CaretSortIcon
                                 key="course_sort_icon"
@@ -285,7 +285,7 @@ export default function TicketForm() {
                         </PopoverTrigger>
                         <PopoverContent
                           key="course_content"
-                          className="w-[70vw] md:w-[300px] p-0"
+                          className="w-[70vw] h-full md:w-[35vw] lg:w-[30vw] xl:w-[40vw] md:h-[30vh] lg:h-full p-0"
                         >
                           <Command>
                             <CommandInput
@@ -298,7 +298,7 @@ export default function TicketForm() {
                               <ScrollArea className="h-72 rounded-md border">
                                 {courses?.data.map((course: any) => (
                                   <CommandItem
-                                    value={course.course_name}
+                                    value={`${course.course_code} - ${course.course_name}`}
                                     key={`${course.course_code}-${course.course_name}`}
                                     onSelect={() => {
                                       {
@@ -309,7 +309,7 @@ export default function TicketForm() {
                                       }
                                     }}
                                   >
-                                    {course.course_name}
+                                    {course.course_code} - {course.course_name}
                                     <CheckIcon
                                       key="course_check_icon"
                                       className={cn(
@@ -356,7 +356,7 @@ export default function TicketForm() {
                               role="combobox"
                               key="issue_button"
                               className={cn(
-                                "w-full md:w-[250px] justify-between",
+                                "w-full md:w-[35vw] lg:w-[30vw] xl:w-[40vw] justify-between",
                                 !field.value &&
                                 "text-muted-foreground font-normal",
                               )}
@@ -376,7 +376,7 @@ export default function TicketForm() {
                         </PopoverTrigger>
                         <PopoverContent
                           key="issue_content"
-                          className="w-[70vw] md:w-[300px] p-0"
+                          className="w-[70vw] h-full md:w-[35vw] lg:w-[30vw] xl:w-[40vw] md:h-[30vh] lg:h-full p-0"
                         >
                           <Command>
                             <CommandInput

diff --git a/frontend-ts/src/style/output.css b/frontend-ts/src/style/output.css
@@ -8370,10 +8370,6 @@ details.collapse summary::-webkit-details-marker {
   margin: 0px;
 }
 
-.m-2 {
-  margin: 0.5rem;
-}
-
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -8614,8 +8610,8 @@ details.collapse summary::-webkit-details-marker {
   height: 20px;
 }
 
-.h-\[30vh\] {
-  height: 30vh;
+.h-\[25vh\] {
+  height: 25vh;
 }
 
 .h-\[var\(--radix-select-trigger-height\)\] {
@@ -8639,14 +8635,6 @@ details.collapse summary::-webkit-details-marker {
   height: 100vh;
 }
 
-.h-\[50vh\] {
-  height: 50vh;
-}
-
-.h-\[25vh\] {
-  height: 25vh;
-}
-
 .max-h-\[300px\] {
   max-height: 300px;
 }
@@ -8743,14 +8731,6 @@ details.collapse summary::-webkit-details-marker {
   width: 240px;
 }
 
-.w-\[250px\] {
-  width: 250px;
-}
-
-.w-\[300px\] {
-  width: 300px;
-}
-
 .w-\[340px\] {
   width: 340px;
 }
@@ -8759,6 +8739,10 @@ details.collapse summary::-webkit-details-marker {
   width: 36px;
 }
 
+.w-\[70vw\] {
+  width: 70vw;
+}
+
 .w-\[80px\] {
   width: 80px;
 }
@@ -8776,18 +8760,6 @@ details.collapse summary::-webkit-details-marker {
   width: 100%;
 }
 
-.w-\[100vw\] {
-  width: 100vw;
-}
-
-.w-\[50vw\] {
-  width: 50vw;
-}
-
-.w-\[70vw\] {
-  width: 70vw;
-}
-
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -11448,10 +11420,6 @@ details.collapse summary::-webkit-details-marker {
     grid-column: span 1 / span 1;
   }
 
-  .md\:col-span-2 {
-    grid-column: span 2 / span 2;
-  }
-
   .md\:col-span-6 {
     grid-column: span 6 / span 6;
   }
@@ -11464,16 +11432,12 @@ details.collapse summary::-webkit-details-marker {
     display: flex;
   }
 
-  .md\:h-\[30vh\] {
-    height: 30vh;
-  }
-
   .md\:h-72 {
     height: 18rem;
   }
 
-  .md\:w-full {
-    width: 100%;
+  .md\:h-\[30vh\] {
+    height: 30vh;
   }
 
   .md\:w-\[250px\] {
@@ -11484,6 +11448,10 @@ details.collapse summary::-webkit-details-marker {
     width: 300px;
   }
 
+  .md\:w-full {
+    width: 100%;
+  }
+
   .md\:max-w-\[420px\] {
     max-width: 420px;
   }
@@ -11522,16 +11490,12 @@ details.collapse summary::-webkit-details-marker {
 }
 
 @media (min-width: 1024px) {
-  .lg\:col-span-6 {
-    grid-column: span 6 / span 6;
-  }
-
   .lg\:col-span-2 {
     grid-column: span 2 / span 2;
   }
 
-  .lg\:col-span-1 {
-    grid-column: span 1 / span 1;
+  .lg\:col-span-6 {
+    grid-column: span 6 / span 6;
   }
 
   .lg\:block {
@@ -11550,10 +11514,6 @@ details.collapse summary::-webkit-details-marker {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  .lg\:grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-
   .lg\:grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
@@ -11578,10 +11538,6 @@ details.collapse summary::-webkit-details-marker {
 }
 
 @media (min-width: 1280px) {
-  .xl\:col-span-1 {
-    grid-column: span 1 / span 1;
-  }
-
   .xl\:col-span-2 {
     grid-column: span 2 / span 2;
   }
@@ -11590,16 +11546,18 @@ details.collapse summary::-webkit-details-marker {
     grid-column: span 8 / span 8;
   }
 
-  .xl\:grid-cols-6 {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
+  .xl\:grid-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
   }
 
-  .xl\:grid-cols-8 {
-    grid-template-columns: repeat(8, minmax(0, 1fr));
+  .xl\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
+}
 
-  .xl\:grid-cols-10 {
-    grid-template-columns: repeat(10, minmax(0, 1fr));
+@media (min-width: 1536px) {
+  .\32xl\:grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 }
 

diff --git a/frontend-ts/vite.config.ts b/frontend-ts/vite.config.ts
@@ -14,12 +14,17 @@ export default defineConfig({
     chunkSizeWarningLimit: 1500,
   },
   server: {
-    host: "0.0.0.0",
-    port: 8000,
+    watch: {
+      usePolling: true
+    },
+    host: '0.0.0.0',
+    hmr: { clientPort: 4200 },
+    strictPort: true,
+    port: 4200,
   },
   preview: {
     host: "0.0.0.0",
-    port: 4200,
+    port: 4220,
     // watch:
     //   {usePolling: true}
   },