Create React App

This guide uses Create React App (CRA) (opens in a new tab) to setup a basic frontend. CRA is a popular set of tools used to setup and maintain a React project.

1. Setup the CRA project with Vizzly.

npx create-react-app my-vizzly-app && \
cd my-vizzly-app && \
yarn add @vizzly/dashboard

2. Adding the react component

Replace the src/App.js file with;

import React from "react";
import Vizzly from "@vizzly/dashboard";
 
function App() {
  return (
    <Vizzly.Dashboard
      queryEngineEndpoint={"<< Your query engine endpoint >>"}
      identity={async () => {
        throw new Vizzly.NewVizzlyImplementation();
      }}
    />
  );
}
 
export default App;

3. Run it

To run the project, execute the following CLI command in your shell

yarn start

Once done, a page in your web browser will open, where you will see a welcome message from us, and details on the next steps.