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",
|
"@mdi/font": "7.0.96",
|
||||||
"@trpc/client": "^10.38.5",
|
"@trpc/client": "^10.38.5",
|
||||||
"@trpc/server": "^10.38.5",
|
"@trpc/server": "^10.38.5",
|
||||||
|
"@types/cors": "^2.8.14",
|
||||||
"@types/express": "^4.17.18",
|
"@types/express": "^4.17.18",
|
||||||
"body-parser": "^1.20.2",
|
"body-parser": "^1.20.2",
|
||||||
|
"cors": "^2.8.5",
|
||||||
"express": "^4.18.2",
|
"express": "^4.18.2",
|
||||||
"roboto-fontface": "*",
|
"roboto-fontface": "*",
|
||||||
"vue": "^3.2.0",
|
"vue": "^3.2.0",
|
||||||
|
@ -28,7 +30,7 @@
|
||||||
"@vitejs/plugin-vue": "^4.0.0",
|
"@vitejs/plugin-vue": "^4.0.0",
|
||||||
"concurrently": "^8.2.1",
|
"concurrently": "^8.2.1",
|
||||||
"tsx": "^3.13.0",
|
"tsx": "^3.13.0",
|
||||||
"typescript": "^5.0.0",
|
"typescript": "^5.2.2",
|
||||||
"vite": "^4.2.0",
|
"vite": "^4.2.0",
|
||||||
"vite-plugin-vuetify": "^1.0.0",
|
"vite-plugin-vuetify": "^1.0.0",
|
||||||
"vue-tsc": "^1.2.0"
|
"vue-tsc": "^1.2.0"
|
||||||
|
@ -465,6 +467,14 @@
|
||||||
"@types/node": "*"
|
"@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": {
|
"node_modules/@types/express": {
|
||||||
"version": "4.17.18",
|
"version": "4.17.18",
|
||||||
"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.18.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
|
||||||
"integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
|
"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": {
|
"node_modules/csstype": {
|
||||||
"version": "3.1.2",
|
"version": "3.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
|
||||||
|
@ -1594,6 +1616,14 @@
|
||||||
"node": ">= 0.6"
|
"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": {
|
"node_modules/object-inspect": {
|
||||||
"version": "1.12.3",
|
"version": "1.12.3",
|
||||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
|
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
|
||||||
|
@ -2577,6 +2607,14 @@
|
||||||
"@types/node": "*"
|
"@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": {
|
"@types/express": {
|
||||||
"version": "4.17.18",
|
"version": "4.17.18",
|
||||||
"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.18.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
|
||||||
"integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
|
"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": {
|
"csstype": {
|
||||||
"version": "3.1.2",
|
"version": "3.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
|
||||||
"integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="
|
"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": {
|
"object-inspect": {
|
||||||
"version": "1.12.3",
|
"version": "1.12.3",
|
||||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
|
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
|
||||||
|
|
|
@ -12,8 +12,10 @@
|
||||||
"@mdi/font": "7.0.96",
|
"@mdi/font": "7.0.96",
|
||||||
"@trpc/client": "^10.38.5",
|
"@trpc/client": "^10.38.5",
|
||||||
"@trpc/server": "^10.38.5",
|
"@trpc/server": "^10.38.5",
|
||||||
|
"@types/cors": "^2.8.14",
|
||||||
"@types/express": "^4.17.18",
|
"@types/express": "^4.17.18",
|
||||||
"body-parser": "^1.20.2",
|
"body-parser": "^1.20.2",
|
||||||
|
"cors": "^2.8.5",
|
||||||
"express": "^4.18.2",
|
"express": "^4.18.2",
|
||||||
"roboto-fontface": "*",
|
"roboto-fontface": "*",
|
||||||
"vue": "^3.2.0",
|
"vue": "^3.2.0",
|
||||||
|
@ -29,7 +31,7 @@
|
||||||
"@vitejs/plugin-vue": "^4.0.0",
|
"@vitejs/plugin-vue": "^4.0.0",
|
||||||
"concurrently": "^8.2.1",
|
"concurrently": "^8.2.1",
|
||||||
"tsx": "^3.13.0",
|
"tsx": "^3.13.0",
|
||||||
"typescript": "^5.0.0",
|
"typescript": "^5.2.2",
|
||||||
"vite": "^4.2.0",
|
"vite": "^4.2.0",
|
||||||
"vite-plugin-vuetify": "^1.0.0",
|
"vite-plugin-vuetify": "^1.0.0",
|
||||||
"vue-tsc": "^1.2.0"
|
"vue-tsc": "^1.2.0"
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { server } from './server'
|
import { server } from './server'
|
||||||
|
|
||||||
const PORT = process.env.PORT || 8080
|
export const SERVER_PORT = process.env.PORT || 8080
|
||||||
|
|
||||||
server.listen(PORT, () => {
|
server.listen(SERVER_PORT, () => {
|
||||||
console.log(`Server ready on http://localhost:${PORT}`)
|
console.log(`Server ready on http://localhost:${SERVER_PORT}`)
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
export function hello(name: string) {
|
export function hello(name: string) {
|
||||||
|
console.log(`hello ${name}`)
|
||||||
return { message: `hello ${name}` }
|
return { message: `hello ${name}` }
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,10 @@
|
||||||
import express from 'express'
|
import express from 'express'
|
||||||
import { trpcMiddleware } from './trpc'
|
import { trpcMiddleware } from './trpc'
|
||||||
|
import cors from 'cors'
|
||||||
|
|
||||||
const server = express()
|
const server = express()
|
||||||
|
|
||||||
|
server.use(cors())
|
||||||
server.use('/trpc', trpcMiddleware)
|
server.use('/trpc', trpcMiddleware)
|
||||||
|
|
||||||
export { server }
|
export { server }
|
||||||
|
|
|
@ -1,11 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<v-app>
|
<v-app>
|
||||||
<v-main>
|
<v-main> {{ message }}</v-main>
|
||||||
<HelloWorld />
|
|
||||||
</v-main>
|
|
||||||
</v-app>
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<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>
|
</script>
|
||||||
|
|
|
@ -11,7 +11,7 @@ import App from './App.vue'
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
|
|
||||||
// Plugins
|
// Plugins
|
||||||
import { registerPlugins } from '@/plugins'
|
import { registerPlugins } from './plugins'
|
||||||
|
|
||||||
const app = createApp(App)
|
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