Setting up Babel

In this video, you're going to move away from using GraphQL Playground with the demo API and you're going to move towards Visual Studio code and actually writing code to create your very own GraphQL projects. In this video in particular, we're going to be setting up our little boilerplate project with a couple of nice to have tools for local development, especially when we're working with GraphQL and Node.js. So I'm going to crack open my editor for the rest of the course. I'll be leaving the browser here on the left hand side and on the right hand side I will have Visual Studio code so we can quickly switch between the two. Let's go ahead and kick things off by creating a new directory for all of the code we're going to have in this course. I'm going to use Command O or the command here for your operating system to open the folder on the desktop. I'm just going to create a new directory. You can call it whatever you want. I'm going to call mine GraphQL. Course, this will contain all of the files and folders and projects we end up creating throughout the class. Let's create that directory. We're going to crack it open and now we're going to focus on actually creating the folder. For this first project, we can call that one something like GraphQL Hyphen Basics. Perfect. So we have the GraphQL course directory for all of the code in the course and I have the GraphQL Basics directory for the specific stuff we're going to explore for this first project since we will be writing some code In this lesson, I wanted to remind you that there is a lecture zip available for every single lesson in the class where we actually write some code that zip contains all of the code up until that point in the course. So if you lose your project or your project's not working, you can always download the lecture zip to compare my code to yours and figure out where you went wrong. So don't forget lecture zip for every lecture where we actually write some code to kick things off. What I want to do is install and configure a tool called Babel in our project. Babel is a tool that's going to allow us to use the most advanced, cutting edge JavaScript features. Today. In particular, we're going to be able to use the ES6 import export syntax. Let's go ahead and kick things off by pulling up the website for Babel. That is Bab el Babel js.io. If you come from a more front end development background, you might have actually heard of or even used Babel before, particularly if you've worked with React. If you come from strictly a Node.js background, it's likely you've never heard of or even used Babel before, but that's okay. Setting up Babel is actually really easy. We're going to be installing two NPM modules and adding about five lines of configuration code to our project. Then we'll have Babel all set up and we'll be able to forget about it for the rest of the class. In the end of the day, Babel is a JavaScript compiler, so we write some code, we send it through Babel and Babel spits out other code. This allows us to take advantage of cutting edge features in our code, but still have code. The output from Babel, which runs in a wide range of environments. So if I'm writing an application, I might want to take advantage of the great features offered up by the aero function. But if I want my code to run in an older browser like Ie10, I'm going to need a way to actually convert that arrow function to something that Ie10 understands because Ie10 does not and never will support the arrow function. What's the solution? The solution is to just pass that code through Babel. Now, as I mentioned in our particular use case, we're going to be using Babel so we can access the ES6 import export syntax from Node. You can learn more about Babel by actually seeing it in action and heading over to the Try It Out page. On this page we type some code on the left hand side. The output ends up on the right hand side. Let's go ahead and give this a try. I'm going to create a simple statement const my function, setting it equal to a brand new arrow function that takes no arguments and has no function body. So on the left hand side, we had the code that we would write. On the right hand side, we have the code that Babel would spit out. We can see that const has been converted to var since var is understood by a wider range of environments and we can also see that our arrow function has been converted into a standard function, something that is also supported in a wider range of environments. So this is just one example of what Babel can do. We can actually teach Babel to do almost anything. If you want to learn more about how to configure Babel, you can head over to the Setup or Docs page though. We're actually going to go through that process together. Like I said, it's super simple. Install two things, add about six lines of code and we're all done. So let's go ahead and actually knock that out from Visual Studio code for this course. I am going to be using the integrated terminal provided by Visual Studio Code. If you're on Linux or Mac OS, you're more than welcome to use that as well. If you're on Windows though, I suggest using a terminal emulator so you can access the same commands that Mac OS and Linux users have access to that will make it. Easier to follow along with the videos. You can grab one of these terminal emulators such as Commander over at Cmdr. Commander Dot Net. Here you need to download the application, run it and when you do you'll be brought to a new terminal window where you can access all of the same commands that I'm about to run. I'm also going to be using some keyboard shortcuts in Visual Studio code for this advanced class. I recommend you get familiar with the keyboard shortcuts for your operating system as well. If you're not sure what a keyboard shortcut is for a particular command you want to perform, you can always search for it using the command prompt. So in the end of the day, the only one you actually need to remember is the command to show all commands for me and my particular OS and setup it is shift command P. You can go ahead and close all of the tabs to actually see this background panel and see what the keyboard shortcut is for you. Now I can search for something like Toggle Terminal and I can see that for me it is this keyboard shortcut that is control plus the Backtick. So I'm going to go ahead and run that and bam, the terminal pops open. So we will be using keyboard shortcuts for those operations. I recommend using the command palette to find the keyboard shortcut and then memorize it right here. We're going to start by changing directories into the GraphQL Basics project CD Space, GraphQL Hyphen Basics. From here, we're going to generate a Package.json file for this project and we're going to install the two modules necessary to get Babel up and running. Since Node is a requirement for this course, you should be familiar with generating a Package.json file and installing modules. I'm going to be using NPM init to generate my package.json file for this project and I'm not going to actually change any of the default values. So it's going to ask me for about seven different values. I'm going to use the default one by just hitting enter about 7 or 8 different times. At the end it asks me if this Package.json file looks good. It does. I type. Yes. Hit enter and we're done. Now, all that command did was it generated our package.json file. We're going to have to run an NPM installation command to get those two modules installed for Babbel. So right here I'll use clear to clear the terminal output and we're going to use NPM install to install those two modules. The first module we need is Babel hyphen CLI. This is going to give us a new command that we can run to actually pass our code through Babel and have Babel compile it. I'm going to specify a specific version using the at sign. So Babel CLI at 6.20 6.0, which is the latest. The other module we're going to need, which is actually going to process import export is babel hyphen preset hyphen env. So this allows us to run a command to compile Babel. This tells Babel exactly what it should change. We're going to provide a specific version number for this one too. That is at 1.7.0, which is the latest. We can go ahead and run that command. That's going to get both of those installed. Then all we have to do is write about four lines of configuration code to tell Babel to use that Env preset. So our import export code gets converted correctly and is compatible with Node. We can add a single file to our project to get that done. You want to toss this in the root of the GraphQL Basics project. We need to call that one dot Babel. RC And in the end of the day this is just a Json file where we configure how Babel works. We're going to provide our route object with a single property, the presets property. So right here in double quotes presets, the value for presets is an array and we provide as strings the names of all the presets we want to use. In this case we install just one. So we're going to provide just a single string in this array. Env. Excellent. And there we go. Babel is all configured and ready to go for the rest of the class. Now before we can actually run any code we need to create a source directory and some sort of entry point for our application. I'm going to create a source folder in the root of the project called SRC. And in there I'm going to create the entry point for this application and I'll call that file something along the lines of index dot JS. We can add some content inside of here like a simple console dot log call just to make sure the file runs successfully right here, something along the lines of Hello GraphQL or any other generic message. We'll get the job done. The last thing we're going to do before we actually run this file is to make a new script in Package.json that allows us to run things through Babel. So right here, I'm going to create a new Start script. So I'll add a new property onto the Start object. We will set its value equal to a string as well, and this string is going to be the. Following Babel hyphen node space. Then the path to our file source forward slash Index.js Babel node is what we're going to end up using for local development purposes only. We'll talk much more about how to create and run this project in production later in the course when we actually deploy our projects live to the web. But for now, this is a fantastic way to get started. If we go ahead and save Package.json, we can run that start script right here. NPM run start. I'm going to run through the script and what do we get? We get our little message showing up. Hello, GraphQL prints. So when we run that command, Babel grabs the file. We specified it, passes it through the Babel compiler using the configuration we provided. Then the output file is what actually runs The output file isn't saved anywhere to our hard drive. It's just executed by the command itself. Now, currently we're not using any feature that would be unsupported otherwise, so we're not getting any real advantage from Babel. That's all going to change though, in the very next video when we start exploring the ES6 import export syntax. So as long as you're seeing Hello, GraphQL Printing right here, you are all ready to continue on to the next lecture and we're going to dive a bit deeper into how that syntax works because it's something we'll be using throughout the entire class.