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 (
    <Vizzly.Dashboard
      // 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!