feat: adds news to the main app

cristianoliveira · Sep 16, 2023 · e12fd97 · e12fd97
1 parent 80531dd
commit e12fd97
Show file tree

Hide file tree

Showing 12 changed files with 52 additions and 16 deletions.
diff --git a/.watch.yaml b/.watch.yaml
@@ -20,3 +20,7 @@
   run: 'docker-compose restart chat-app'
   change: 'services/chat/**/*'
   ignore: [ 'services/chat/target/**/*' ]
+
+- name: restart news-app
+  run: 'docker-compose up news-app --build'
+  change: 'services/news/**/*'
diff --git a/app/index.html b/app/index.html
@@ -21,25 +21,30 @@
     }
   </style>
 
-  <title>Micro frontend</title>
+  <title>Distributex</title>
 </head>
 
 <body>
-  <div class="w-full p-4">
-    <h1 class="uppercase text-blue-400 font-bold" hx-target="find">HTMX rox</h1>
+  <div class="w-2/3 mx-auto">
+    <h1 class="uppercase text-blue-400 font-bold" hx-target="find">Distributex - HTMX & NGINX ❤️</h1>
     <p>
       This is a POC of micro frontend architecture using HTMX and TailwindCSS and multiple backends.
     </p>
   </div>
 
-  <div class="display-4  flex">
+  <div class="display-4 flex justify-center">
     <div class="m-4 p-4 border-1 al">
       <div hx-get="/todos" hx-trigger="load" hx-target="this" hx-swap="innerHTML"></div>
     </div>
+
     <div class="m-4 p-4 border-1 al">
       <div hx-get="/chat" hx-trigger="load" hx-target="this" hx-swap="innerHTML"></div>
     </div>
   </div>
+
+  <div class="w-full mx-auto p-4 border-1">
+    <div hx-get="/news" hx-trigger="load" hx-target="this" hx-swap="innerHTML"></div>
+  </div>
 </body>
 
 </html>
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -10,13 +10,20 @@ services:
   todos-app:
     build: services/todos
     ports:
-      - "4001:4001" # Web Server
+      - "4001:4001"
     volumes:
       - ./services/todos:/app
 
   chat-app:
     build: services/chat
     ports:
-      - "4002:4002" # Web Server
+      - "4002:4002"
     volumes:
       - ./services/chat/src:/app/src
+
+  news-app:
+    build: services/news
+    ports:
+      - "4003:4003" 
+    volumes:
+      - ./services/news:/app 
diff --git a/nginx/default.conf b/nginx/default.conf
@@ -35,4 +35,8 @@ server {
 
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     }
+
+    location /news {
+        proxy_pass http://news-app:4003/news;
+    }
 }
diff --git a/services/news/Dockerfile b/services/news/Dockerfile
@@ -0,0 +1,13 @@
+FROM python:3.9-alpine
+
+RUN mkdir -p /application
+WORKDIR /application
+
+COPY requirements.txt /application
+RUN pip install -r requirements.txt
+
+ADD . /application
+
+EXPOSE 4003
+
+CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:4003", "app:server"]
diff --git a/services/news/Makefile b/services/news/Makefile
@@ -1,7 +1,7 @@
 .Phony: run
 run:
 	@echo "Running..."
-	@gunicorn -b 0.0.0.0:4444 'app:server'
+	@gunicorn -b 0.0.0.0:4003 'app:server'
 
 .Phony: run-dev
 run-dev:

diff --git a/services/news/app/__init__.py b/services/news/app/__init__.py
@@ -3,6 +3,6 @@
 
 def main():
     print("Running server")
-    port = int(environ.get("PORT", 4444))
+    port = int(environ.get("PORT", 4003))
 
     server.run(debug=True, port=port)
diff --git a/services/news/app/api.py b/services/news/app/api.py
@@ -1,9 +1,11 @@
 import requests
+import functools
 
 def fetch_top_news():
     response = requests.get('https://hacker-news.firebaseio.com/v0/topstories.json')
     return response.json()
 
+@functools.cache
 def fetch_details_for_story(story_id):
     response = requests.get(f'https://hacker-news.firebaseio.com/v0/item/{story_id}.json')
     return response.json()
diff --git a/services/news/app/server.py b/services/news/app/server.py
@@ -3,17 +3,18 @@
 
 server = Flask(__name__)
 
-@server.route("/")
+@server.route("/news")
 def root():
     news = fetch_top_news()
     return render_template("index.html", posts=news[:10])
 
-@server.route("/story/<item_id>/link")
+@server.route("/news/story/<item_id>/link")
 def story_link(item_id):
     details = fetch_details_for_story(item_id)
     return render_template("_story_link.html", details=details)
 
-@server.route("/story/<item_id>/details")
+@server.route("/news/story/<item_id>/details")
 def story_details(item_id):
     details = fetch_details_for_story(item_id)
+
     return render_template("_story_details.html", details=details)
diff --git a/services/news/app/templates/_story_details.html b/services/news/app/templates/_story_details.html
@@ -1,5 +1,4 @@
-<h2>Story Details</h2>
-<div>
-  <div>{{details.title}}</div>
+<div class="w-1/2 mx-auto">
   <div>{{details.text}}</div>
+  <a href="{{details.url}}">Read more...</a>
 </div>
diff --git a/services/news/app/templates/_story_link.html b/services/news/app/templates/_story_link.html
@@ -1,8 +1,9 @@
 <li class="p-2">
   <a href="{{ details.url }}">{{ details.title }}</a>
   <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
-    hx-get="/story/{{ details.id }}/details" hx-target="#story-details" hx-swap="innerHTML" hx-trigger="click"
+    hx-get="/news/story/{{ details.id }}/details" hx-target="next #show-details" hx-swap="innerHTML" hx-trigger="click"
     hx-indicator="#loading">
     Show preview
   </button>
+  <div id="show-details"></div>
 </li>
diff --git a/services/news/app/templates/index.html b/services/news/app/templates/index.html
@@ -31,7 +31,7 @@ <h1 class="uppercase text-blue-400 font-bold">
 
     <ul>
       {% for post in posts %}
-      <li hx-get="/story/{{ post }}/link" hx-target="this" hx-swap="outerHTML" hx-trigger="load">loading...</li>
+      <li hx-get="/news/story/{{ post }}/link" hx-target="this" hx-swap="outerHTML" hx-trigger="load">loading...</li>
       {% endfor %}
     </ul>
   </div>