react app

README.md

@@ -0,0 +1,62 @@
+# Docker MySQL Node.js React.js App
+
+![App](https://github.com/madhurajayashanka/docker-mysql-nodejs-reactjs-app/raw/main/Thumbnail.png)
+
+"Docker MySQL Node.js React.js App" is a comprehensive demonstration repository showcasing the capabilities of Docker and Docker Compose. With a focus on simplicity and efficiency, this project illustrates the integration of Docker containers for deploying a full-stack application.
+
+The repository features a React.js frontend application where users can enter their data and submit it. The submitted data is then securely transmitted to a Node.js backend server, which processes and persists it in a MySQL database. By utilizing Docker Compose, the entire application stack, including the frontend, backend, and database, can be effortlessly orchestrated and managed as isolated containers.
+
+## Setup
+
+To set up the project, follow the steps below:
+
+### Prerequisites
+
+Before running the project, make sure you have the following installed:
+
+- Docker: [Download and Install Docker](https://docs.docker.com/get-docker/)
+
+### Installation
+
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/madhurajayashanka/docker-mysql-nodejs-reactjs-app.git
+   ```
+
+2. Navigate to the project directory:
+
+   ```bash
+   cd project-directory
+   ```
+
+3. Download the `script.sql` file and place it in the project directory.
+
+4. Run the following command to build and start the Docker containers:
+
+   ```bash
+   docker-compose up --build
+   ```
+
+5. Login to MySQL using the specified port, username, and password:
+
+   - Host: `localhost`
+   - Port: `3307`
+   - Username: `root`
+   - Password: `pass123`
+
+   You can use a MySQL client such as [MySQL Workbench](https://www.mysql.com/products/workbench/) or [phpMyAdmin](https://www.phpmyadmin.net/) to log in to the MySQL server.
+
+6. Initialize the MySQL database by executing the `script.sql` file.
+
+7. Access the application by opening the following URL in your web browser:
+
+   ```
+   http://localhost:3001
+   ```
+
+   This will take you to the ReactJS application interface where you can interact with the project.
+
+## Usage
+
+This example serves as a beginner-friendly resource to learn about full-stack Docker containerization in a practical application. It provides a simplified implementation of a full-stack application using React.js, Node.js, and MySQL, all orchestrated with Docker Compose.

backend/Dockerfile

@@ -0,0 +1,20 @@
+# Use the official Node.js 20 image as the base image
+FROM node:20
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy the package.json and package-lock.json files to the container
+COPY package*.json ./
+
+# Install the dependencies
+RUN npm install
+
+# Copy the rest of the application's source code to the container
+COPY . .
+
+# Expose the port that the application listens on
+EXPOSE 3000
+
+# Start the Node.js application
+CMD [ "npm", "start" ]

backend/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "body-parser": "^1.20.2",
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "mysql2": "^3.4.5",
+    "nodemon": "^2.0.22"
+  }
+}

backend/server.js

@@ -0,0 +1,99 @@
+const express = require("express");
+const mysql = require("mysql2");
+var cors = require("cors");
+const bodyParser = require("body-parser");
+
+// Create the Express app
+const app = express();
+app.use(cors());
+app.use(bodyParser.json());
+
+// Create a connection to the MySQL database
+const mysqlConfig = {
+  host: process.env.DB_HOST || "db",
+  port: process.env.DB_PORT || "3306",
+  user: process.env.DB_USER || "root",
+  password: process.env.DB_PASSWORD || "pass123",
+  database: process.env.DB_NAME || "appdb",
+};
+
+let con = null;
+const databaseInit = () => {
+  con = mysql.createConnection(mysqlConfig);
+  con.connect((err) => {
+    if (err) {
+      console.error("Error connecting to the database: ", err);
+      return;
+    }
+    console.log("Connected to the database");
+  });
+};
+
+const createDatabase = () => {
+  con.query("CREATE DATABASE IF NOT EXISTS appdb", (err, results) => {
+    if (err) {
+      console.error(err);
+      return;
+    }
+    console.log("Database created successfully");
+  });
+};
+
+const createTable = () => {
+  con.query(
+    "CREATE TABLE IF NOT EXISTS apptb (id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255))",
+    (err, results) => {
+      if (err) {
+        console.error(err);
+        return;
+      }
+      console.log("Table created successfully");
+    }
+  );
+};
+
+// GET request
+app.get("/user", (req, res) => {
+  databaseInit();
+  con.query("SELECT * FROM apptb", (err, results) => {
+    if (err) {
+      console.error(err);
+      res.status(500).send("Error retrieving data from database");
+    } else {
+      res.json(results);
+    }
+  });
+});
+
+// POST request
+app.post("/user", (req, res) => {
+  con.query(
+    "INSERT INTO apptb (name) VALUES (?)",
+    [req.body.data],
+    (err, results) => {
+      if (err) {
+        console.error(err);
+        res.status(500).send("Error retrieving data from database");
+      } else {
+        res.json(results);
+      }
+    }
+  );
+});
+
+app.post("/dbinit", (req, res) => {
+  databaseInit();
+  createDatabase();
+  res.json("Database created successfully");
+});
+
+app.post("/tbinit", (req, res) => {
+  databaseInit();
+  createTable();
+  res.json("Table created successfully");
+});
+
+// Start the server
+app.listen(3000, () => {
+  console.log("Server running on port 3000");
+});

docker-compose.yml

@@ -0,0 +1,41 @@
+version: "3.8"
+
+services:
+  db: # Defines the 'db' service for MySQL database
+    image: mysql:8.0 # Uses the MySQL 8.0 Docker image
+    environment: # Sets environment variables for the database configuration
+      - MYSQL_DATABASE=appdb # Specifies the name of the database
+      - MYSQL_PASSWORD=pass123 # Sets the password for the MySQL user
+      - MYSQL_ROOT_PASSWORD=pass123 # Sets the root password for MySQL
+    networks:
+      - sameNetworkAsMysql # Connects the service to the 'sameNetworkAsMysql' network
+    ports:
+      - 3307:3306 # Maps the container's port 3306 to the host's port 3307
+    volumes:
+      - ./script.sql:/docker-entrypoint-initdb.d/script.sql
+
+  api: # Defines the 'api' service for the backend API
+    build: # Builds the backend API using the provided Dockerfile
+      context: ./backend # Specifies the build context directory for the backend
+      dockerfile: Dockerfile # Specifies the Dockerfile to use for building the backend
+    ports:
+      - 3000:3000 # Maps the container's port 3000 to the host's port 3000
+    networks:
+      - sameNetworkAsMysql # Connects the service to the 'sameNetworkAsMysql' network
+    depends_on:
+      - db # Specifies that the 'api' service depends on the 'db' service
+
+  frontend: # Defines the 'frontend' service for the frontend app
+    restart: on-failure # Restarts the container if it fails
+    build: # Builds the frontend app using the provided Dockerfile
+      context: ./frontend # Specifies the build context directory for the frontend
+    ports:
+      - 3001:3000 # Maps the container's port 3000 to the host's port 3001
+    networks:
+      - sameNetworkAsMysql # Connects the service to the 'sameNetworkAsMysql' network
+    depends_on:
+      - api # Specifies that the 'frontend' service depends on the 'api' service
+
+networks:
+  sameNetworkAsMysql: # Defines the 'sameNetworkAsMysql' network
+    driver: bridge # Specifies the network driver as 'bridge'

frontend/Dockerfile

@@ -0,0 +1,23 @@
+# Use the official Node.js 20 image as the base image
+FROM node:20
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy the package.json and package-lock.json files to the container
+COPY package*.json ./
+
+# Install the dependencies
+RUN npm install
+
+# Copy the rest of the application's source code to the container
+COPY . .
+
+# Build the React.js application
+RUN npm run build
+
+# Expose the port that the application listens on
+EXPOSE 3001
+
+# Start a simple web server to serve the built React.js files
+CMD [ "npx", "serve", "-s", "build" ]

frontend/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "frontend",
+  "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.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "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"
+    ]
+  }
+}

frontend/public/index.html

@@ -0,0 +1,43 @@
+<!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" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

frontend/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

frontend/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

frontend/src/App.css

@@ -0,0 +1,71 @@
+/* App.css */
+
+.App {
+  text-align: center;
+  margin-top: 50px;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+input {
+  padding: 10px;
+  font-size: 16px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  width: 200px;
+  margin-right: 10px;
+}
+
+button {
+  padding: 10px 20px;
+  font-size: 16px;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+
+hr {
+  margin-top: 30px;
+  margin-bottom: 30px;
+  border: 0;
+  border-top: 1px solid #ccc;
+}
+
+h2 {
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+table {
+  width: 400px;
+  border-collapse: collapse;
+  margin: 0 auto;
+}
+
+th,
+td {
+  padding: 8px;
+  text-align: left;
+}
+
+th {
+  background-color: #4caf50;
+  color: white;
+}
+
+tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+tr:hover {
+  background-color: #ddd;
+}

frontend/src/App.js

@@ -0,0 +1,97 @@
+import "./App.css";
+import axios from "axios";
+import React, { useState, useEffect } from "react";
+
+const URL = "http://localhost:3000";
+function App() {
+  const [data, setData] = useState([]);
+  const [inputValue, setInputValue] = useState("");
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    try {
+      const response = await axios.get(URL + "/user");
+      console.log(response.data);
+      setData(response.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleChange = (e) => {
+    setInputValue(e.target.value);
+  };
+
+  const postData = async () => {
+    try {
+      const response = await axios.post(URL + "/user", { data: inputValue });
+      console.log(response.data);
+      fetchData(); // Fetch data again after posting
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const dbinit = async () => {
+    try {
+      const response = await axios.post(URL + "/dbinit");
+      console.log(response.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const tbinit = async () => {
+    try {
+      const response = await axios.post(URL + "/tbinit");
+      console.log(response.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <div className="App">
+      <h1>User Submit Form</h1>
+      <input name="input-parameter" onChange={handleChange} />
+      <br />
+      <br />
+      <button onClick={postData}>Submit</button> <br />
+      <br />
+      <button style={{ backgroundColor: "red" }} onClick={dbinit}>
+        DB Init
+      </button>
+      <br />
+      <br />
+      <button style={{ backgroundColor: "orange" }} onClick={tbinit}>
+        Table Init
+      </button>
+      <br />
+      <hr />
+      <h2>Users List</h2>
+      <center>
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Name</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((user) => (
+              <tr key={user.id}>
+                <td>{user.id}</td>
+                <td>{user.name}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </center>
+    </div>
+  );
+}
+
+export default App;

frontend/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

frontend/src/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

script.sql

@@ -0,0 +1,14 @@
+-- Create the appdb database
+CREATE DATABASE IF NOT EXISTS appdb;
+
+-- Use the appdb database
+USE appdb;
+
+-- Create the apptb table
+CREATE TABLE `appdb`.`apptb` (
+  `id` INT NOT NULL AUTO_INCREMENT,
+  `name` VARCHAR(45) NOT NULL,
+  PRIMARY KEY (`id`));
+
+
+