# 1. Preparing for Full-Stack Development
>In this chapter, we are going to cover the following main topics:
>- Motivation to become a full-stack developer
>- What is new in the third edition?
>- Getting the most out of this book
>- Setting up the development environment
This book focuses more on the backend and integration with the frontend, and assumes experience with React.
##### Install the following VSCode extensions
- Docker
- ESLint
- Prettier – Code formatter
- MongoDB for VS Code
##### Setting up a project with Vite
>For this book, we are going to use Vite to set up our project, as it is the most popular and liked according to The State of JS 2022 survey. Vite also makes it easy to set up a modern frontend project, while still making it possible to extend the configuration later if needed.
Vite is a frontend tool that provides:
- Build tool: bundles your code into a final deployable product.
- Development server: provides dev environment, allowing you to see changes instantly.
- ES Module Support: native ES modules, leading to faster performance and more modular code.
- Hot Module Replacement: updates only a subset of modules, preserving application state.
Run the following in the root directory: `npm create
[email protected] .`
##### Setting up ESLint and Prettier to enforce best practices and code styles
ESLint will be used to enforce coding best practices with JavaScript and React.
Prettier will be used to enforce a code style and auto-format the code.
```bash
npm install --save-dev
[email protected] \
[email protected] \
[email protected] \
[email protected] \
[email protected]
```
Configure Prettier with `.prettierrc.json` and `.prettierignore` files.
Configure ESLint with `.eslintrc.json` and `.eslintignore` files.
##### Setting up Husky to automate Prettier and ESLint on commit
**Husky** and **lint-staged** will be setup to run before we commit our code to ensure Prettier and ESLint are executed before committing.
```bash
npm install --save-dev
[email protected] \
[email protected]
```
##### Setting up commitlint to enforce a standard for commit messages
Commit messages in the commitlint conventional config are structured in a way where a type must be listed first, then an optional scope, and then a description: `type(scope): description`.
Types include: `fix`, `feat`, `refactor`, `build`, `ci`, `docs`, `perf`, `style`, `test`.
```bash
npm install --save-dev @commitlint/
[email protected] \
@commitlint/
[email protected]
```
# 2. Getting to know Node.js and MongoDB
>In this chapter, we are going to cover the following main topics:
>- Writing and running scripts with Node.js
>- Introducing Docker, a platform for containers
>- Introducing MongoDB, a document database
>- Accessing the MongoDB database via Node.js
#### Concurrency with JavaScript in the browser and Node.js
An essential trait of JS is that most API functions are async by default; specifically, JS is event-driven. If code is synchronous, it is executed by directly putting it on the call stack. If code is asynchronous, the operations is started, and the instance of that operation is stored in a queue, together with a callback function. The Node.js runtime will first execute all code left in the stack. Then, the event loop will check whether there are any completed tasks in the queue. If so, the callback function is put on the stack and executed.
![[node-server-vs-multi-threaded-server.png]]
#### Creating our first web server with Node
```javascript
import { createServer } from 'node:http';
const server = createServer((req, res), => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello HTTP world!');
});
server.listen(port, host, () => {
console.log(`Server listening on https://${host}${port}`);
});
```
### Introducing Docker, a platform for containers
- Docker is a platform that allows us to package, manage, and run applications in loosely isolated environments, called containers.
- Containers are lightweight, are isolated from each other, and include all dependencies need to run an application.
- As such, we can use containers to easily set up various services and apps without having to deal with managing dependencies or conflicts between them.
##### The Docker Platform
The docker platform essentially consists of three parts:
- Docker Client: runs commands by sending them to Docker Daemon.
- Docker Host: Contains the Docker daemon, images, and containers.
- Docker Registry: Hosts and stores docker images, extensions, and plugins.
![[docker-platform-overview-diagram.png]]
- **Docker images** can be thought of as read-only templates and are used to create containers.
- **Docker containers** are instances of images.
Install Docker using Docker Desktop from the official Docker website.
### Introducing MongoDB, a document database
- MongoDB is a NoSQL, document-based database. Each entry is stored as a document— basically JSON objects.
- Collections in MongoDB are the equivalent to tables in relational databases, storing documents.
Create a new container with a MongoDB server:
```bash
docker run -d --name dbserver -p 27017:27017 --restart unless-stopped mongo:6.0.4
```
# 3. Implementing a Backend Using Express, Mongoose ODM, and Jest
>In traditional full-stack applications, the backend would render and display the frontend completely, and an interaction would usually require a full-page refresh. The MVC architecture was designed mainly for such applications. However, in modern applications, the frontend is usually interactive and rendered in the backend only through server-side rendering. In modern applications, we thus often distinguish between the actual backend service(s) and the backend for frontend (which handles static site generation and server-side rendering):
![[full-stack-architecture-with-backend-for-frontend.png]]
###### Core Backend
- Responsibilities: business logic, data processing, database interactions.
- Components:
- Route layer: Defines API endpoints and processes incoming requests.
- Service layer: Contains the core business logic and operations like CRUD.
- Data layer: Manages database access and ensures data consistency.
- Common technologies: Node.js, Express, Django, etc.
###### Backend for Frontend (BFF)
- Understood as a specialized backend component to enhance frontend interactions.
- Responsibilities: tailoring data for frontend, server-side rendering, static site generation, optimizing API calls.
- Common technologies: Next.js, Nuxt.js, custom Node.js services, etc.
### Providing a REST API using Express
A REST API provides a way to access our server via HTTP requests.
>HTTP REST API routes are usually defined in a folder-like structure. It is always a good idea to prefix all routes with /api/v1/ (v1 being the version of the API definition, starting with 1). If we want to change the API definition later, we can then easily run /api/v1/ and /api/v2/ in parallel for a while until everything is migrated.
Express is a web application framework for Node.js. It provides utility functions to easily define routes and serve HTTP servers. Express is also very extensible, with many plugins available.
### Three principles of React
- Declarative: Describe what you want rather than imperatively telling React what to do.
- Component-based: Encapsulate components that manage their own state and views, composing them for more complex UI.
- Learn once, write anywhere: React does not make assumption about your tech stack, enabling you to develop apps without rewriting code.