Client connection setup
This commit is contained in:
parent
7189b14de0
commit
2b6e3ad7fe
1
.env.development
Normal file
1
.env.development
Normal file
|
@ -0,0 +1 @@
|
|||
VITE_SERVER_URL=http://127.0.0.1:8080
|
1
.env.production
Normal file
1
.env.production
Normal file
|
@ -0,0 +1 @@
|
|||
VITE_SERVER_URL=https://cp.pp.ifms.edu.br
|
54
package-lock.json
generated
54
package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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}`)
|
||||
})
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
export function hello(name: string) {
|
||||
console.log(`hello ${name}`)
|
||||
return { message: `hello ${name}` }
|
||||
}
|
||||
|
|
|
@ -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 }
|
||||
|
|
|
@ -1,11 +1,22 @@
|
|||
<template>
|
||||
<v-app>
|
||||
<v-main>
|
||||
<HelloWorld />
|
||||
</v-main>
|
||||
<v-main> {{ message }}</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { trpc } from './trpc'
|
||||
|
||||
const message = ref('Hello World!')
|
||||
|
||||
onMounted(async () => {
|
||||
console.log('Hello')
|
||||
try {
|
||||
const res = await trpc.hello.query('Doug')
|
||||
message.value = res.message
|
||||
} catch (err: any) {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
16
src/web/trpc.ts
Normal file
16
src/web/trpc.ts
Normal file
|
@ -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<AppRouter>({
|
||||
links: [
|
||||
httpBatchLink({
|
||||
url: `${SERVER_URL}/trpc`
|
||||
})
|
||||
]
|
||||
})
|
Loading…
Reference in New Issue
Block a user