Frontend+Backend fixes

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

react-aspnet-mongodb/backend/Program.cs

@@ -8,18 +8,21 @@ using Models;
 
 var builder = WebApplication.CreateBuilder(args);
 
-string connectionString = File.ReadAllText("/run/secrets/db-connection");
+string connectionString = builder.Configuration.GetConnectionString("DocumentDbConnection");
+string databaseName = builder.Configuration["DocumentDbName"] ?? "BackendMongoDb";
+string collectionName = builder.Configuration["DocumentCollectionName"] ?? "ToDos";
+
 builder.Services.AddTransient<MongoClient>((_provider) => new MongoClient(connectionString));
 
 var app = builder.Build();
 
-app.MapGet("/api", async (MongoClient connection) => {
+app.MapGet("/api/todos", async (MongoClient connection) => {
     try
     {
         var client = new MongoClient(connectionString);  
-        var database = client.GetDatabase("BackendMongoDb");  
+        var database = client.GetDatabase(databaseName);  
 
-        var collection = database.GetCollection<ToDo>("ToDos");
+        var collection = database.GetCollection<ToDo>(collectionName);
         var results = await collection.Find(_ => true).ToListAsync().ConfigureAwait(false);
 
         return Results.Ok(results);
@@ -30,4 +33,41 @@ app.MapGet("/api", async (MongoClient connection) => {
     }
 });
 
-app.Run();
+
+app.MapGet("/api/todos/{id}", async (string id, MongoClient connection) => {
+    try
+    {
+        var client = new MongoClient(connectionString);  
+        var database = client.GetDatabase(databaseName);  
+
+        var collection = database.GetCollection<ToDo>(collectionName);
+        var result = await collection.FindAsync(record => record.Id == id).ConfigureAwait(false);
+
+        return result is ToDo todo
+                ? Results.Ok(todo)
+                : Results.NotFound();
+    }
+    catch (Exception ex)
+    {
+        return Results.Problem(detail: ex.ToString());
+    }
+});
+
+app.MapPost("/api/todos", async (ToDo record, MongoClient connection) => {
+    try
+    {
+        var client = new MongoClient(connectionString);  
+        var database = client.GetDatabase(databaseName);  
+
+        var collection = database.GetCollection<ToDo>(collectionName);
+        await collection.InsertOneAsync(record).ConfigureAwait(false);
+
+        return Results.Created($"/api/todos/{record.Id}", record);
+    }
+    catch (Exception ex)
+    {
+        return Results.Problem(detail: ex.ToString());
+    }
+});
+
+app.Run();

react-aspnet-mongodb/backend/ToDo.cs

@@ -9,5 +9,5 @@ public class ToDo
     [BsonRepresentation(BsonType.ObjectId)]
     public string Id { get; set; }
 
-    public string Description { get; set; }
+    public string Text { get; set; }
 }

react-aspnet-mongodb/backend/appsettings.json

@@ -0,0 +1,13 @@
+{
+    "Logging": {
+      "LogLevel": {
+        "Default": "Information",
+        "Microsoft.AspNetCore": "Warning"
+      }
+    },
+    "ConnectionStrings": {
+        "DocumentDbConnection": "mongodb://mongo:27017"
+    },
+    "DocumentDbName": "BackendMongoDb",
+    "DocumentCollectionName": "ToDos2"
+  }

react-aspnet-mongodb/compose.yaml

@@ -2,29 +2,30 @@ services:
   frontend:
     build:
       context: frontend
-      target: development
     ports:
-      - 3000:3000
+      - 80:80
     volumes:
-      - ./frontend/src:/app
+      - '.:/app'
+      - '/app/node_modules'
     networks:
       - react-frontend
     depends_on:
       - backend
+    links:
+      - backend
 
   backend:
     build: backend
     restart: always
+    ports:
+      - 8000:8000
     depends_on: 
       - mongo
     environment:
       - ASPNETCORE_URLS=http://+:8000
-    secrets:
-      - db-connection
     networks:
       - react-backend
-    ports:
-      - 8000:8000
+      - react-frontend
 
   mongo:
     restart: always
@@ -33,13 +34,7 @@ services:
       - ./data:/data/db
     networks:
       - react-backend
-    expose:
-      - 27017
 
 networks:
   react-backend: {}
   react-frontend: {}
-
-secrets:
-  db-connection:
-    file: db/connection.txt

react-aspnet-mongodb/db/connection.txt

@@ -1 +0,0 @@
-mongodb://mongo:27017

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">