Learn to Code via Tutorials on Repl.it

← Back to all posts
NodeJs Express tutorial
h
RossJames (42)

NodeJs Express Basics! YAY

Welp, I'm back! posting again, this time, I have got some web server basics. Even if you already know what Express is and how to use it, read along and maybe learn something!

Onto The Basics!

Installing!

First off, after creating your repl, you will want to install Express, if you create an Express repl, it will already be installed with a template. Otherwise, if you just clicked nodejs, you will need to install it, this can be done through 2 methods:

1)

Open shell (ctrl or cmd + shift + s)
Type in the shell: npm install express
Now you're ready to code!

2)

You can also auto-install it by just using require('express') which we will cover later!

Onto the main code...

You will need to import packages that we will be using. If you are editing on repl.it, packages will auto install, otherwise, please follow steps above for body-parser. Most editors will auto install packages when they are needed some won't so keep this in mind.

Sorry about all that boring stuff, onto the actual code, remember that all the code is at the bottom of the post!

Imports!

const express = require('express'); 
/*
 Imports the express library.
 This is necessary to have an express server.
*/
const bodyParser = require('body-parser');  // Node.js body parsing middleware.

Just some basic variable setting!

Creating the app / server

We need to turn our express into an app

const app = express(); 

## Telling the app what modules / packages to use

```js
app.use(bodyParser.json()); 
// Express modules / packages

app.use(bodyParser.urlencoded({ extended: true })); 
// Express modules / packages

app.use(express.static('public'));
 // load the files that are in the public directory

Most of this stuff is standard for any express project!

Serving a file

To pick up when someone visits a directory we use app.get()

This will run when someone makes a get request to the url. We will cover other request types later. Here is an example:

app.get('/', (req, res) => {
    res.sendFile('/home/runner/public/index.html')
})

When someone visits the root or / directory of the site, this function will run if it recieves a get request.

The req, res will let us use the request data and response data. res has lots of functions in which let us send headers to the client.

Here are some:

app.get('/res', (req, res) => {
	/* Please note that this will error as multiple headers are sent to the client */
	res.send('Hello!')
	// or
	res.send('<p>Hello!</p>')

	res.json('{"hello":"hi","ping":"pong"}')

	res.sendStatus(200)
	//using res.send(200) is deprecated and will terminate the nodejs in future.

	res.sendFile('/home/runner/public/index.html')

	res.redirect('https://www.google.com')

	res.download('/home/runner/public/index.html')
})

If you get an error about cannot send headers to the client after they are already sent this is because if you use 2 res functions then it will cause this error.

Using req

Query strings are the data included in the url and in the headers. these can be got server side, using req.query as showed below.

app.get('/req', (req, res) => { 
        console.log(req.query) 
	res.json(req.query) //send json to the client
})

the console.log, logs all query strings such as '?hello=hi&ping=pong' you can get these through req.query.hello or req.query.ping.

res.json sends json to the client. often used in APIs.

Handling Request Types

There are many request types used for different things:

app.get('/get', (req, res) => {
	// On get request
})

app.post('/post', (req, res) => {
	// On post request
})

There are hundreds. Some can be found here
Only some are supported by express.

Handeling multiple methods is easy:

app.route('/reqtypes')
  .get(function (req, res) {
    res.send('Get')
  })
  .post(function (req, res) {
    res.send('Post')
  })
  .put(function (req, res) {
    res.send('Put')
  })

ez...

Long Paths

You can have multiple paths like this:

app.get('/multiple/paths', (req, res) => {
	// exist
})

404

Make sure you put these at the bottom, as anything that isn't triggered, will run this:

app.get('/multiple/paths/also/work/*', (req, res) => {
	// used for 404 if no other get functions are triggered in this path
})

app.get('/*', (req, res) => {
	// used for 404 if no other get functions are triggered
})

Outro

This has been just the basics but make sure you read other posts! Hope you enjoyed!

Any questions feel free to ask!

Commentshotnewtop
Highwayman (221)

Yay indeed! Thanks for this.