Splitting road

Work with Express routes and link files: Part 3

This is a continuation of an Express server where part 1 can be read here and part 2 can be read here.

As of now you should have a package.json, a node_modules folder with Express, and your server.js file should look like this.

//jshint esversion:6

const app = express();

app.get("/", function(req, res){
   res.send("<h1>Hello, world!</h1>");
});

app.listen(3000, function(){
   console.log(Server started on port 3000.");
});

So we established that the first parameter in app.get determines the route we are responding to then the second parameter is the callback you’re responding with. But what if we want to call a different route?

Create new Route

We’re going to add another app.get to make a contact page. Under your first app.get but above app.listen, add this.

app.get("/contact", function(req, res){
    res.send("Contact me at myemail@myemail.com");
});

Now you know the deal by now. Save, control+c your server, restart node server.js, and refresh your browser. This time type into your browser localhost:3000/contact. Do you see your contact page? Great! Now we can hop between pages.

Link Files

Ok so we can hop pages, but I don’t have to put all my html in this res.send right? Of course not! Let’s link up your HTML file.

Since you’re reading about Express, I’m assuming you already know HTML, so create a simple index.html or grab an existing one you have laying around and add it to your project folder.

This whole time, we have been using res.send, but there are so many other Response properties we can use. The one we are going to use now is called res.sendFile(). It transfers the file to the browser when you make a GET request. You can read more about this response property and many others here.

In your server.js we are going to replace res.send("<h1>Hello, world!</h1>"). So delete that and add this instead.

res.sendFile("index.html");

But here’s the problem with that. As of right now, this project is in your folder on your computer, so this relative path will work. But with a server, once you deploy it, this path will possibly change. How to we account for that?

Directory Name

We use a constant called __dirname (2 underscores). So instead of "index.html", we’re going to do this instead.

res.sendFile(__dirname + "/index.html");

__dirname which stands for Directory Name, is going to give you the file path of the current folder no matter where it’s hosted. If you’re curious, feel free to console.log(__dirname) to see where it goes. It should look something like Users/yourname/Desktop/project_folder. If this ever changes, like once it’s being hosted or moved from your Desktop, __dirname will update it and you don’t need to worry about it.

Now let’s see it work. Save, control+c, restart node server.js, refresh your browser, and go to localhost:3000. Do you see your index.html file? Great!

Conclusion

This is what your final code should look like.

//jshint esversion:6

const app = express();

app.get("/", function(req, res){
   res.sendFile(__dirname + "/index.html");
});

app.get("/contact", function(req, res){
    res.send("Contact me at myemail@myemail.com");
});

app.listen(3000, function(){
   console.log(Server started on port 3000.");
});

You just created a server with a webpage hosted on it! Hopefully this has helped someone to become 1 step closer to becoming a better developer.

Leave a Reply