Creating Website

backend/.dockerignore

@@ -0,0 +1,3 @@
+.dockerignore
+Dockerfile
+node_modules/

backend/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json .
+
+RUN npm install
+
+COPY . .
+
+EXPOSE 5000
+
+CMD [ "npm", "start" ]

backend/config/.env

@@ -0,0 +1 @@
+PORT=5000

backend/models/Task.js

@@ -0,0 +1,10 @@
+const mongoose = require("mongoose");
+
+const taskSchema = new mongoose.Schema({
+  text: {
+    type: String,
+    required: true,
+  },
+});
+
+module.exports = mongoose.model("Task", taskSchema);

backend/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "server",
+  "version": "1.0.0",
+  "description": "",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "dotenv": "^16.0.3",
+    "express": "^4.18.2",
+    "mongoose": "^6.6.6",
+    "morgan": "^1.10.0",
+    "nodemon": "^2.0.20",
+    "pm2": "^5.2.2"
+  }
+}

backend/routes/tasks.js

@@ -0,0 +1,22 @@
+const router = require("express").Router();
+const Task = require("../models/Task");
+
+router.get("/tasks", async (req, res) => {
+  const tasks = await Task.find();
+  res.json(tasks);
+});
+
+router.post("/tasks", async (req, res) => {
+  const newtask = new Task({
+    text: req.body.text,
+  });
+  const savedTask = await newtask.save();
+  res.json(savedTask);
+});
+
+router.delete("/tasks/:id", async (req, res) => {
+  await Task.findByIdAndDelete(req.params.id);
+  res.end();
+});
+
+module.exports = router;

backend/server.js

@@ -0,0 +1,20 @@
+require("dotenv").config();
+const express = require("express");
+const mongoose = require("mongoose");
+const morgan = require("morgan");
+const tasksRoute = require("./routes/tasks");
+
+mongoose
+  .connect("mongodb://mongo-db:27017/MERN_DockerDb")
+  .then(() => console.log("Connected"))
+  .catch(() => console.log("Not connected"));
+
+const app = express();
+
+app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
+app.use(morgan());
+
+app.use(tasksRoute);
+
+app.listen(5000, console.log("Running on 5000"));

docker-compose.yaml

@@ -0,0 +1,40 @@
+version: "3"
+
+services:
+  frontend:
+    build: ./frontend
+    container_name: react-app
+    ports:
+      - "3000:3000"
+    stdin_open: true
+    tty: true
+    depends_on:
+      - backend
+    networks:
+      - mern-networks
+
+  backend:
+    build: ./backend
+    container_name: node-api
+    ports:
+      - "5000:5000"
+
+    restart: always
+    depends_on:
+      - database
+    networks:
+      - mern-networks
+
+  database:
+    image: mongo
+    container_name: mongo-db
+    ports:
+      - "27017:27017"
+    volumes:
+      - /home/blu3m00n/Documents/Informatique/Développement/MongoDb/mongo-backup:/data/db
+    networks:
+      - mern-networks
+
+networks:
+  mern-networks:
+    driver: bridge

frontend/.dockerignore

@@ -0,0 +1,4 @@
+.dockerignore
+Dockerfile
+node_modules/
+

frontend/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json .
+
+RUN npm install
+
+COPY . .
+
+EXPOSE 3000
+
+CMD [ "npm", "start" ]

frontend/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "mern_docker",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.1.3",
+    "nodemon": "^2.0.19",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "server": "json-server --watch db.json --port 5000",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "proxy": "http://node-api:5000"
+}

frontend/public/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+  <title>MERN Docker</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>

frontend/src/App.jsx

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from "react";
+import Header from "./components/Header";
+import Tasks from "./components/Tasks";
+import TaskForm from "./components/TaskForm";
+import axios from "axios";
+
+const App = () => {
+  const [showForm, setShowForm] = useState(false);
+  const [tasks, setTasks] = useState([]);
+
+  useEffect(() => {
+    const fetchTasks = async () => {
+      const { data } = await axios.get("/tasks");
+      console.log(data);
+      setTasks(data);
+    };
+    fetchTasks();
+  }, []);
+
+  const addTask = async (task) => {
+    const res = await fetch("/tasks", {
+      method: "post",
+      headers: {
+        "content-type": "application/json",
+      },
+      body: JSON.stringify(task),
+    });
+
+    const data = await res.json();
+
+    setTasks([...tasks, data]);
+  };
+
+  const deleteTask = async (id) => {
+    await axios.delete(`/tasks/${id}`);
+
+    setTasks(tasks.filter((task) => task._id !== id));
+  };
+
+  return (
+    <div className="container">
+      <Header
+        formToggle={() => setShowForm(!showForm)}
+        currentState={showForm}
+      />
+      {showForm && <TaskForm addTask={addTask} />}
+      {tasks.length > 0 ? (
+        <Tasks tasks={tasks} deleteTask={deleteTask} />
+      ) : (
+        "No tasks!"
+      )}
+    </div>
+  );
+};
+
+export default App;

frontend/src/components/Button.jsx

@@ -0,0 +1,10 @@
+const Button = ({formToggle, currentState}) => {
+  return (
+    <button className="add-btn" onClick={formToggle} 
+      style={{backgroundColor: currentState ? "red": "green"}}>
+        {currentState ? "Close" : "Add"}
+    </button>
+  )
+}
+
+export default Button

frontend/src/components/Header.jsx

@@ -0,0 +1,12 @@
+import Button from "./Button"
+
+const Header = ({ formToggle, currentState }) => {
+  return (
+    <header className="header">
+      <h1>MERN Docker</h1>
+      <Button formToggle={formToggle} currentState={currentState} />
+    </header>
+  )
+}
+
+export default Header

frontend/src/components/Task.jsx

@@ -0,0 +1,17 @@
+import { FaTimes } from "react-icons/fa";
+
+const Task = ({ task, deleteTask }) => {
+  return (
+    <div className="task">
+      <h3>
+        {task.text}
+        <FaTimes
+          style={{ color: "red" }}
+          onClick={() => deleteTask(task._id)}
+        />
+      </h3>
+    </div>
+  );
+};
+
+export default Task;

frontend/src/components/TaskForm.jsx

@@ -0,0 +1,31 @@
+import {useState} from "react"
+
+const TaskForm = ({addTask}) => {
+    const [task, setTask] = useState("")
+
+    const onSubmit = (e) => {
+        e.preventDefault()
+
+        if(!task) {
+            alert("Enter a task!")
+            return;
+        }
+
+        addTask({text: task})
+
+        setTask("")
+    }
+  return (
+
+    <form onSubmit={onSubmit}>
+        <div>
+            <label htmlFor="task">Task</label>
+            <input type="text" placeholder="Add Task"
+            value={task} onChange={(e) => setTask(e.target.value)}/>
+        </div>
+        <button className="save-btn">Save Task</button>
+    </form>
+  )
+}
+
+export default TaskForm

frontend/src/components/Tasks.jsx

@@ -0,0 +1,13 @@
+import Task from "./Task"
+
+const Tasks = ({tasks, deleteTask}) => {
+  return (
+    <>
+        {tasks.map((task, index) => (
+            <Task key={index} task={task} deleteTask={deleteTask}/>
+        ))}
+    </>
+  )
+}
+
+export default Tasks