up:: [[TypeScript]]
tags::

# <span style="color: red;">WARNING!!</span> None of the following works
None of the following directions work.. Skip all the way down to the next section in GREEN

---
## install dependencies
```bash
npm install -D vite-plugin-mix
```

## update plugins
In `vite.config.js` file, we need to add the mix handler to our configs array
```typescript
import { defineConfig } from 'vite'
import mix from 'vite-plugin-mix'

export default defineConfig({
  plugins: [
    mix({
      handler: './server.ts',
    }),
  ],
})
```
notice we use `server.ts` instead of a new `api.ts` file. This is because we already use express in `server.ts` so we will just create an `api.ts` file that will export a function which takes the express instance as an argument.
## Create api file
We need to create a new file for our api called `api.ts`. Feel free to place it anywhere.

In a tutorial, i was told to use express in this file, but we already use express since this is an SSR app, so we will be passing express to a function inside this file instead
```typescript
export default function buildAPI(expressApp: ExpressType){
	const app = expressApp; // this is just for simplicity for note purposes
	app.get("/api/hello", (req, res) => {
		res.json({hello: "world"})
	})

	return app
}
```

## Use api in server file
Now that we have our buidl api function setup, we want to use it.
```typescript
app.use("*", ()=>{
	// default implimentation ignore me
})

buildAPI(app) // pass in app instance here

app.listen(...)
```


---
# <span style="color: green;">THESE</span> steps work
Following these steps successfully produce a server api

## Setup
remove any installed packages from the previous steps

## Modification
- the `app.use( "*", ()=>{} )` initial logic should be changed to `app.use("/app", () => {} )` and then your main app will be routed directly to that
- the app use method creates a middleware so you can reject the request if you want, for example if theres no auth or something.
- then you can create the api routes below it under the `/api` middleware with `app.use("/api", (req, res, next) => {})`.

Thats it, thats all we need to do

# Extras
- auto update server on change [Nodemon package](https://www.npmjs.com/package/nodemon)