As a new developer, creating and connecting to a server can be a… less than enjoyable experience. It is very easy to get confused with what is actually happening with the communication happening between the browser and the server. The goal of this blog is to make that process a little more simple and set a strong foundation for when you will, eventually, dive deep into the server/browser waters. Luckily, there is a certain framework that makes this a lot easier make the server browser connection called Express.
EXPRESS
Express is a Node.js web application framework... Or as Colt Steele so eloquently explains it, “code other people have written for us”. Express is node package that helps you get servers up and running. Express give methods and different add-ons to build web applications and make your own APIs. It helps with listening to incoming request, finding out what is being looked for, check information against a database, and then it helps build a response and send it back to the client. We get express by downloading it from npm and then immediately integrate into your application. Lets begin using express.
The Set UP
This is the simple download command:
$ npm install express — saveOnce downloaded, you must enable it in your code as like this:
const express = require("express");const app = express();
- express does not have to be set to the variable ‘app’ but I highly suggest you follow this direction as most forums will reference it this way if you are looking for docs to help guide you.
Now that you have express up and running, let’s see what she’s got!
Listener
With express comes many different methods. A valuable method for setting up a server is the listener. This method needs to have a port to listen on. Think of a large cargo ship needing a place to unload the goods. The ship is the request with information and the port is where it needs to go to unload. The setup for this listener/port will look something like this:
app.listen(3000, () => {
console.log(`I'm listening`);
});- app.listen is how the method is used and 3000 is the port the listener is going to listen on.
For beginners purposes, we are going to connect our port to our local server, a.k.a., your computer, and to do that you simply go to your browser and type in localhost:3000. This will connect you to the browser and you will now be able to practice the next step of GET-ing and POST-ing.
GET/POST methods
Now that the listener is set up we can communicate with the server. The app.get/app.post methods expects to things: a path and a callback. The callback takes to parameters: request and response. Request is an object created by expressed based on the incoming http request. Response is an object made by express that has its own methods on it. Request and Response are usually shortened to req and res so in these examples you will see them used as such. One of the methods that comes with Response is res.send which is used to send back content. Here is how it will look to receive a request:
app.get('/poodles', (req, res) => { res.send(`<h1>bring in the poods</h1>`);})
- In this example ‘/poodles’ will be the path that is given from the browser and once that path is received, the browser will show as a header “bring in the poods”.
To clarify what the path is. In this example, what is placed in the browser will look like this:
localhost:3000/poodlesThe posting set up is very similar to the get set up:
app.post('/poodles', (req, res) => { res.send(`POSTING TO POODLES`);})
To check if this is successful you can use the postman app that allows you to use post and get with the server in an easy to use and manipulate way. Postman is a platform build for API development and is a great way to learn the basics of working with a server.
I hope this has helps you get started. I strongly suggest creating your own server and trying to add as much to the browser as you can to get familiar. Once you get the general idea of how it works then you will understand just how nice express is.
