[IMPROVE] Dockerfile to support hot-reload

app/Dockerfile.development

@@ -0,0 +1,32 @@
+# Dockerfile
+
+# Use node alpine as it's a small node image
+FROM node:16-alpine
+
+
+# Set /app as the working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+# to the /app working directory
+COPY package.json package-lock.json ./
+
+# Install dependencies in /app
+RUN npm i
+
+# Copy the rest of our Next.js folder into /app
+COPY next.config.js ./next.config.js
+COPY apollo-client.js ./apollo-client.js
+
+COPY pages ./pages
+COPY public ./public
+COPY styles ./styles
+COPY components ./components
+COPY lib ./lib
+COPY assets ./assets
+
+# Ensure port 3000 is accessible to our system
+EXPOSE 3000
+
+# Run npm run dev, as we would via the command line
+CMD [ "npm", "run", "dev" ]

app/docker-compose.dev.yml

@@ -0,0 +1,27 @@
+# docker-compose.yml
+
+version: "3"
+
+services:
+  app:
+    image: docker-nextjs-dev
+    env_file:
+      - .env
+    build:
+      dockerfile: Dockerfile.development
+    ports:
+      - "$NEXTJS_PORT:3000"
+    networks:
+      - spnet
+      - oesnet
+    volumes:
+      - ./pages:/app/pages
+      - ./public:/app/public
+      - ./styles:/app/styles
+      - ./assets:/app/assets
+
+networks:
+  spnet:
+    external: true
+  oesnet:
+    external: true

app/docker-compose.yml

@@ -9,6 +9,11 @@ services:
         container_name: rc4conf
         restart: unless-stopped
         working_dir: /app
+        volumes:
+          - ./pages:/app/pages
+          - ./public:/app/public
+          - ./styles:/app/styles
+          - ./components:/app/components
         networks:
           - spnet
           - oesnet

app/next.config.js

@@ -16,6 +16,10 @@ module.exports = {
         fs: false
       }
     }
+    config.watchOptions = {
+      poll: 1000,
+      aggregateTimeout: 300
+    }
     return config
   }
 }

docs/conferences/README.md

@@ -53,6 +53,10 @@ The client-side of RC4Conferences is developed using NextJS, to start the develo
 ```
 sh startNext.sh localhost
 ```
+The client-side of RC4Conferences is developed using NextJS, to start the development environment of NextJS using docker run the following command
+```
+sh startNext.sh localhost --docker
+```
 _Note: Please replace the "localhost" (127.0.0.1) with your static IP if you are doing environment setup on your VM. For e.g. `173.456.1.19`_
 
 On a successful execution of script, the NextJS will start on port `3000` (default) or if it is occupied the next available port shall be used e.g., `3001`.

startNext.sh

@@ -22,11 +22,19 @@ check_and_set_next_port
 
 export NEXT_PUBLIC_PORT=$NEXTJS_PORT
 
-if [ "$2" = 'production' ]; then
+if [ "$2" = '--docker' ]
+then
     printf '\nNEXT_PUBLIC_API_URL'="https://$1:$NEXTJS_PORT" >> app/.env
-    echo "--Starting NextJS Production Client--"
+    echo "--Starting NextJS Client using docker--"
     cd app
-    docker-compose up -d
+    docker-compose -f docker-compose.dev.yml up --build
+elif [ "$2" = 'production' ] 
+then
+     printf '\nNEXT_PUBLIC_API_URL'="https://$1:$NEXTJS_PORT" >> app/.env
+     echo "--Starting NextJS Production Client--"
+     cd app
+     docker-compose up -d
+
 else
     printf '\nNEXT_PUBLIC_API_URL'="http://$1:$NEXTJS_PORT" >> app/.env
     echo "--Starting NextJS Development Client--"