Like many others I've been blown way by the incredible performance and capabilities of vite as a tool for rapidly building out React apps. In my role as an egghead educator and a Developer Advocate at PayPal I'm looking for tools that install quickly, have minimal setup costs and let me start building immediately. vite does all that and more, but in the past I often run into one limitation: I need some kind of API to complement my apps.
I've been using express to build out APIs pretty much since it first came out. Checkout my course on using express 5 if you want a quick tutorial. Express makes it easy to build out APIs and it's super easy to add express support to your vite app. You just need a single plugin: vite-plugin-mix.
I promised 5 seconds, so get ready to copy & paste!
npm install -D vite-plugin-mix
Then in your vite.config.js
file add this to your plugins array
import { defineConfig } from 'vite'
import mix from 'vite-plugin-mix'
export default defineConfig({
plugins: [
mix({
handler: './api.js',
}),
],
})
And then in api.js
type:
import express from 'express';
const app = express();
app.get("/api/hello", (req, res) => {
res.json({ hello: "world" });
});
export const handler = app;
Once you do that you can startup vite
with npm run dev
and like magic you'll have the ability to reference /api/hello
on your local dev server. Like everything else in vite, if you make any changes to your API they'll be available immediately without having to restart anything. Just edit the code and call the route again and you'll see the latest!
One little note: I have only used vite so far for local development and can't personally vouch for it for production apps. If you're looking for something a bit more production ready you might want to check out fastify-vite which combines another popular API server, fastify with vite for one powerful and fast full-stack development tool.
Happy hacking friends!
Top comments (6)
You missed out the import line at the top of vite.config.js
I found that the issue github.com/egoist/vite-plugin-mix/... makes this strategy impossible with current vite and latest typescript since vite-plugin-mix is not currently bundled in a form suitable for a modern ESM project.
You get an error like "TypeError: mix is not a function".
Instead, I installed
npm-run-all
andcors
, and added script targets to the package.json of my project like this. The --race option means killing either the frontend server or the backend server will close them both.The
backend
target should not just export a pluggable middleware , but launch an actual server, (with a listen) with a cors middleware allowing hits against the distinct port, so./src/server.ts
should look like this...I love this solution, but I can't get it to work any more. I suppose vite changed. Now to run vite from the command like I need to run npx vite.. tried changing the frontend to that but it didn't work. Any suggestions?
Found it:
Great article! Is it possible to use TypeScript for the "backend" stuff? My use case would be continuing with client side rendering of a Vue app and having some routes be "backend" endpoints handled with express.
looks like the mix plugin is causing a problem, i removed the plugin and then everything worked perfectly, still don't know what's triggering it.
this is what vite logged:
this is my
vite.config.js
:things also work if i directly export the config without going through
defineConfig
, but then you get abuild
folder after thevite build
, really weird. 🤣