Is there anyone around that could help me out with...
# orm-help
b
Is there anyone around that could help me out with a simple deploy to
now
?
m
Hey, @brant, have you looked at the tutorial for now deployments?
b
I definitely did not find this. I’ll give it a read. Thank you!
m
No problem! Best of luck. Don't hesitate to come back with any questions should you run into any issues!
b
I’m sure I will!
m
🤷‍♂️
b
okay, so it looks like this got me about as far as I got on my own. I was able to deploy the server and gain access to the playground, I am having issues hooking my static react up to it. A little more context: I am simply trying to deploy the “hackernews” tutorial
m
It works ok locally?
b
yea so what i’ve done is deploy the “server” to now. then taken the URL from the now server and replaced
localhost:4000
with it, then built the react app and deployed that
I’m guessing I either need to use path aliases (https://zeit.co/docs/features/path-aliases) or maybe there’s an easy way to bundle the static files with the prisma server and put them in 1 deploy?
m
If you run the react app locally and the graphql server on now, does it work?
b
1 sec
naw the websocket won’t connect
m
What's the error?
b
3 of these
Copy code
VM39:164 WebSocket connection to '<ws://hackernews-graphql-js-vxloobynlv.now.sh/>' failed: Error during WebSocket handshake: Unexpected response code: 301
and 1 of:
Failed to load <http://hackernews-graphql-js-vxloobynlv.now.sh/>: Response for preflight is invalid (redirect)
m
Ok. Looks like a
cors
issue.
But the fact that it's a 301 error is odd.
b
yea so I’m thinking I have to follow the path-aliases above, but I’m also wondering if there’s an easier way where I can deploy the static react app with the server
I was attempting to do this with custom code before but wasn’t having any luck so I’m just using a tutorial repo, you could check out identical code
m
Can you link me to the repo?
b
yep 1 sec
m
Weird. If I clone, install, and deploy, it looks like it works: https://hackernews-graphql-js-sixzdgvglc.now.sh
b
just the playground though right?
the ui is different
m
Your playground works, tho?
b
yea I am just having troubles sorting out how to wire my UI up with my graphql
m
Hmm. So, it looks like I'm not able to reproduce.
b
your ui is working?
m
Yes.
b
can you share the now deploy?
m
`const httpLink = new HttpLink({ uri:
<https://hackernews-graphql-js-vxloobynlv.now.sh/>
}) `
b
so, you checked out the repo. deployed the server. copied the url, and replaced the
httpLink
?
m
Precisely. No other changes.
I also changed the websocket endpoint
srry.
b
okay I’ll follow those steps 1 sec 🙂
and the ws link is:
Copy code
uri: `<ws://hackernews-graphql-js-vxloobynlv.now.sh/>`,
?
m
Copy code
const wsLink = new WebSocketLink({
  uri: `<wss://hackernews-graphql-js-vxloobynlv.now.sh/>`,
  options: {
    reconnect: true,
    connectionParams: {
      authToken: localStorage.getItem(AUTH_TOKEN),
    },
  }
})
b
2 s’s ok!
and you ran it locally with
yarn start
?
mine appears to be working now
m
Yes for the react side.
b
nice ok
did you deploy the react ui to now?
m
Not yet.
b
I’m going to attempt to build and deploy now
it appears to be working… I guess my whole issue was
ws
instead of
wss
I'm glad we were able to work through it.
👍
b
🙏
if you’re ever in vancouver hit me up I owe you a 🍺 or
👍 1
m
No worries. I’m around if you run into anything else. 👍
n
awesome you got this resolved!
is there anything we should add to the now tutorial to improve this for the future?
b
good question @nilan, I’ll get back to you this afternoon
💯 1
n
awesome, thanks! 🙂
b
1 thing I would say is that my current implementation has my playground (on now) exposed in my index.js. That’s probably not good?
n
why not?
b
I mean in the compiled file on the website. it seems weird that potential users could go to the playground and run queries? I’m not sure if that’s an issue, or if there’s an alternative
n
why would it be an issue?
maybe it is, but it depends on your situation 😄
you can turn it off though in the GraphQL Yoga settings
b
ahh right okay then it’s all good 🙂
this doesn't accomplish a lot, because anyone can connect locally to your GraphQL API using a Playground
but at least your end users will not be exposed to it
b
nice. is there an easy way to stop others from connecting to my api?
n
you'd use some kind of authentication 🙂
b
so when editing the code in my react app to get it to work on
now
we swapped out the URI (localhost:4000) from the
HttpLink
and the
WebSocketLink
with the URI for the server on
now
and everything appears to be working the same as it does locally. There’s also a reference to localhost:4000 in the
.graphqlconfig.yml
endpoints: default:
. should that be changed as well?
n
you need that setting during dev time, so it's fine