|
| 1 | + |
| 2 | + |
| 3 | +# FULL STACK COURSE 2023 |
| 4 | + |
| 5 | +## Node JS MasterClass |
| 6 | + |
| 7 | +Hi, This is course page of **CoderDost Youtube Channel** Node JS 2023 Course [Course Link ](), |
| 8 | + |
| 9 | +### How to use this code : |
| 10 | + |
| 11 | +#### You can **download code** in 2 ways : |
| 12 | + |
| 13 | +1. **Git Commands** |
| 14 | + |
| 15 | + - use `git clone <repository_url>` |
| 16 | + |
| 17 | + - checkout branch according to Chapter number `git checkout node-1` |
| 18 | + |
| 19 | + - run `npm install` inside the root directory before running the code |
| 20 | + |
| 21 | + |
| 22 | + |
| 23 | +2. If you are not comfortable with git, directly **download the branch as Zip**. |
| 24 | + |
| 25 | + - Choose branch related to the Chapter e.g. `node-1` |
| 26 | + |
| 27 | + - run `npm install` inside the root directory before running the code |
| 28 | + |
| 29 | + |
| 30 | + |
| 31 | + |
| 32 | +# Node JS Series |
| 33 | + |
| 34 | + |
| 35 | + |
| 36 | + |
| 37 | +## Chapter 1 - Introduction to Node, NPM, Package.JSON |
| 38 | + |
| 39 | +### Chapter Notes : |
| 40 | +- **Node JS** installation from official site nodejs.org - use only LTS versions |
| 41 | +- Use **terminal / command prompt** to check installation : |
| 42 | + ``` node -v ``` |
| 43 | + ```npm -v ``` |
| 44 | +- **VS code** installation directly from code.visualstudio.com site |
| 45 | +- Use VS code terminal to run **commands** |
| 46 | +- **Node REPL** interface can be used directly by typing `node` in **terminal / command prompt** . Use **Ctrl+D** to exit interface. Use **CTRL+C** to exit terminal |
| 47 | +- Running any JavaScript file from node using `node filename.js` |
| 48 | +- **Modules** are basic containers in Node/JavaScript system. 1 file can be one module in Javascript. |
| 49 | +- Two type of Module Systems in node JS are - **CommonJS** module and **ES** Modules. |
| 50 | + |
| 51 | +**- CommonJS Module** |
| 52 | +``` |
| 53 | +//lib.js |
| 54 | +exports.sum = function(){} |
| 55 | +
|
| 56 | +//index.js |
| 57 | +const module = require('./lib.js') |
| 58 | +module.sum(); |
| 59 | +``` |
| 60 | +**- ES Module** |
| 61 | + |
| 62 | +``` |
| 63 | +//lib.js |
| 64 | +export {sum} |
| 65 | +
|
| 66 | +//index.js |
| 67 | +import {sum} from './lib.js' |
| 68 | + |
| 69 | +``` |
| 70 | + |
| 71 | +- FileSystem Module(fs) is one of core modules of Node JS. **fs** can be used to read/write any file. There are many more core modules in NodeJS which you can check in NodeJS API docs. |
| 72 | +- Reading files can be **Synchronous** or **Asynchronous**. **Async** is most preferred method in NodeJS. As there is **NO blocking of I/O in NodeJS** |
| 73 | + |
| 74 | +- Node project can be initialized with `npm init` command which also creates `package.json` file |
| 75 | +- **package.json** is a configuration file for node projects which has **scripts**, **dependencies**, **devDependencies** etc |
| 76 | +- `npm install <package-name>` is used to install any online modules available for node on NPM repository online. |
| 77 | +- `nodemon` is a package for running node server and track live changes to re-start again. |
| 78 | +- `scripts` inside **package.json** can be used like `npm run <script-name>` e.g `npm run dev`. Only for `npm start` you can avoid `run`. |
| 79 | +- use `npm install -g <package.json>` to install packages globally on your system. Not just in the project but useful all over your system. |
| 80 | +- Node versions are formatted like **4.1.9** where these are `major.minor.patch` versions. |
| 81 | +- you can install all dependencies again using `npm install` again |
| 82 | +- **package-lock.json** has exact versions installed and link of dependencies of each package. |
| 83 | +- use `npm update` to update packages safely. `npm outdated` shows outdated and latets versions of packages installed in your **package.json** |
| 84 | +- use `npm uninstall <package-name>` to uninstall packages from `package.json` |
| 85 | +- `node_modules` should not be shared - you can make `.gitignore`to ignore them to be uploaded. |
| 86 | + |
| 87 | + |
| 88 | +### Related Links/Videos |
| 89 | + |
| 90 | +1. Callbacks |
| 91 | +2. Promises |
| 92 | +3. Async Await |
| 93 | +4. Import/ Export example |
| 94 | +5. Event Loop in Node JS |
| 95 | + |
| 96 | + |
| 97 | +## Chapter 2 - Server Concepts with Node - http module |
| 98 | + |
| 99 | +### Chapter Notes : |
| 100 | +- HTTP requests have - request line, headers and body |
| 101 | +- HTTP response have - status line, headers and body |
| 102 | +- HTTP requests and responses can be tracked from **Dev Tools** > **Network Tab** |
| 103 | +- In Node, we can use core **http** module to create a Server which listens to requests, modify data in-between and provides responses. Server needs a **PORT** to be bound to - use only port number > 1024. |
| 104 | +- Server can simply be said as **a function which receives a request and returns a response**. [ This is just for understanding] |
| 105 | +- There are many **Headers** which exists on request and responses - shared a link below with list of existing headers. |
| 106 | + |
| 107 | +- We can use Server to do 3 things: |
| 108 | + - **Static file Hosting** : Sending normal files without formatting or modifying. |
| 109 | + - **Server Side Rendering** : Mixing data with templates and rendering dynamic views (dynamic web pages) |
| 110 | + - **Web APIs** : Sending data via some APIs/ endpoints. |
| 111 | + |
| 112 | +- Every Request has one and only one response. If there is more than 1 response which you want to send - you will encounter a error - "*Headers already sent*" |
| 113 | +- POSTMAN is a software for doing complex API requests. |
| 114 | + |
| 115 | +### Related Links/Videos |
| 116 | + |
| 117 | +1. HTTP headers list : |
| 118 | +2. dummy JSON site : |
| 119 | +3. Postman |
| 120 | + |
| 121 | + |
| 122 | +## Chapter 3 - Express JS |
| 123 | + |
| 124 | +### Chapter Notes : |
| 125 | + |
| 126 | +- **ExpressJS** is *de-facto* Node framework - and used in most Node applications which are used as web server. |
| 127 | +- You can install express `npm install express` |
| 128 | +- Express has few level of methods : |
| 129 | + - Application methods : e.g. app.use() |
| 130 | + - Request methods |
| 131 | + - Response methods |
| 132 | + - Middleware methods |
| 133 | + - Router methods |
| 134 | + |
| 135 | +- **Response** methods (**res** is our response objects) |
| 136 | + - **res.send()** - for sending HTML |
| 137 | + - **res.sendFile(**) - for sending File |
| 138 | + - **res.json** - for sending JSON |
| 139 | + - **res.sendStatus(404)** - for sending HTTP status only |
| 140 | + - |
| 141 | +- **HTTP Request** Types we generally use : |
| 142 | + - GET |
| 143 | + - POST |
| 144 | + - PUT |
| 145 | + - DELETE |
| 146 | + - PATCH |
| 147 | + - API / Endpoints / Routes are used inter-changeably but they are related to server paths. |
| 148 | + |
| 149 | +- **Middle-ware** : Modifies the request before it reaches the next middleware or endpoints. |
| 150 | +- Sequence of middleware is very important, as first middleware is first traversed by request. |
| 151 | +- Middle-wares can be used for many use cases, like loggers, authentication, parsing data etc. |
| 152 | +- Middle-ware can be : |
| 153 | + - Application level : server.use(**middleware**) |
| 154 | + - Router level : server.get('/', **middleware**, (req,res)=>{}) |
| 155 | + - Built-in middleware : **express.json()** [ for parsing body data], **express.static()**[for static hosting] |
| 156 | + - External Middle-wares - like **morgan** |
| 157 | + |
| 158 | +- **Request** properties (**req** is our request object) |
| 159 | + - **req.ip** - IP address of client |
| 160 | + - **req.method** - HTTP method of request |
| 161 | + - **req.hostname** - like google.com / localhost |
| 162 | + - **req.query** - for capturing query parameters from URL e.g. localhost:8080 ? **query=value** |
| 163 | + - **req.body** -for capturing request body data (but its needs a middleware for body data decoding) |
| 164 | + - **req.params** - for capturing URL parameters for route path like `/products/:id` |
| 165 | + |
| 166 | +- **Static Hosting** : we can make 1 or more folders as static hosted using **express.static** middleware. |
| 167 | + `server.use(express.static(< directory >))` |
| 168 | +Static hosting is like sharing a folder/directory and making its file readable as it is. |
| 169 | +Note : `index.html` is default file which would be read in a static hosted folder, if you don't mention any file name. |
| 170 | + |
| 171 | +3 ways to send data from request are: |
| 172 | +1. **Query Parameters** |
| 173 | + - **req.query** - for capturing query parameters from URL e.g. localhost:8080 ? **query=value** |
| 174 | +2. **Body Data** |
| 175 | + - **req.body** -for capturing request body data (but its needs a middleware for body data decoding) |
| 176 | +3. **URL Parameters** |
| 177 | + - **req.params** - for capturing URL parameters for route path like `/products/:id` |
| 178 | + |
| 179 | + |
| 180 | +### Related Links/Videos |
| 181 | + |
| 182 | +1. Express JS site: |
| 183 | +2. HTTP response status |
| 184 | + |
| 185 | +## Chapter 4 - REST API using Express |
| 186 | + |
| 187 | +- REST API is a standard for making APIs. |
| 188 | + - We have to consider a resource which we want to access - like **Product** |
| 189 | + - We access **Product** using combination of HTTP method and URL style |
| 190 | + |
| 191 | +**REST API ( CRUD - Create , Read , Update, Delete) :** |
| 192 | + |
| 193 | +- **CREATE** |
| 194 | + - **POST** /products - create a new resource (product) |
| 195 | + |
| 196 | +- **READ** |
| 197 | + - **GET** /products - read many resources (products) |
| 198 | + - **GET** /products/:id - read one specific resource (product) |
| 199 | + |
| 200 | +- **UPDATE** |
| 201 | + - **PUT** /products/:id - update by replacing all content of specific resource (product). |
| 202 | + - **PATCH** /products/:id - update by only setting content from body of request and not replacing other parts of specific resource (product). |
| 203 | + |
| 204 | +- **DELETE** |
| 205 | + - **DELETE** /products/:id - delete a specific resource (product). |
| 206 | + |
| 207 | +## Chapter 5 - Backend Directory Structure / MVC / Router |
| 208 | + |
| 209 | +MVC (Model-View-Controller) is **a pattern in software design commonly used to implement user interfaces (VIEW), data (MODEL), and controlling logic (CONTROLLER)**. It emphasizes a separation between the software's business logic and display. |
| 210 | + |
| 211 | +In Our Project this will be : |
| 212 | +**Model** - Database Schema's and Business logics and rules |
| 213 | +**View** - Server Side Templates (or React front-end) |
| 214 | +**Controller** - functions attached to routes for modifying request and sending responses. It's a link between the Model and View. |
| 215 | + |
| 216 | +**Router** |
| 217 | +- These are like mini-application on which you can make set of Routes independently. |
| 218 | +- Routers can be attached to main Server App using `server.use(router)` |
| 219 | + |
| 220 | +Arrange Directory in Server like this : |
| 221 | + |
| 222 | +**Controllers** - file containing functions which are attached to each route path |
| 223 | +**Routes** - files containing routers |
| 224 | +**Models** : to be discussed in later chapters |
| 225 | +**Views**: to be discussed in later chapters |
| 226 | + |
| 227 | + |
| 228 | + |
| 229 | +### Related Links/Videos |
| 230 | + |
| 231 | +1. Higher order functions |
| 232 | +2. REST API explanation |
| 233 | + |
| 234 | + |
| 235 | +### Assignments : |
| 236 | + |
| 237 | +- **Assignment 1** : If we delete `node_modules`. How to run our app again successfully ? |
| 238 | + |
| 239 | + |
| 240 | +- **Assignment 2** : How to remove double `console.logs` from React ? [ it is not needed in real life to remove them, its just an assignment problem ]. [ *Hint: Some special Component at top level is of App is causing it* ]. We explore more about - why this is needed in later videos. |
| 241 | + |
| 242 | +### Special Assignments ============== |
| 243 | + |
| 244 | +- **Assignment 3** : Create a Page with multiple React Apps. Both React Apps should be independent of each other. |
| 245 | + |
| 246 | +- **Assignment 4** : Try to build a react app using other toolchains like `Vite` |
| 247 | + |
| 248 | + |
0 commit comments