Hi Team, Is there a way to add the the kedro-viz interactive graph to a static website? I found the kedro-static-viz plugin, but it doesn't work with 0.18.3. Looking at the

kedro-viz/readme

it suggests using a standalone React component with the

pipeline.json

as prop. I tried it, but couldn't get it to work - I am not familiar with React. Do you have a simple example using a static website or do you need a proper React environment? Many thanks

this is the recommended way, there isn’t anything simple for python programmers out of the box yet

OK - at least I am on the right path. Will wrestle with React and html some more. Do you know of any project that uses this as example?

hi Sean. take a look a this repo: https://github.com/tynandebold/kedro-viz-standalone

Thanks @Tynan

and the usage of Viz as a React component here: https://github.com/tynandebold/kedro-viz-standalone/blob/master/src/Component.js

Many thanks @Tynan

let me know if you need anymore help with it

This is really awesome, but i'm a little lost (I know next to nothing about react / frontend )

Hi Andrew, its been a while, but if I remember correctly the kedro-viz-standalone is a react component so the easiest way to get going is to install node.js as an environment and then you can run it easily. And yes, you load a pipeline json file as input to show the interactive graph. I managed to export/build the above then to a static file to include in a simple documentation. I am not a react/frontend person myself so it involved a bit of learning... Try

npm start

in the root dir after install node.js and it should show the react component in your browser with the demo data. to then import your own data (

pipeline.json

)change

import { demo } from "./demo";

to

var demo = require('./pipeline.json');

ok so this depends on a running npm instance somewhere ?

@Andrew Stewart could you give more context on what you're trying to achieve? i'll be better able to assist you if you do 🙂

Of course. Let's say I want to setup a GitHub Action that generates a static form of the kedro-viz site which I can then serve via GitHub Pages

sorry for the delay! what you said above sounds doable. will the GitHub action run from a repo that's a Kedro project? if so, you may be able to run

kedro viz --save-file

in the action, save that to a known location in the repo, and then serve a React application via GitHub pages that uses that save data to populate Kedrp-Viz

Interesting

yes, exactly right

Got it. Sounds like this could potentially make for a nice little plugin.

yeah that should work. that's how i'm hosting that other Viz instance. you should be able to do the same

Pretty cool!