React, NodeJS and Postgres
React frontend

Adding the Vizzly React frontend

New react project

If you do not have an existing react application that you want to add the Vizzly dashboard too, you can create a very simple, react application using the Vizzly CLI.

vizzly init-frontend --type react --name vizzly-frontend

Now, lets change directory to see the new project, and install it's dependencies.

cd vizzly-frontend
npm install

Link it all together

In summary, we have;

  • Deployed a Vizzly query engine.
  • Built an auth server to sign the Vizzly identity config
  • Built a very basic React frontend.

Finally, we need our react frontend to use the deployed Vizzly query engine, and the auth server running locally to complete the setup.

import * as React from "react";
import { createRoot } from "react-dom/client";
import Vizzly from "@vizzly/dashboard";
function App() {
  return (
      // Fill in your query engine endpoint here, that you deployed in the first step.
      queryEngineEndpoint={"<< Your query engine endpoint >>"}
        identity={async () => {
          // Send a POST request to our NodeJs identity server
          const response = await fetch("http://localhost:7000/auth", {method: "post"});
          if(response.ok) {
            const tokens = await response.json();
            return tokens;
          return null;
const container = document.getElementById("root");
const root = createRoot(container!);
root.render(<App />);

After replacing the queryEngineEndpoint prop value with your own, you will be able to run the react project and find the dashboard renders successfully!