Add @fastify/cors dependency and update package name

.env.development

@@ -0,0 +1 @@
+VITE_SERVER_URL=http://127.0.0.1:5000/api

.env.production

@@ -0,0 +1 @@
+VITE_SERVER_URL=/api

docker-compose.yaml

@@ -0,0 +1,32 @@
+version: '3'
+services:
+  frontend:
+    image: node:21
+    volumes:
+      - .:/app
+    working_dir: /app
+    command: npm run dev:web
+    ports:
+      - 3000:3000
+
+  backend:
+    image: node:21
+    volumes:
+      - .:/app
+    working_dir: /app
+    command: npm run dev:server
+    ports:
+      - 5000:5000
+
+  database:
+    image: postgres:16
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: ifms
+
+  adminer:
+    image: adminer
+    restart: always
+    ports:
+      - 8080:8080

package-lock.json

@@ -8,6 +8,7 @@
       "name": "ifms-samba-pwd",
       "version": "0.0.0",
       "dependencies": {
+        "@fastify/cors": "^9.0.1",
         "@fastify/static": "^7.0.1",
         "@mdi/font": "7.0.96",
         "fastify": "^4.26.2",
@@ -538,6 +539,15 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
+    "node_modules/@fastify/cors": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@fastify/cors/-/cors-9.0.1.tgz",
+      "integrity": "sha512-YY9Ho3ovI+QHIL2hW+9X4XqQjXLjJqsU+sMV/xFsxZkE8p3GNnYVFpoOxF7SsP5ZL76gwvbo3V9L+FIekBGU4Q==",
+      "dependencies": {
+        "fastify-plugin": "^4.0.0",
+        "mnemonist": "0.39.6"
+      }
+    },
     "node_modules/@fastify/error": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/@fastify/error/-/error-3.4.1.tgz",
@@ -2799,6 +2809,14 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mnemonist": {
+      "version": "0.39.6",
+      "resolved": "https://registry.npmjs.org/mnemonist/-/mnemonist-0.39.6.tgz",
+      "integrity": "sha512-A/0v5Z59y63US00cRSLiloEIw3t5G+MiKz4BhX21FI+YBJXBOGW0ohFxTxO08dsOYlzxo87T7vGfZKYp2bcAWA==",
+      "dependencies": {
+        "obliterator": "^2.0.1"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -2851,6 +2869,11 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/obliterator": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/obliterator/-/obliterator-2.0.4.tgz",
+      "integrity": "sha512-lgHwxlxV1qIg1Eap7LgIeoBWIMFibOjbrYPIPJZcI1mmGAI2m3lNYpK12Y+GBdPQ0U1hRwSord7GIaawz962qQ=="
+    },
     "node_modules/on-exit-leak-free": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/on-exit-leak-free/-/on-exit-leak-free-2.1.2.tgz",

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ifms-samba-pwd",
+  "name": "ifms-fullstack-example",
   "version": "0.0.0",
   "type": "module",
   "scripts": {
@@ -15,6 +15,7 @@
     "start": "NODE_ENV=production node dist/server"
   },
   "dependencies": {
+    "@fastify/cors": "^9.0.1",
     "@fastify/static": "^7.0.1",
     "@mdi/font": "7.0.96",
     "fastify": "^4.26.2",

src/server/index.ts

@@ -1,4 +1,5 @@
 import Fastify from 'fastify'
+import cors from '@fastify/cors'
 import fastifyStatic from '@fastify/static'
 import { dirname } from 'node:path'
 
@@ -6,6 +7,8 @@ const fastify = Fastify({
   logger: process.env.NODE_ENV === 'development'
 })
 
+fastify.register(cors)
+
 const staticPath = dirname('/')
 
 console.log('staticPath:', staticPath)
@@ -15,9 +18,9 @@ fastify.register(fastifyStatic, {
   prefix: '/'
 })
 
-fastify.get('/hello', function (request, reply) {
+fastify.get('/api/hello', function (request, reply) {
   console.log('Hello, world!')
-  reply.send({ hello: 'world' })
+  reply.send({ hello: 'world', timestamp: new Date().toLocaleString() })
 })
 
 const port = +(process.env.PORT || 5000)

src/web/App.vue

@@ -1,9 +1,52 @@
 <template>
   <v-app id="inspire">
-    <v-navigation-drawer class="pt-4" color="grey-lighten-3" model-value>
-    </v-navigation-drawer>
-
-    <v-main> </v-main>
+    <v-main>
+      <v-container>
+        <v-row>
+          <v-col>
+            <v-card title="Funciona!">
+              <v-card-text>
+                <p>Este é um projeto Vue 3 com Vite e Vuetify.</p>
+                <p>
+                  Para começar, edite o arquivo <code>src/web/App.vue</code> e
+                  salve para recarregar a página.
+                </p>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <v-card title="Data fetching">
+              <v-card-text>
+                <p>
+                  Este é um teste para verificar a comunicação do frontend com o
+                  servidor
+                </p>
+                <p>Clique no botão para buscar os dados do servidor.</p>
+              </v-card-text>
+              <v-card-actions>
+                <v-btn @click="fetchData" color="primary">Buscar dados</v-btn>
+              </v-card-actions>
+              <v-card-text>
+                <p>{{ data }}</p>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-main>
   </v-app>
 </template>
-<script setup></script>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const data = ref('')
+
+const fetchData = async () => {
+  const response = await fetch(`${import.meta.env.VITE_SERVER_URL}/hello`)
+  const result = await response.json()
+
+  data.value = result
+}
+</script>