From 996b7ac9bff1cfd837f1ea86af0172435f9791f0 Mon Sep 17 00:00:00 2001 From: Esteban Solano Granados Date: Mon, 13 Jun 2022 17:28:56 +0000 Subject: [PATCH] Frontend+Backend fixes Signed-off-by: GitHub --- react-aspnet-mongodb/backend/Program.cs | 50 +++++++++++++++++-- react-aspnet-mongodb/backend/ToDo.cs | 2 +- react-aspnet-mongodb/backend/appsettings.json | 13 +++++ react-aspnet-mongodb/compose.yaml | 21 +++----- react-aspnet-mongodb/db/connection.txt | 1 - react-aspnet-mongodb/frontend/Dockerfile | 42 +++++++++------- react-aspnet-mongodb/frontend/nginx.conf | 31 ++++++++++++ react-aspnet-mongodb/frontend/package.json | 2 +- react-aspnet-mongodb/frontend/src/App.js | 4 +- .../frontend/src/components/TodoList.js | 4 +- 10 files changed, 128 insertions(+), 42 deletions(-) create mode 100644 react-aspnet-mongodb/backend/appsettings.json delete mode 100644 react-aspnet-mongodb/db/connection.txt create mode 100755 react-aspnet-mongodb/frontend/nginx.conf diff --git a/react-aspnet-mongodb/backend/Program.cs b/react-aspnet-mongodb/backend/Program.cs index 403549c..2c744cc 100644 --- a/react-aspnet-mongodb/backend/Program.cs +++ b/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((_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("ToDos"); + var collection = database.GetCollection(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(); \ No newline at end of file + +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(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(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(); diff --git a/react-aspnet-mongodb/backend/ToDo.cs b/react-aspnet-mongodb/backend/ToDo.cs index 99a05a2..82b0de2 100644 --- a/react-aspnet-mongodb/backend/ToDo.cs +++ b/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; } } \ No newline at end of file diff --git a/react-aspnet-mongodb/backend/appsettings.json b/react-aspnet-mongodb/backend/appsettings.json new file mode 100644 index 0000000..f50d42b --- /dev/null +++ b/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" + } \ No newline at end of file diff --git a/react-aspnet-mongodb/compose.yaml b/react-aspnet-mongodb/compose.yaml index 44dd835..6c61744 100644 --- a/react-aspnet-mongodb/compose.yaml +++ b/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 \ No newline at end of file diff --git a/react-aspnet-mongodb/db/connection.txt b/react-aspnet-mongodb/db/connection.txt deleted file mode 100644 index 8529d51..0000000 --- a/react-aspnet-mongodb/db/connection.txt +++ /dev/null @@ -1 +0,0 @@ -mongodb://mongo:27017 \ No newline at end of file diff --git a/react-aspnet-mongodb/frontend/Dockerfile b/react-aspnet-mongodb/frontend/Dockerfile index 1debe6b..1f3d64f 100644 --- a/react-aspnet-mongodb/frontend/Dockerfile +++ b/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 + diff --git a/react-aspnet-mongodb/frontend/nginx.conf b/react-aspnet-mongodb/frontend/nginx.conf new file mode 100755 index 0000000..b23e8a4 --- /dev/null +++ b/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; + } +} diff --git a/react-aspnet-mongodb/frontend/package.json b/react-aspnet-mongodb/frontend/package.json index b447242..a38e805 100644 --- a/react-aspnet-mongodb/frontend/package.json +++ b/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%", diff --git a/react-aspnet-mongodb/frontend/src/App.js b/react-aspnet-mongodb/frontend/src/App.js index 78df4d0..7993cec 100644 --- a/react-aspnet-mongodb/frontend/src/App.js +++ b/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)); diff --git a/react-aspnet-mongodb/frontend/src/components/TodoList.js b/react-aspnet-mongodb/frontend/src/components/TodoList.js index 8551ed0..9dae941 100644 --- a/react-aspnet-mongodb/frontend/src/components/TodoList.js +++ b/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) ) : (