Server Topics

Request Parameters
Session Data
Uploading Files
Embedded JavaScript
Templates
Modules
Reading Files
Sending Requests
API

Request Parameters

Send Request: In your client JavaScript, send a GET request with a query string parameter:

let request = new XMLHttpRequest()
request.open(`GET`, `/your-route?yourParameterName=yourValue`)
request.send()

Parse Request: In your server JavaScript, extract the query string parameter from the request:

app.get(`/your-route`, (request, response) => {
  let yourValue = request.query.yourParameterName
})

Session Data

Add Package: express-session

Include Module:

let session = require(`express-session`)

Use Middleware:

app.use(session({
  secret: `your secret string`,
  resave: false,
  saveUninitialized: false,
  cookie: {
    // how long the session will last
    // put null to have session end when client closes browser
    maxAge: someMilliseconds
  }
}))

Set Session Variable: Access the session object from the request object, and add your own variables to the session object. Those variables will be available to that client only:

request.session.yourVariable = something

Get Session Variable: Access the session object from the request object, and access your variables from the session object. You can access variables that were added by that client only:

request.session.yourVariable

Destroy Session: Access the session object from the request object, and remove all variables that were added by that client:

request.session.destroy()

More Info: npm page

Uploading Files

Make File Input: In your HTML, make a file input:

<input type="file">

Send Request: In your client JavaScript, send a POST request with a FormData object:

let formData = new FormData()
formData.append(`yourKey`, yourFileInput.files[0])

let request = new XMLHttpRequest()
request.open(`POST`, `/your-route`)
request.send(formData)

Add Package: express-fileupload

Include Module:

let fileUpload = require(`express-fileupload`)

Use Middleware:

app.use(fileUpload())

Add Folder: Add a new folder for uploaded files.

Make Endpoint: Make an endpoint to match your file upload request.

Save File: In your file upload endpoint, get the file from the request, and save it to the new folder:

let file = request.files.yourKey
file.mv(`${__dirname}/your-folder/${file.name}`)

More Info: npm page

Embedded JavaScript

Add Package: ejs

Set View Engine:

app.set(`view engine`, `ejs`)

Move HTML File: Add a new folder called views, and move your HTML file to that folder.

Rename HTML File: Rename your HTML file to end in .ejs instead of .html.

Render HTML File: Replace response.sendFile with response.render:

response.render(`index`) // if your HTML file is called index.ejs

Render Data: Render HTML with data:

let data = {
  yourKey: yourValue
}

response.render(`index`, data)

Embed Data: In your HTML, embed the data:

<%= yourKey %>

Embed JavaScript: In your HTML, embed JavaScript:

<% if (someCondition) { %>
  some HTML
<% } %>

Include HTML: In your HTML, include another HTML file:

<%- include(`another-file.ejs`) %>

Templates

Add Package: express-ejs-layouts

Include Module:

let ejsLayouts = require(`express-ejs-layouts`)

Use Middleware:

app.use(ejsLayouts)

Add Layout File: In your views folder, add a new file called layout.ejs, and add a template to be used for every page. Put defineContent where the page-specific content should appear:

<html>

<head>
  <title>Your Title</title>
</head>

<body>
  <h1>Your Heading</h1>

  <%- defineContent(`main`) %>
</body>

</html>

Use Layout File: In your HTML for a specific page, remove all site-wide content, and put contentFor at the top of the file:

<%- contentFor(`main`) %>

More Info: npm page

Modules

Export Function: In another server JavaScript file, export a function:

module.exports.yourFunction = () => {
  // your code here
}

Import File: At the top of index.js, import the the other file:

let yourModule = require(`./other-file.js`)

Call Function: In index.js, call the function from the imported file:

yourModule.yourFunction()

Reading Files

Include Module:

let fs = require(`fs`)

Read File:

let contents = fs.readFileSync(yourFile, `utf8`)

// write code here to do something with the file contents
// you can split the contents into separate lines with contents.split(/\r?\n/)

More Info: module page

Sending Requests

Add Package: axios

Include Module:

let axios = require(`axios`)

Send Request:

axios.post(someUrl)

Send Data: Send a request with data:

let data = {
  yourKey: yourValue
}

axios.post(someUrl, data)

Process Response: Send a request with data and process the response:

let data = {
  yourKey: yourValue
}

axios.post(someUrl, data).then(processResponse)

function processResponse(response) {
  // write code here to do something with the response
  // you can get what was returned with response.data
  // you can get what was sent with response.config.data
}

More Info: npm page

API

An application programming interface (API) is a way for one program to talk to another program. For example, Mr. Code's Wild Ride has an API that allows other programs to access public data about its students and projects. This is useful if a program needs to create user accounts based on Mr. Code's students, for example.

There are many ways to call an API. A common way is to make an HTTP request to a specific URL, and receive a response in JSON format. This is an example of a representational state transfer (REST) API.

Mr. Code's API: documentation

List of Public APIs: GitHub page

Last section Next section