====== NodeJS ======

===== Terminology =====

^ Term ^ Description ^
| react | Front-end framework |
| JSX | HTML-style coding in JS |
| fastify | Node framework for backend |
| HMR | Hot Module Replacement, reloads page on save using websocks or something |
| Routing | Moving user to different pages |
===== Libraries and frameworks =====

^ Name ^ Category ^ Description ^
| vite | Build environment? | Makes wokring with front end easier. Helps with project generation, running dev code etc. |
| react | Front-end framework | Uses JSX and has a lot of other stuff |
| MUI | Components | Front end component and layout framework |
| bootstrap | Components | Front end component and layout framework |


===== VS Code =====

^ Plugin name ^ Description ^
| Prettier - Code formatter  | For formatting on save, needs some setup to work |
| ES7+ React/Redux/React-Native snippets | Nice snippets for react, for example rfce |
| indent-rainbow | Easier to read indents |

^ Hotkey ^ Description ^
| c-d | Find similar word and enter multi-cursor edit mode, press multiple times |
|  |  |
|  |  |

===== Resources =====

^ Link ^ Description ^
| [[https://react.dev]] | React docs |
| [[http://jsonplaceholder.typicode.com/]] | Fake API for testing calls |
===== Getting started =====

<code bash>
npm create vite@latest
</code>
Follow the guide. Pick for example react with JavaScript + SWC

Then run
<code bash>
cd proj-dir
npm install
npm run dev
</code>

===== Getting started  -- OLD =====

<code bash>
npm init
npm install pug
npm install fastify
npm install fastify-pug # Nope
</code>

<code javascript>
import Fastify from "fastify";

// Fastify instance
const fastify = Fastify({logger:true});


fastify.get("/", (req, res)=>{
    res.send( "HelloWorld" )
} )


try{
    await fastify.listen({port:3000, host: "127.0.0.1"}); // Start server process, wait for it to exit
}catch(err){
    console.log(err);
    process.exit(1);
}


</code>

<code javascript>
//package.json
//Add:

  "type": "module",
</code>
===== VSCode =====

^ Command ^ Function ^
|''c-P'' | Open all commands |
|''c-p'' | Search for files in project |
|''c-F'' | Search in code |
|''c-,'' | Settings |