In this video, find out how to initialize the Express server with Babel to compile ES6 code. Also, see a first response with a message.
- [Instructor] Now let's go ahead and build an Express server from scratch with support of ES6 or any of the latest ES versions. So let's go ahead directly in VS Code, and you can close that if you have this message. Let's go inside of explorer, then click on open folder, and let's click on the desktop like so. Now we're on the desktop. You can close the welcome message, and let's verify here on the terminal.
So if you don't have the terminal open, click on view, integrated terminal, and it will open it, and then type ls, enter. So if you see the exercise files, that means we're on the desktop. As you can see, we have the exercise files on the desktop. We're good to go. So what we'll do is first make a directory call express-app like so, and then what we'll do, and as you can see now, the folder has been created, and what we'll do next is actually change directories.
So we'll cd inside of that particular folder here, and we'll do an npm init. So if you're not familiar with this syntax, this basically means that this side will execute, and if successful, then execute this second command. So this is very useful when you have multiple commands you want to do them all in one pass. So let's go ahead and do that. So, yeah, let's just answer yes to this, yes, yes.
So for the git repository, if you don't want to have the warnings when do npm start about the fact that you're missing a repository, then enter right now. If you don't mind, then let's go ahead and hit enter, enter, and let's put my name here, enter again, and we are good to go. So if you take a look at the folder, we should have a package.json file here like so. So we're good to go. So you can close that, and then let's install a few dependencies that we need.
So first of all we'll definitely install Express. So npm install --save so we can save it to our package.json. The most recent versions of Node you don't have to do --save. You do have to mention -dev when you want to save it to the dev dependencies, but you don't have to mention --save, but I'm still doing it because some of you may still be on legacy versions of Node. So let's go ahead and do that in Express, and I'll also install nodemon, which is basically a package that allows us to refresh the server automatically whenever you make changes to your server as opposed to have to shut it down and start it over to see your changes.
So we need to install --save-dev. These are going to be dev dependencies. We'll install babel-cli, babel-preset environment, so env. Then babel-preset-stage a zero like so.
Okay, so once these are installed let's go back to our package.json file here, and we should see basically our dependencies installed, and we should see our dev dependencies installed. Now what we need to do is change our script. So once we do npm start we want to have basically our code compile to ES6. So we need to kind of change the script that's here. So we'll remove test, and we'll do a start script, and it's going to go as follow. So nodemon so we can actually refresh the server automatically when we make changes to the server, and we are starting from the index.js, which is a file we'll create momentarily.
So these are the commands that will allow us to run ES6 code inside of our project, -e js. Okay, so the package.json is done. We're good to go, so let's go ahead and create our .babelrc file so we can actually tell what are the configurations for babel. Let's go ahead and do that. So click on new file or right click on the folder express.app and create a new file.
So it's .babelrc, and basically what we need to do is create an object which has the presets, and the presets takes an aray, and this array will be the two that we've actually installed. So the two presets that we've installed, one is environment, the other one is stage-0. So basically it will take those two presets that we've installed as it compiles our code, and basically it will allow us to run ES6 inside of our server.
Okay, so we can close that, and the last piece that we need is an actual index.js file, otherwise our server when we run npm start is not going to work because right now we are calling it from the npm start command here. So nodemon will try to run this file. It's missing, so we're going to have a problem if we don't create one. So let me right click on this folder, create a new file, call it index.js, and this is the code that you need to do inside of this particular file. So this is the entry point inside of our project.
If you were to change this to something else, server or anything else, you need to make sure that your package.json reflects that. So your main should be whatever else you've changed it to, and also change it in the script. This way you're good to go if you do that. So index is pretty much the standard, but some people like to do server depending on if they're doing a backend and a frontend. Sometimes people do app.js. Which ever way you want to create that file, you want to make sure that package.json calls onto that file properly.
Okay, so what we'll do is first import express from express, and then create a variable call app, which will hold copy of express. Then I'll create a variable called PORT. I like to create a PORT variable because sometimes we use PORT quite a lot in our code, so I'd like to create a variable so if I change it at one place it'll change it everywhere else I need it. So in this case we'll run it on port 3000, and then I'm going to use the app variable, which holds a function call listen, and we're going to listen to the port we just created, and then run this function, and we're going to do a shortened version of a function since we don't need to add more lines, and we'll change that if we need to.
So we'll only going to run a console log for now, but once we add more lines we'll definitely turn this into a full function, and we're going to use template strings from ES6. Your server is running on port, and this is why I wanted to create a variable for port because I'm using already in two places.
Like so, and the variable is not port like that, it's like that. Perfect. Okay, so we got our server completely done. Let's go ahead and run it, npm start, and our server has started on port 3000, and we are good to go. So there you have it, a brand new application from scratch. Let's move on.
- Creating a basic data endpoint
- Routing with Express
- Adding a static route for file serving
- Basic middleware with Express
- Built-in middleware and error-handling middleware
- Debugging in an Express application
- Security best practices with Express