From 2b6e3ad7fecfb372d3413c3b6a7cfbedb6e7b921 Mon Sep 17 00:00:00 2001 From: Douglas Barone Date: Fri, 6 Oct 2023 14:40:16 -0400 Subject: [PATCH] Client connection setup --- .env.development | 1 + .env.production | 1 + package-lock.json | 54 ++++++++++++++++++++++++++++++++++++++++- package.json | 4 ++- src/server/index.ts | 6 ++--- src/server/lib/hello.ts | 1 + src/server/server.ts | 2 ++ src/web/App.vue | 19 ++++++++++++--- src/web/main.ts | 2 +- src/web/trpc.ts | 16 ++++++++++++ 10 files changed, 96 insertions(+), 10 deletions(-) create mode 100644 .env.development create mode 100644 .env.production create mode 100644 src/web/trpc.ts diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..c9b6e01 --- /dev/null +++ b/.env.development @@ -0,0 +1 @@ +VITE_SERVER_URL=http://127.0.0.1:8080 diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..dd443a3 --- /dev/null +++ b/.env.production @@ -0,0 +1 @@ +VITE_SERVER_URL=https://cp.pp.ifms.edu.br diff --git a/package-lock.json b/package-lock.json index 3b5e6db..5fb8008 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,8 +11,10 @@ "@mdi/font": "7.0.96", "@trpc/client": "^10.38.5", "@trpc/server": "^10.38.5", + "@types/cors": "^2.8.14", "@types/express": "^4.17.18", "body-parser": "^1.20.2", + "cors": "^2.8.5", "express": "^4.18.2", "roboto-fontface": "*", "vue": "^3.2.0", @@ -28,7 +30,7 @@ "@vitejs/plugin-vue": "^4.0.0", "concurrently": "^8.2.1", "tsx": "^3.13.0", - "typescript": "^5.0.0", + "typescript": "^5.2.2", "vite": "^4.2.0", "vite-plugin-vuetify": "^1.0.0", "vue-tsc": "^1.2.0" @@ -465,6 +467,14 @@ "@types/node": "*" } }, + "node_modules/@types/cors": { + "version": "2.8.14", + "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.14.tgz", + "integrity": "sha512-RXHUvNWYICtbP6s18PnOCaqToK8y14DnLd75c6HfyKf228dxy7pHNOQkxPtvXKp/hINFMDjbYzsj63nnpPMSRQ==", + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/express": { "version": "4.17.18", "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.18.tgz", @@ -975,6 +985,18 @@ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==" }, + "node_modules/cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", @@ -1594,6 +1616,14 @@ "node": ">= 0.6" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-inspect": { "version": "1.12.3", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz", @@ -2577,6 +2607,14 @@ "@types/node": "*" } }, + "@types/cors": { + "version": "2.8.14", + "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.14.tgz", + "integrity": "sha512-RXHUvNWYICtbP6s18PnOCaqToK8y14DnLd75c6HfyKf228dxy7pHNOQkxPtvXKp/hINFMDjbYzsj63nnpPMSRQ==", + "requires": { + "@types/node": "*" + } + }, "@types/express": { "version": "4.17.18", "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.18.tgz", @@ -3014,6 +3052,15 @@ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==" }, + "cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "requires": { + "object-assign": "^4", + "vary": "^1" + } + }, "csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", @@ -3468,6 +3515,11 @@ "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==" }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" + }, "object-inspect": { "version": "1.12.3", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz", diff --git a/package.json b/package.json index f935ef8..3cec6c6 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,10 @@ "@mdi/font": "7.0.96", "@trpc/client": "^10.38.5", "@trpc/server": "^10.38.5", + "@types/cors": "^2.8.14", "@types/express": "^4.17.18", "body-parser": "^1.20.2", + "cors": "^2.8.5", "express": "^4.18.2", "roboto-fontface": "*", "vue": "^3.2.0", @@ -29,7 +31,7 @@ "@vitejs/plugin-vue": "^4.0.0", "concurrently": "^8.2.1", "tsx": "^3.13.0", - "typescript": "^5.0.0", + "typescript": "^5.2.2", "vite": "^4.2.0", "vite-plugin-vuetify": "^1.0.0", "vue-tsc": "^1.2.0" diff --git a/src/server/index.ts b/src/server/index.ts index d100fcb..419bfd2 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -1,7 +1,7 @@ import { server } from './server' -const PORT = process.env.PORT || 8080 +export const SERVER_PORT = process.env.PORT || 8080 -server.listen(PORT, () => { - console.log(`Server ready on http://localhost:${PORT}`) +server.listen(SERVER_PORT, () => { + console.log(`Server ready on http://localhost:${SERVER_PORT}`) }) diff --git a/src/server/lib/hello.ts b/src/server/lib/hello.ts index 10f11f9..47eada0 100644 --- a/src/server/lib/hello.ts +++ b/src/server/lib/hello.ts @@ -1,3 +1,4 @@ export function hello(name: string) { + console.log(`hello ${name}`) return { message: `hello ${name}` } } diff --git a/src/server/server.ts b/src/server/server.ts index 31384c4..016f6ef 100644 --- a/src/server/server.ts +++ b/src/server/server.ts @@ -1,8 +1,10 @@ import express from 'express' import { trpcMiddleware } from './trpc' +import cors from 'cors' const server = express() +server.use(cors()) server.use('/trpc', trpcMiddleware) export { server } diff --git a/src/web/App.vue b/src/web/App.vue index 8f46f32..e247923 100644 --- a/src/web/App.vue +++ b/src/web/App.vue @@ -1,11 +1,22 @@ diff --git a/src/web/main.ts b/src/web/main.ts index f11674d..a05f207 100644 --- a/src/web/main.ts +++ b/src/web/main.ts @@ -11,7 +11,7 @@ import App from './App.vue' import { createApp } from 'vue' // Plugins -import { registerPlugins } from '@/plugins' +import { registerPlugins } from './plugins' const app = createApp(App) diff --git a/src/web/trpc.ts b/src/web/trpc.ts new file mode 100644 index 0000000..c2d69ec --- /dev/null +++ b/src/web/trpc.ts @@ -0,0 +1,16 @@ +import { createTRPCProxyClient, httpBatchLink } from '@trpc/client' +import type { AppRouter } from '../server/trpc' + +const SERVER_URL = import.meta.env.VITE_SERVER_URL || 'http://localhost:80' + +console.log('SERVER_URL', SERVER_URL) + +// Pass AppRouter as generic here. 👇 This lets the `trpc` object know +// what procedures are available on the server and their input/output types. +export const trpc = createTRPCProxyClient({ + links: [ + httpBatchLink({ + url: `${SERVER_URL}/trpc` + }) + ] +})