dockerize app

.dockerignore

@@ -0,0 +1,12 @@
+.eslintignore
+.eslintrc.cjs
+.git
+.github
+.gitignore
+.husky
+babel.config.ts
+jest.config.ts
+tailwind.config.ts
+tsconfig.json
+tsconfig.node.json
+vite.config.ts

.github/workflows/main.yml

@@ -6,6 +6,10 @@ on:
   pull_request:
     branches:
       - "**"
+env:
+  IMAGE_NAME: messaging_app
+  # REPO_NAME: 
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -18,3 +22,10 @@ jobs:
     - run: npm install
     - run: npm run lint
     - run: npm run test
+    - name: Build docker image
+      run: |
+        docker build . -t $IMAGE_NAME
+    - name: Run docker container
+      run: |
+        docker run -d -e 5173:5173 -host=172.17.0.2 $IMAGE_NAME:latest && \
+          docker ps && sleep 5

Dockerfile

@@ -0,0 +1,6 @@
+FROM node:20
+WORKDIR /app
+COPY package.json ./
+RUN npm install
+COPY . .
+CMD ["npm", "run", "dev"]

README.md

@@ -28,3 +28,17 @@ export default {
 - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
 - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
 - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+
+## Run Application
+```npm run dev```
+## Run Unit Tests
+```npm run test```
+## Run Lint
+```npm run lint```
+## Using Docker
+### Build Docker Image
+```docker build -t messagging_app .```
+### Run Docker container
+```docker run -it -p 5173:5173 -host=172.17.0.2 messagging_app:latest```
+### Docker-compose
+```docker-compose up```

docker-compose.yaml

@@ -0,0 +1,9 @@
+version: "3"
+services:
+  messaging_app:
+    image: messaging_app
+    build:
+      context: ./
+    ports:
+      - 5173:5173
+    container_name: messaging_app

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite -d --host",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",

src/components/Login.tsx

@@ -1,6 +1,7 @@
 import '../index.css'
 
 import { useState } from "react";
+import React from 'react';
 
 const Login: React.FC = () => {
   // const { setUser } = useContext(UserContext);