Hello! 👋 This short tutorial gets you up and running with Quill self hosting. Instead of hosting a Docker container, all you need to do is create an endpoint using our sdk and a few lines of code.

​
Step 1: Create endpoint on your server


npm i @quillsql/node --save

Instantiate quill with your credentials and add the below POST endpoint.

Note that we assume you have an organization id on the user returned by your auth middleware. Queries will not work properly without the organization id.

import { Quill } from "@quillsql/node"


const quill = new Quill({
  privateKey: process.env.QULL_PRIVATE_KEY,
  databaseConnectionString: process.env.POSTGRES_READ,
  databaseType: "postgresql"
});

// "authenticateJWT" is your own pre-existing auth middleware
app.post("/quill", authenticateJWT, async (req, res) => {
  // assuming user fetched via auth middleware has an organizationId
  const { organizationId } = req.user;
  const { metadata } = req.body;
  const result = await quill.query({
    orgId: organizationId,
    metadata,
  });
  res.send(result);
});

​
Step 2: Connect Endpoint in React QuillProvider

You connect Quill to React with the QuillProvider component. Similar to React’s Context.Provider, QuillProvider wraps your React app and places Quill Client on the context, enabling you to access it from anywhere in your component tree.

In App.js, let’s wrap our React app with an QuillProvider. We suggest putting the QuillProvider somewhere high in your app, above any component that might need to access Quill data.

App.js
import { QuillProvider } from "@quillsql/react";
import Routes from "./Routes";
import UserContext from "./UserContext";

function App() {
  // your existing auth user
  const [user] = useContext(UserContext);
  return (
    <QuillProvider
      // POST endpoint on your server for quill requests
      queryEndpoint="https://api.yourserver.com/quill"
      // we pass this to the endpoint url as a header on every request
      queryHeaders={{ Authorization: `Bearer ${user.jwt}` }}
      publicKey="YOUR_PUBLIC_KEY"
      theme={THEME}
    >
      <Routes />
    </QuillProvider>
  );
}