Bootcamp
Search…
3.0: Module 3 Overview

Introduction

In Module 3 we will build apps using the NPM library and web server framework Express, and store data in a SQL database on a separate DB server.
Our Express app will have this architecture.

Architecture

For clarity, let's define the back-end and front-end of our app architecture.

Front End

  1. 1.
    Frontend typically refers to a browser, mobile, or desktop application where users can perform actions like clicking and typing.
  2. 2.
    Some user actions on the frontend will trigger HTTP requests to the backend to store or retrieve data.
  3. 3.
    The frontend sends requests to the backend and handles responses. In Module 3 our responses will mostly consist of HTML, and our frontends will render that HTML.

Back End

  1. 1.
    Backend typically refers to the server that manages the database.
  2. 2.
    The server listens for incoming requests from the frontend. When it receives a request, it runs logic to determine what response to send back.
  3. 3.
    Until now, our servers only responded with files specified in the URL path. Now we'll add additional logic to our backend to support our apps' needs.

Bigger Picture

Frontend and backend are relative terms. As our apps get more complex they may involve multiple servers, for example 1 to serve frontend files and another to serve backend logic. Each of these servers can be considered to have "frontend" and "backend" components.
In general, frontend refers to the web, mobile, or desktop client and/or the server that serves the UI to that client, and backend refers to the server(s) managing the database.

What We Will Learn

At the end of this module we will be able to build apps where users on the Internet can input data and we can manipulate, store, and retrieve that data persistently.
  1. 1.
    Send HTTP requests from frontend to backend
  2. 2.
    Respond from backend with appropriate data and HTML
  3. 3.
    Store data in backend first using JSON, then SQL
We will spend time practising a concept called "database design" where we will practise designing the structure of our databases to be most relevant for our apps. Similar to Tic Tac Toe where the game relied on a specific structure of data (e.g. a 2D array), it will be important for our upcoming apps to have appropriate DB structures.
This module is an optimization and evolution of the Noodle Recipe Website and the Noodle Recipe with FIle Server- how do we display on the internet an interlinked set of recipes, such that:
  1. 1.
    We store and represent these recipes not as HTML code / files, but as abstracted linked data.
  2. 2.
    We make the content of these recipes dynamic and changeable to the users on the public internet who access the website, not just to those who can edit the files.
  3. 3.
    We keep useful properties of HTML website code, such as one URL for each recipe.
Checkout a live version of the backend powered noodle site here: https://codesandbox.io/s/noodle-ejs-x5m8u​

Module 3 Setup

Prior to Module 3 we have been using Prettier to format our code. Now that we are using NPM to build more complex Node apps, we will start auto-formatting our code with the more precise ESLint instead. ESLint auto-formatting requires npm install and we avoided it until now for convenience.
Please add the following settings to VSCode in VSCode JSON Settings to lint JS and React code. To find these settings, follow instructions from Coding Basics.
1
"[javascript]": {
2
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
3
},
4
"[javascriptreact]": {
5
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
6
},
Copied!
After adding these settings, our VSCode JSON Settings should look like the following.
1
{
2
"editor.defaultFormatter": "esbenp.prettier-vscode",
3
"[javascript]": {
4
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
5
},
6
"[javascriptreact]": {
7
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
8
},
9
"editor.formatOnSave": true,
10
"editor.formatOnPaste": true,
11
"editor.minimap.enabled": false,
12
"editor.tabSize": 2,
13
"editor.wordWrap": "on",
14
"eslint.format.enable": true,
15
"eslint.lintTask.enable": true,
16
"eslint.migration.2_x": "off",
17
}
Copied!