From 774e1ecfa988c36a8e754c7829a73d60e4f9c064 Mon Sep 17 00:00:00 2001 From: Hanzalla Usman Date: Thu, 2 Dec 2021 21:12:59 -0500 Subject: [PATCH 1/3] Dockerizing app, work in progress --- back-end/.dockerignore | 5 +++++ back-end/Dockerfile | 19 +++++++++++++++++++ docker-compose.yml | 28 ++++++++++++++++++++++++++++ front-end/.dockerignore | 5 +++++ front-end/Dockerfile | 18 ++++++++++++++++++ 5 files changed, 75 insertions(+) create mode 100644 back-end/.dockerignore create mode 100644 back-end/Dockerfile create mode 100644 docker-compose.yml create mode 100644 front-end/.dockerignore create mode 100644 front-end/Dockerfile diff --git a/back-end/.dockerignore b/back-end/.dockerignore new file mode 100644 index 0000000..56e8146 --- /dev/null +++ b/back-end/.dockerignore @@ -0,0 +1,5 @@ +node_modules +build +.dockerignore +Dockerfile +Dockerfile.prod \ No newline at end of file diff --git a/back-end/Dockerfile b/back-end/Dockerfile new file mode 100644 index 0000000..adfd863 --- /dev/null +++ b/back-end/Dockerfile @@ -0,0 +1,19 @@ +# Base image +FROM node:16 + +# Set working directory so that all subsequent command runs in this folder +WORKDIR /back-end + +# Copy package json and install dependencies +COPY package*.json ./ +COPY package-lock.json ./ + +RUN npm install + +# Copy our app +COPY . /back-end + +# Expose port to access server +EXPOSE 3001 +# Command to run our app +CMD [ "npm", "run", "devStart"] \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..f9129ae --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,28 @@ +version: "3" +services: + # Create frontend container + frontend: # Name of our service + build: ./front-end # path to dockerfile + ports: # Port binding to host from docker container + - "3000:3000" # Bind port 3000 of host to 3000 of container + container_name: frontend-docker + restart: always # What to do if container crashes + links: + - backend + # Create backend container + backend: + # Create backend container + build: ./back-end + ports: + - "3001:3001" + container_name: backend-docker + restart: always + links: + - db + # Create database container + db: + image: mongo + ports: + - "5432:5432" + container_name: database-docker + restart: always diff --git a/front-end/.dockerignore b/front-end/.dockerignore new file mode 100644 index 0000000..56e8146 --- /dev/null +++ b/front-end/.dockerignore @@ -0,0 +1,5 @@ +node_modules +build +.dockerignore +Dockerfile +Dockerfile.prod \ No newline at end of file diff --git a/front-end/Dockerfile b/front-end/Dockerfile new file mode 100644 index 0000000..11a7133 --- /dev/null +++ b/front-end/Dockerfile @@ -0,0 +1,18 @@ +# Base image +FROM node:16 + +# Set working directory so that all subsequent command runs in this folder +WORKDIR /front-end + +# Copy package json and install dependencies +COPY package*.json ./ +RUN npm install + +# Copy our app +COPY . /front-end + +# Expose port to access server +EXPOSE 3000 + +# Command to run our app +CMD [ "npm", "start" ] \ No newline at end of file From 99a541413286af4f501f01ca23c1b46569160b39 Mon Sep 17 00:00:00 2001 From: Hanzalla Usman Date: Fri, 3 Dec 2021 00:23:44 -0500 Subject: [PATCH 2/3] dockerized app is now working, have to change endpoints --- back-end/app.js | 3 ++ back-end/package-lock.json | 35 +++++++++++++++++++ back-end/package.json | 1 + back-end/routes/users.js | 5 ++- docker-compose.yml | 25 +++++++++---- front-end/Dockerfile | 2 ++ .../src/containers/Dashboard/Dashboard.jsx | 2 +- .../src/containers/LoginPage/LoginPage.jsx | 9 +++-- .../src/containers/SignupPage/SignupPage.jsx | 9 +++-- 9 files changed, 77 insertions(+), 14 deletions(-) diff --git a/back-end/app.js b/back-end/app.js index 3c9df74..c18b430 100644 --- a/back-end/app.js +++ b/back-end/app.js @@ -8,6 +8,9 @@ const refreshTwitter = require("./refreshSocials/refreshTwitter"); const refreshReddit = require("./refreshSocials/refreshReddit"); require("dotenv").config(); +var cors = require("cors"); +app.use(cors()); // Use this after the variable declaration + const morgan = require("morgan"); // middleware for nice logging of incoming HTTP requests const dotenv = require("dotenv"); // access API_KEYS and other details dotenv.config({ path: "./.env" }); diff --git a/back-end/package-lock.json b/back-end/package-lock.json index 01f64e7..b952af9 100644 --- a/back-end/package-lock.json +++ b/back-end/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "axios": "^0.24.0", "bcryptjs": "^2.4.3", + "cors": "^2.8.5", "date-fns": "^2.27.0", "dotenv": "^10.0.0", "express": "^4.17.1", @@ -1551,6 +1552,18 @@ "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", "dev": true }, + "node_modules/cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/cron-parser": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-3.5.0.tgz", @@ -4163,6 +4176,14 @@ "node": ">=6" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-inspect": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz", @@ -6835,6 +6856,15 @@ "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", "dev": true }, + "cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "requires": { + "object-assign": "^4", + "vary": "^1" + } + }, "cron-parser": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-3.5.0.tgz", @@ -8774,6 +8804,11 @@ } } }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, "object-inspect": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz", diff --git a/back-end/package.json b/back-end/package.json index 80c8de2..1be836c 100644 --- a/back-end/package.json +++ b/back-end/package.json @@ -33,6 +33,7 @@ "dependencies": { "axios": "^0.24.0", "bcryptjs": "^2.4.3", + "cors": "^2.8.5", "date-fns": "^2.27.0", "dotenv": "^10.0.0", "express": "^4.17.1", diff --git a/back-end/routes/users.js b/back-end/routes/users.js index 653e330..97fb984 100644 --- a/back-end/routes/users.js +++ b/back-end/routes/users.js @@ -39,7 +39,10 @@ router.post("/resetPassword", async (req, res) => { if (response && response.email === email) { console.log(response); - console.log("The password are the same", response.password === passwordHashed); + console.log( + "The password are the same", + response.password === passwordHashed, + ); res .status(201) .json({ success: true, message: "Password changed successfully" }); diff --git a/docker-compose.yml b/docker-compose.yml index f9129ae..80fc9e3 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -9,6 +9,9 @@ services: restart: always # What to do if container crashes links: - backend + networks: + - webappnetwork + # Create backend container backend: # Create backend container @@ -19,10 +22,20 @@ services: restart: always links: - db + networks: + - webappnetwork + + # We dont need a seperate container for database since we are using Atlas # Create database container - db: - image: mongo - ports: - - "5432:5432" - container_name: database-docker - restart: always + # db: + # image: mongo + # ports: + # - 27017:27017 + # container_name: database-docker + # restart: always + # networks: + # - webappnetwork + +networks: + webappnetwork: + driver: bridge diff --git a/front-end/Dockerfile b/front-end/Dockerfile index 11a7133..61a5c13 100644 --- a/front-end/Dockerfile +++ b/front-end/Dockerfile @@ -6,6 +6,8 @@ WORKDIR /front-end # Copy package json and install dependencies COPY package*.json ./ +COPY package-lock.json ./ + RUN npm install # Copy our app diff --git a/front-end/src/containers/Dashboard/Dashboard.jsx b/front-end/src/containers/Dashboard/Dashboard.jsx index 7728f8a..417563d 100644 --- a/front-end/src/containers/Dashboard/Dashboard.jsx +++ b/front-end/src/containers/Dashboard/Dashboard.jsx @@ -13,7 +13,7 @@ export default function DashboardPage() { React.useEffect(() => { const getArticles = async () => { await axios - .get("/news/cryptocurrency") + .get("http://localhost:3001/news/cryptocurrency") .then((res) => { setArticles(res.data); }) diff --git a/front-end/src/containers/LoginPage/LoginPage.jsx b/front-end/src/containers/LoginPage/LoginPage.jsx index 8205c8f..2396637 100644 --- a/front-end/src/containers/LoginPage/LoginPage.jsx +++ b/front-end/src/containers/LoginPage/LoginPage.jsx @@ -52,7 +52,10 @@ const LoginPage = ({ loginHandler }) => { const augmentedLoginHandler = async () => { try { - const response = await axios.post(`users/signin`, userInput); + const response = await axios.post( + `http://localhost:3001/users/signin`, + userInput, + ); // store the response data into the data state variable setErrorMessage("Login successful"); setResponse(response.data); @@ -88,7 +91,7 @@ const LoginPage = ({ loginHandler }) => { if (response.success) { loginHandler(); - return ; + return ; } else return (
@@ -100,7 +103,7 @@ const LoginPage = ({ loginHandler }) => { aria-label="menu" sx={{ mr: 2 }} > - + diff --git a/front-end/src/containers/SignupPage/SignupPage.jsx b/front-end/src/containers/SignupPage/SignupPage.jsx index 97e834d..363a96a 100644 --- a/front-end/src/containers/SignupPage/SignupPage.jsx +++ b/front-end/src/containers/SignupPage/SignupPage.jsx @@ -41,7 +41,10 @@ const SignupPage = ({ loginHandler }) => { const augmentedLoginHandler = async () => { try { - const res = await axios.post(`users/signup`, userInput); + const res = await axios.post( + `http://localhost:3001/users/signup`, + userInput, + ); setResponse(res.data.success); } catch (err) { setErrorMessage("Invalid email address"); @@ -53,7 +56,7 @@ const SignupPage = ({ loginHandler }) => { }, [response]); if (response) { - return ; + return ; } return ( @@ -66,7 +69,7 @@ const SignupPage = ({ loginHandler }) => { aria-label="menu" sx={{ mr: 2 }} > - + From f0da903cc204c89b80a3f00bec22baa7bcb87ad3 Mon Sep 17 00:00:00 2001 From: Hanzalla Usman Date: Fri, 3 Dec 2021 00:39:15 -0500 Subject: [PATCH 3/3] small fix --- docker-compose.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 80fc9e3..4826b91 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -20,8 +20,8 @@ services: - "3001:3001" container_name: backend-docker restart: always - links: - - db + # links: + # - db networks: - webappnetwork