In this video, Emmanuel Henri updates the server code to be able to handle both the application and the proper ports where they run.
- [Instructor] So, let's continue building our code, but, before I continue doing that, I want to explain to you what pretty does, exactly, and how will that impact the code, so, let's go into our GraphQL, and I just put a quick example of code that is not really pretty, so I've put the query and then getfriend ID, so this is an official query, and it would work if I would run it, but it's not pretty, so what will pretty do to your code is just make it look better when it gives you the data. For example, if you would be making a URL request, an API request, pretty would convert that code in a very organized way.
The best way to give you an example is to show you, so, by clicking Prettify, this is how your code will look prettier, like so. It's better organized. It looks more like a JSON file that you would get if you would call on into any JSON or APIs, so let's go back to our code. Now, we need to code our relay application. Let's go ahead and do this. For this one, we need to use webpack. Just a note for you: this is not a full webpack course, and I'm going to explain what I'm typing, but, on the same token, I'm not going to explain everything, because this is not a webpack course, okay? Let's go ahead and do a variable called compiler which uses webpack, and the entry point.
What webpack does is it asks for an entry point, and, inside of that entry point, it takes the files that are inside of it and then try to combine all these files into one bundle at the end, so this is what the code that we're going to type represents, and we're using a fetch dependency to do that with path, and the path will resolve to dirname, and, if you ever done webpack, this is all going to be very familiar to you.
The source folder and the app.js is the entry point like so. Then, which modules are we using? We're using the loaders module, and then we're going to exclude the node modules directory. Then, we're going to use loader: babel-loader.
By the way, sometimes I say babble. Sometimes I say bay-bel. I apologize if I mispronounce any of that. I mean the same thing at the end. This is regex code, by the way, if you are not familiar with it, so we're primarily asking it to look for js files inside of the path that we set here and to use loader and exclude node modules. This is primarily what we're asking here, and I want to make sure I have my final comma there, and we're setting up the output of our files.
Quickly grabbing this directory in the source folder, and the entry point is the app.js. I'm using those loaders to convert it into an output which is called app.js at path here, so, when the server loads, it's going to look for that bundle here, k. Perfect, so now we need to create the app and the webpack server, so we'll use our webpack server like so and use the compiler that we just created, and this is all a whole bunch of things that webpackdevserver needs in order to run our server, and, if you have access to the exercise files, then most of this, for you, is not as important as the rest of this course to understand what GraphQL does, how it works.
Feel free to copy and paste my code from the exercise files to move ahead. This is required typing, I would say, but, in the end, it's not the end of be all of the actual course. What we're going to do again here is use the template strings so we can use the variable that we created earlier. Again, template strings is an ES6 syntax that we can use to insert variables inside of a string, and we're going to use the app port, and something is off here, because, ah, there you go.
Didn't have my last curly brace. Okay, perfect, so public path is coming from the source like so, and stats; do I want my stats in colors? Yes, I do. You put them as true. All right, we're almost done, my friends. We have one more thing. We need to do exactly the same thing as we've done at the top.
We need to use, and then we need to listen, so now we're going to do those two lines. Use or this url, express, and create a static using the path, resolve, and, again, most of this is explained through courses on webpack and express and some of the node courses which we all have in our library, so, if you want to learn more about these subjects, feel free to go ahead and take those course.
Unfortunately, I cannot go over this, because this is required code but is not necessarily what we need to do for relay, and then we'll use the app port, and then we'll do the same console log that we've done in the past, and, as you can see, I've used two ways to do console logs. Both ways work, so you could do this way where I'm actually doing curly braces, or you can do the way at the top, here, which is a direct way of doing this, and, actually, let's copy and paste that code so we stop typing and retyping stuff that we've done in the past.
Let's go ahead and do that and change a few things. We're going to do app for this one. We're going to do here and here app and do app is now running here. Okay, we're good. Let me do a quick breeze over my code to make sure there's no typos, and I want to catch that now so we can correct it before we move on.
Everything looks great here. All this is good, public path. GraphQL is a proxy. We're good there. Content base, good. Webpackdevserver: there's no typo. If we go higher, here, if we go a little bit further up, and this is very important, because this is where you could screw up your final file. Everything looks good there. Good, we're good, we're good.
Module, loaders, exclude node modules, loaders, and we're good. Save this. So, we have more work to do, so let's move on to it.
- Setting up GraphQL
- Running queries
- Updating schema and solvers
- Adding data
- Adding Relay entry components
- Coding GraphQL fragments