Frontend+Backend fixes

Signed-off-by: GitHub <noreply@github.com>

react-aspnet-mongodb/frontend/Dockerfile

@@ -1,26 +1,34 @@
-FROM node:lts AS development
+# Create image based on the official Node image from dockerhub
+FROM node:lts-buster as build
 
-WORKDIR /app
+# Create app directory
+WORKDIR /usr/src/app
 
-# add `/app/node_modules/.bin` to $PATH
-ENV PATH /app/node_modules/.bin:$PATH
+# Copy dependency definitions
+COPY package.json /usr/src/app
+COPY package-lock.json /usr/src/app
 
-# install app dependencies
-COPY package.json ./
-COPY package-lock.json ./
+# Install dependecies
+#RUN npm set progress=false \
+#    && npm config set depth 0 \
+#    && npm i install
 RUN npm ci
 
-# add app
-COPY . ./
+# Get all the code needed to run the app
+COPY . /usr/src/app
 
-# start app
-CMD ["npm", "start"]
-
-ENV CI=true
-ENV PORT=3000
-
-FROM development AS build
+# Expose the port the app runs in
+# EXPOSE 3000
+# FROM development AS build
 RUN npm run build
 
 FROM nginx:1.13-alpine
-COPY --from=build /code/build /usr/share/nginx/html
+COPY --from=build /usr/src/app/build /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
+#COPY --from=build-env "samples/dotnet-frontend/ngnix.conf" /etc/nginx/nginx.conf
+#FROM nginx:1.13-alpine
+# COPY --from=builder /usr/src/app/build /usr/share/nginx/html
+# COPY nginx/dev.conf /etc/nginx/conf.d/default.conf
+

react-aspnet-mongodb/frontend/nginx.conf

@@ -0,0 +1,31 @@
+server {
+    listen       80;
+    server_name  localhost;
+    
+    server_tokens off;
+    proxy_hide_header X-Powered-By;
+    proxy_hide_header Server;
+    add_header X-XSS-Protection "1; mode=block";
+    add_header Strict-Transport-Security 'max-age=31536000; includeSubDomains; preload';
+    add_header X-Frame-Options DENY;
+    add_header X-Content-Type-Options nosniff;
+    add_header X-Permitted-Cross-Domain-Policies master-only;
+    add_header Referrer-Policy same-origin;
+    add_header Expect-CT 'max-age=60';
+    add_header Feature-Policy "accelerometer none; ambient-light-sensor none; battery none; camera none; gyroscope none;";
+    
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api {
+        proxy_set_header  Host $host;
+        proxy_set_header  X-Real-IP $remote_addr;
+        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header  X-Forwarded-Host $server_name;
+        proxy_pass        http://backend:8000;
+        proxy_redirect    default;
+    }
+}

react-aspnet-mongodb/frontend/package.json

@@ -27,7 +27,7 @@
   "eslintConfig": {
     "extends": "react-app"
   },
-  "proxy": "http://backend:3000",
+  "proxy": "http://backend:8000",
   "browserslist": {
     "production": [
       ">0.2%",

react-aspnet-mongodb/frontend/src/App.js

@@ -15,10 +15,10 @@ export default class App extends React.Component {
 
   componentDidMount() {
     axios
-      .get("/api")
+      .get("/api/todos")
       .then((response) => {
         this.setState({
-          todos: response.data.data,
+          todos: response.data,
         });
       })
       .catch((e) => console.log("Error : ", e));

react-aspnet-mongodb/frontend/src/components/TodoList.js

@@ -37,8 +37,8 @@ export default class TodoList extends React.Component {
   }
 
   render() {
-    let { todos } = this.props;
-    return todos.length > 0 ? (
+    const { todos } = this.props;
+    return (todos || []).length > 0 ? (
       this.renderTodos(todos)
     ) : (
       <div className="alert alert-primary" role="alert">