From 541f77ba9b622d2eaf4e94a816dce29157d26d49 Mon Sep 17 00:00:00 2001
From: garritfra <garritfranke@gmail.com>
Date: Sat, 23 Feb 2019 16:32:05 +0100
Subject: [PATCH] Add dockerfile

---
 frontend/Dockerfile        | 14 ++++++++++---
 frontend/package-lock.json | 40 ++++++++++++++++++++++++++++++++++++++
 frontend/package.json      |  5 ++++-
 frontend/src/App.tsx       |  8 +++++++-
 4 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 7f38dd8..31857b2 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,8 +1,16 @@
-FROM node
+FROM node:10-alpine
+
+RUN mkdir app
+
+COPY . /app
+
+WORKDIR /app
 
 RUN npm install \
     && npm run build
 
-EXPOSE 80
+EXPOSE 8080
+
+FROM nginx:stable-alpine
 
-CMD [ "npm", "start" ]
\ No newline at end of file
+COPY dist /usr/share/nginx/html
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index dd2655d..775b2b7 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -824,6 +824,14 @@
         "physical-cpu-count": "^2.0.0"
       }
     },
+    "@types/axios": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.0.tgz",
+      "integrity": "sha1-7CMA++fX3d1+udOr+HmZlkyvzkY=",
+      "requires": {
+        "axios": "*"
+      }
+    },
     "@types/node": {
       "version": "10.12.27",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.27.tgz",
@@ -1101,6 +1109,15 @@
         }
       }
     },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "^1.3.0",
+        "is-buffer": "^1.1.5"
+      }
+    },
     "babel-runtime": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
@@ -2598,6 +2615,29 @@
       "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
       "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I="
     },
+    "follow-redirects": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz",
+      "integrity": "sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==",
+      "requires": {
+        "debug": "^3.2.6"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        }
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 39d6726..bf78584 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,13 +4,16 @@
   "description": "",
   "main": "app.js",
   "scripts": {
-    "start": "parcel public/index.html"
+    "start": "parcel public/index.html",
+    "build": "parcel build public/index.html"
   },
   "author": "garritfra",
   "license": "ISC",
   "dependencies": {
+    "@types/axios": "^0.14.0",
     "@types/react": "^16.8.4",
     "@types/react-dom": "^16.8.2",
+    "axios": "^0.18.0",
     "body-parser": "^1.18.3",
     "express": "^4.16.4",
     "parcel-bundler": "^1.11.0",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c15901e..7c19ff4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,12 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import axios from "axios";
 
 export default function App() {
+  useEffect(() => {
+    axios.get("https://baconipsum.com/api/?type=meat-and-filler").then(res => {
+      console.log(res.data);
+    });
+  });
   return (
     <div>
       <h1>Hello from App!</h1>