Merge pull request #2 from JonathanBout/main

Docker fixes

Dockerfile

@@ -1,22 +1,23 @@
-FROM node:lts-alpine
-
-# install simple http server for serving static content
-RUN npm install -g http-server
-
-# make the 'app' folder the current working directory
+# Use the node image from official Docker Hub
+FROM node:lts-alpine as build-stage
+# set the working directory
 WORKDIR /app
-
-# copy both 'package.json' and 'package-lock.json' (if available)
+# Copy the working directory in the container
 COPY package*.json ./
-
-# install project dependencies
+# Install the project dependencies
 RUN npm install
-
-# copy project files and folders to the current working directory (i.e. 'app' folder)
+# Copy the rest of the project files to the container
 COPY . .
-
-# build app for production with minification
+# Build the Vue.js application to the production mode to dist folder
 RUN npm run build
-
-EXPOSE 5000
-CMD [ "http-server", "dist", "-p", "5000" ]
+# Use the lightweight Nginx image from the previous stage for the nginx container
+FROM nginx:stable-alpine as production-stage
+WORKDIR /app
+# Copy the build application from the previous stage to the Nginx container
+COPY --from=build-stage /app/dist ./
+# Copy the nginx configuration file
+COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
+# Expose the port 80
+EXPOSE 80
+# Start Nginx to serve the application
+CMD ["nginx", "-g", "daemon off;"]

compose.yaml

@@ -5,4 +5,4 @@ services:
     environment:
       NODE_ENV: production
     ports:
-      - 20000:5000
+      - 20000:80

nginx/default.conf

@@ -0,0 +1,9 @@
+server {
+ listen 80;
+ server_name localhost;
+ root /app;
+ index index.html;
+location / {
+ try_files $uri $uri/ /index.html;
+ }
+}

src/router/index.ts

@@ -1,36 +1,36 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '@/views/IndexView.vue'
+import IndexView from '@/views/IndexView.vue'
 
 const formatDate = (date: Date) => {
   return `/${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
 }
 
-const randomDate = () => {
+const randomDateUrl = () => {
   const start = new Date(1995, 5, 16)
   const end = new Date()
   const date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()))
   return formatDate(date)
 }
 
-const today = () => formatDate(new Date())
+const todayUrl = () => formatDate(new Date())
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
       name: 'home',
-      redirect: today
+      redirect: todayUrl
     },
     {
       path: '/:year([0-9]{4})/:month([0-9]{1,2})/:day([0-9]{1,2})',
       name: 'apod',
-      component: HomeView
+      component: IndexView
     },
     {
       path: '/random',
       name: 'picker',
-      redirect: randomDate
+      redirect: randomDateUrl
     },
     {
       path: '/:catchAll(.*)',

src/views/IndexView.vue

@@ -27,13 +27,6 @@ const pathFromDate = (date: Date) => {
 
 const load = async () => {
   loading.value = true
-  if (
-    route.params.year != date.value.getFullYear().toString() ||
-    route.params.month != (date.value.getMonth() + 1).toString() ||
-    route.params.day != date.value.getDate().toString()
-  ) {
-    router.push(pathFromDate(date.value) ?? '/')
-  }
   response.value = await api.getApod(date.value)
   loading.value = false
 }
@@ -57,10 +50,10 @@ watch(date, load)
   <div class="apod">
     <div class="nav separated">
       <span>
-        <router-link :to="{ path: pathFromDate(addDays(date, -1)) }">Previous Day</router-link>
+        <a :href="pathFromDate(addDays(date, -1))">Previous Day</a>
       </span>
       <span>
-        <router-link to="/random">Random</router-link>
+        <a href="/random">Random</a>
       </span>
       <span>
         <input
@@ -72,10 +65,10 @@ watch(date, load)
         />
       </span>
       <span>
-        <router-link to="/">Today</router-link>
+        <a href="/">Today</a>
       </span>
       <span>
-        <router-link :to="{ path: pathFromDate(addDays(date, 1)) }">Next Day</router-link>
+        <a :href="pathFromDate(addDays(date, 1))">Next Day</a>
       </span>
     </div>
     <template v-if="has_error()">