From the course: Node.js: Real-Time Web with Socket.IO

Base NPM setup

From the course: Node.js: Real-Time Web with Socket.IO

Start my 1-month free trial

Base NPM setup

- [Emmanuel] In this course, we are assuming that you have npm and node set up, as you may have taken a course on node before, like my node express APIs course. If not, don't worry, we'll go through the basics of installing node, then quickly create a new project where we'll add the socket.io dependencies. Let's get to it. Again, if you have node installed, you can skip this part until I get to the npm init. So you can go ahead and download the LTS version, but if you'd like to have the latest features, but they are not really safe for support yet, you can test the 8.7.0, which is the current version that I see here. You may have a different version on your screen, but these are always the two versions that are available. So let me go ahead and download this one. And as you can see, I have a second file of this, I've already installed it in my system, but I want to go through this experience with you just to make sure you have it installed as well. And then double click on this. It's the same experience for Windows. If you go back to the website, you can also take a look at other downloads, and then select the right version for your system. So for example, Windows, or Linux, or Macintosh. Okay, so let's go back and then install. Close that. So I'm going to use the internal terminal inside of VS Code. If you are using a different code editor, and you want to use an external terminal, feel free to do so, but I'm going to use it here. I open the terminal by doing View, Integrated Terminal. Also, let's make sure that we have a folder that we have created for that project. So, let's go back to our desktop and create a folder for chatter. So New Folder, right click, and then change it to chatter like so, and this will be our initial folder. Then, let's go back to VS Code and let's make sure we are in this folder. So, open folder in Explorer, and if you have a different code editor, use whatever tool you use to open a specific file, then open this folder, like so, then let's open the terminal again, so View, Integrated Terminal, and then you should be in that specific directory. The first thing we want to do is validate that node has been installed, and the way that you do this is by doing node -v, and then npm -v, but, by default, both are installed at the same time, so if you see the first one, you should see the second one as well. And what we'll do is do an npm init to create the new package.json file for our project. So what you want to do is specifically enter the name of your project or accept what it offers. I will accept, accept description, none for now, entry point, index.js that's correct, test command, it's correct, you can just enter everything in there if you want, and I'm put my name in here. And license ISC, yep, we're good. This is all okay, yes, and then you should see your package.json file appear in here. All right, the next step is to install a few dependencies. We need a couple of things to make this server work. We need express, we need nodemon, we need socket.io, so we'll install all these dependencies. Let's go ahead and do npm install or i, I like to use the shorter version of install, and then --save. We'll start with the regular dependencies, and then we'll install the dev dependencies. Let's go with express, we need nodemon, and we need socket.io, like so. Okay, next we need to install the dev dependencies. We'll need a few, so let's go and do npm i, and the --save-dev, and the dependencies that we need is babel-cli, we need babel-preset-env, like so, E-N-V, and then the second one is babel-preset-stage-0, and stage 0 is actually covering all current versions and future versions of JavaScript, so if you're using any syntax that is ES7, then you can use it with stage 0. So we can install these, okay. The next thing we need to do in order to have our server running, is to make sure that we insert the script for that, so let's go ahead and do start script, so whenever we do npm run start, it's going to start the script that we have here. And the one I'm going to insert here will use nodemon, so whenever there are changes in our server, it will restart the server automatically, and use the index as the entry point, so index.js, and then --exec babel-node, so it compiles our code, so remember in the exercise files, I mention to always include the babel file, babel RC file that we'll create in a few seconds. Make sure that you have those files in your server when you copy the exercise files, because this command needs it in order to run our server properly. And then -e js, and then make sure you put a comma at the end of the script, otherwise you're going to have an error. The next file we need to create is the one file I just mentioned, the babel RC file, so we need to create this new file. Click on New File here, or you can do it from File, New File, like so, and I don't like to use this one because it always creates it outside of my project, so I'll do it from here, and do .babelrc file. The reason why it's hidden if you don't show your files, show hidden files on your Mac system or your Windows system, it's because it's a dot file, and automatically makes it hidden. So what we want to do is create an object, and inside of that object we have the presets. The presets takes an array, and we'll mention the two presets that we've installed, so env, and then stage-0. So basically, when babel runs, it will take this file and then say okay, the presets that I'm going to use are those two, and then I'm going to compile the JavaScript code with those two presets, and therefore make it readable through all servers and browsers. We should be good to go with that. We don't have an index file, we're actually going to do that in a later video. So now we've got our dependencies ready to create our socket.io and node server, where I'll be able to use JavaScript's latest syntax with babel.

Contents