All language subtitles for 008 Calculator Setup Challenge Solution_en

All right guys.

So how did that go?

So, the first thing we're going to do is we're going to delete any projects that are open inside Atom and

open up a brand new Hyper Terminal that is at our home location, which is represented by the little tilde

squiggly line.

So now that we've got everything clear and ready to go, the first thing we're going to do is we're going

to cd into our desktop, or cd to any location you wish, and we're going to create our new directory, that's

going to be called Calculator.

So now that we've got our Calculator directory, we're going to cd to it,

and inside here we're going to create a new file called calculator.js.

So now that we've got our file and our directory ready to go, we're going to initialize NPM with npm

init. And the name is going to be called calculator, version, description,

entry point is going to be at calculator.js,

author is myself,

and we're going to hit enter to create that.

All right. So now that we've created it, we're going to open this project inside Atom with

atom .

And now we're going to install Express with npm install express.

So this is the workflow that you’re going to be going through every single time you create a new web site,

so it's really good to just get it into your bones and get familiar with it.

So in our package.json, we now have a single dependency that is express, and we can now go into our calculator.js

and we can require it.

So we're going to create a new const called express.

This is going to be set to require express,

and I'm going to add that comment up here, jshint esversion:6.

So now that we've got our const express, then we're going to set up a new app that is going to be using

the express module.

And finally I wanted you to create a home route, so that's going to be app.get.

We're going to target the home route.

And then we're going to have a callback function with a request and a response, and we're simply going

to respond by sending, “Hello world!”

So now that we've defined our route, then we're going to spin up our server, and we do that with app.listen,

and we're going to listen again on port 3000, and then we're going to have a callback

that simply logs that the server is running on port 3000.

All right.

So now that we've set up our home route, we've got our app to listen on port 3000.

Now you can choose any other port, by the way. You can choose 4040, 8080, 5000, whatever you

wish.

And you can head over there with localhost comma whatever port you chose to see it.

But 3000 is the most commonly used port when people are developing locally,

so that's what we're going to be using as well.

So we're now pretty much ready to run and spin up our server.

So let's head over to the command line, making sure that we're inside the project that contains our calculator.js.

We’re going to use Nodemon to spin up our

calculator.js.

And if at any point during the code writing process you have made a mistake, then you can see that,

just as we had errors logging in the Chrome Developer Tool Console, our command line will also show us

any errors.

And in this case it's telling me that expres with a single s is not defined. And this is one of the

most common thing that happens when you misspell, or you make a typo, or you forget to make a particular

word capitalized when it should be, then it will say something something is not defined.

This just means that it doesn't know what you're talking about. It doesn't know what expres with a single

s is.

And it also point to you to the line of your code where this occurs, and that is on calculator.js

line number 5, and the little arrow points to the specific thing that is offending it.

So let's head over to our calculator.js file line number five, and we can see that we've forgotten

an s here.

So now let's save and we've corrected that.

And Nodemon automatically restarts our server with the changes, and it's now all green, and we get a log

statement saying, “Server is running on port 3000.”

So let's head over to

localhost:3000.

And there it is. Our server is running on port 3000,

our home route is working, and we're using Express to do all of that.

So that was a quick recap of everything that we've done so far in the form of a challenge.

I hope it was all right for you guys, and you didn't make typos like I did, and you figured out how to

debug your web site

based on the messages you get in the console.

So in the next lesson, we're going to be creating some HTML forms which we will add to our web site.

So for all of that and more, I'll see you on the next lesson.