feat(adopt-a-pup): frontend server endpoint for news (#58)

Jaime Ramírez

2020-06-17 fecb99ce6a7fcf18be6fc3ce830d5a8dfd76d0eb

feat(adopt-a-pup): frontend server endpoint for news (#58)

 adopt-a-pup/web-app/.env.example

@@ -1,6 +1,10 @@
# Env for React app
REACT_APP_ADOPTION_SERVICE_URL=http://localhost:8080
REACT_APP_ANIMAL_SERVICE_URL=http://localhost:8081
REACT_APP_SHELTER_SERVICE_URL=http://localhost:8082
REACT_APP_NEWS_ENABLED=1
REACT_APP_NEWS_SERVICE_URL=http://localhost:5000/
REACT_APP_NEWS_SERVICE_URL=/frontend
REACT_APP_EMAIL_APP_URL=http://email-adoptapup.apps.ocp4.example.com/

# Env for backend (server.js)
BACKEND_NEWS_SERVICE_URL=http://localhost:5000

 adopt-a-pup/web-app/Dockerfile

@@ -11,9 +11,9 @@
ENV REACT_APP_ADOPTION_SERVICE_URL=http://istio-ingressgateway-istio-system.apps.ocp4.example.com/ \
    REACT_APP_ANIMAL_SERVICE_URL=http://istio-ingressgateway-istio-system.apps.ocp4.example.com/ \
    REACT_APP_SHELTER_SERVICE_URL=http://istio-ingressgateway-istio-system.apps.ocp4.example.com/ \
    REACT_APP_EMAIL_APP_URL=http://email-adoptapup.apps.ocp4.example.com/ \
    REACT_APP_NEWS_ENABLED=1 \
    REACT_APP_NEWS_SERVICE_URL=http://news-adoptapup-news.apps.ocp4.example.com \
    REACT_APP_EMAIL_APP_URL=http://email-adoptapup.apps.ocp4.example.com/
    BACKEND_NEWS_SERVICE_URL=http://news-adoptapup-news.apps.ocp4.example.com/

EXPOSE 8080


 adopt-a-pup/web-app/README.md

@@ -25,11 +25,13 @@

To specify these variables. Create the `.env` file as follows:

```
```sh
REACT_APP_NEWS_ENABLED=1
REACT_APP_ADOPTION_SERVICE_URL=http://localhost:8080
REACT_APP_ANIMAL_SERVICE_URL=http://localhost:8081
REACT_APP_SHELTER_SERVICE_URL=http://localhost:8082
# This variable is used by the server.js backend
BACKEND_NEWS_SERVICE_URL=http://localhost:5000
```

Note that if urls for the backend services are not provided, the web-app will use fake data instead.

 adopt-a-pup/web-app/package-lock.json

@@ -3095,7 +3095,6 @@
      "version": "0.19.2",
      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
      "dev": true,
      "requires": {
        "follow-redirects": "1.5.10"
      }
@@ -7080,7 +7079,6 @@
      "version": "1.5.10",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
      "dev": true,
      "requires": {
        "debug": "=3.1.0"
      },
@@ -7089,7 +7087,6 @@
          "version": "3.1.0",
          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
          "dev": true,
          "requires": {
            "ms": "2.0.0"
          }

 adopt-a-pup/web-app/package.json

@@ -4,6 +4,7 @@
  "private": true,
  "homepage": "/frontend",
  "dependencies": {
    "axios": "^0.19.2",
    "dotenv": "8.2.0",
    "express": "^4.17.1"
  },
@@ -24,7 +25,6 @@
    "@types/react-router-dom": "^5.1.5",
    "@typescript-eslint/eslint-plugin": "^2.10.0",
    "@typescript-eslint/parser": "^2.10.0",
    "axios": "^0.19.2",
    "babel-eslint": "10.1.0",
    "babel-jest": "^24.9.0",
    "babel-loader": "8.1.0",

 adopt-a-pup/web-app/server.js

@@ -5,11 +5,15 @@
require("dotenv").config();
const express = require("express");
const path = require("path");
const Axios = require("axios").default;
const fs = require("fs").promises;
const app = express();


const PORT = process.env.PORT || 8080;
const BUILD_PATH = path.join(__dirname, "build");
const INDEX_FILEPATH = path.join(__dirname, "build", "index.html");
const newsAxios =  Axios.create({ baseURL: process.env.BACKEND_NEWS_SERVICE_URL });
const app = express();


// Setup server (Middlewares are evaluated in order)
@@ -28,11 +32,22 @@
// Serve the file if the route is a static file (css, js...)
app.use("/frontend", express.static(BUILD_PATH));

// News service AJAX endpoint
app.get("/frontend/news/puppies", async(req, res) => {
    try {
        const { data } = await newsAxios.get("/news/puppies");
        res.send(data);
    } catch (error) {
        console.error(error);
        const status = error.response ? error.response.status : 500;
        res.status(status).send(error.message || "Unknown error while calling news service");
    }
});

// For the rest of paths we also serve index.html with env variables
app.get("/*", sendIndexWithEnv);


const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
    console.log(`Server listening at ${PORT}`);
});

 adopt-a-pup/web-app/src/Config.ts

@@ -2,10 +2,11 @@
    ADOPTION_SERVICE_URL: getEnv("REACT_APP_ADOPTION_SERVICE_URL"),
    ANIMAL_SERVICE_URL: getEnv("REACT_APP_ANIMAL_SERVICE_URL"),
    SHELTER_SERVICE_URL: getEnv("REACT_APP_SHELTER_SERVICE_URL"),
    NEWS_SERVICE_URL: getEnv("REACT_APP_NEWS_SERVICE_URL"),
    // If REACT_APP_NEWS_SERVICE_URL is not specified,
    // the app tries to fetch news from the endpoint exposed in "server.js"
    NEWS_SERVICE_URL: getEnv("REACT_APP_NEWS_SERVICE_URL") || "/frontend",
    NEWS_ENABLED: getEnv("REACT_APP_NEWS_ENABLED"),
    getEnv

};

function getEnv(variable: string) {