triston-notes/Cards/dev/Add api support to vite ssr app.md
2023-10-21 18:52:54 -05:00

2.2 KiB

up:: TypeScript tags::

WARNING!! None of the following works

None of the following directions work.. Skip all the way down to the next section in GREEN


install dependencies

npm install -D vite-plugin-mix

update plugins

In vite.config.js file, we need to add the mix handler to our configs array

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

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.

app.use("*", ()=>{
	// default implimentation ignore me
})

buildAPI(app) // pass in app instance here

app.listen(...)

THESE 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