Quickstart
Start here to build awesome apis quickly
Visulima Connect is a promise-based method routing and middleware layer. It is designed to work with Express.js, Next.js and many other frameworks.
Start to use itPermalink for this section
InstallPermalink for this section
In your project directory, run the following command to install the dependency:
pnpm i @visulima/connectReady to Go!Permalink for this section
In this Example we will use Next.js
Now, you can create your first api route as pages/api/hello.js:
import type { NextApiRequest, NextApiResponse } from "next";import { createNodeRouter, expressWrapper } from "@visulima/connect";import cors from "cors";// Default Req and Res are IncomingMessage and ServerResponse// You may want to pass in NextApiRequest and NextApiResponseconst router = createNodeRouter<NextApiRequest, NextApiResponse>({ onError: (err, req, res) => { console.error(err.stack); res.status(500).end("Something broke!"); }, onNoMatch: (req, res) => { res.status(404).end("Page is not found"); },});router .use(expressWrapper(cors())) // express middleware are supported if you wrap it with expressWrapper .use(async (req, res, next) => { const start = Date.now(); await next(); // call next in chain const end = Date.now(); console.log(`Request took ${end - start}ms`); }) .get((req, res) => { res.json({ user: { name: "John Doe" } }); });export default router.handler();
And run the next or next dev command specified in package.json to start developing the project!
Now you can use it in your frontendPermalink for this section
import { useEffect, useState } from "react";export default function Home() { const [data, setData] = useState(null); useEffect(() => { // You can use any fetch library you want fetch("/api/hello") .then((res) => res.json()) .then((data) => setData(data)); }, []); return ( <div> <h1>{data?.user?.name ?? "Hello World"}</h1> </div> );}