71 lines
2.2 KiB
Markdown
71 lines
2.2 KiB
Markdown
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) |