React - a quick setup

This guide sets up a very simple React application, with the Vizzly dashboard installed.

npm i @vizzly/cli -g

Next, we will run the command to initialize a react project in the my-vizzly-frontend directory.

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

Then we will change the directory, install the dependencies and start the app.

cd my-vizzly-frontend && \
yarn install && \
yarn add @vizzly/dashboard

If successful, you will see a localhost URL in your terminal. If you visit that in your browser, you will see a welcome message from us, and details on the next steps.

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;

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.