Skip to content

Latest commit

 

History

History
92 lines (61 loc) · 3.05 KB

setup.md

File metadata and controls

92 lines (61 loc) · 3.05 KB

Getting started with GUAC Visualizer

About

The GUAC Visualizer is an experimental utility that can be used to interact with the GUAC services. It acts as a way to visualize the software supply chain graph as well as a means to explore the supply chain, and prototype policies.

Since the GUAC Visaulizer is still in an early experimental stage, it is likely that there may be some unexpected behavior or usage problems. We recommend using the GraphQL interface directly. Feedback is welcome as we continue to improve the visualizer!

Prerequisites

Tools:

Services

To use the GUAC visualizer, you need to have the main GUAC server running.

Step 1. Getting started

Download the source code for the latest guac-visualizer release

cd into it:

cd guac-visualizer

Step 2. Install dependencies

yarn install

Step 3. Run the visualizer locally:

yarn dev

You can then go to localhost:3000 in your browser to start using the visualizer.

...

$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5

...

Configuring the server (optional step)

When running the development server (see step 3), or as a container app, the visualizer app server needs some configuration. The default configuration is stored in .env file.

# Reminder: These are the defaults for the application.
# Please, use a `.env.local` file for you local config
# See also: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables

GUACGQL_SERVER_URL=http://localhost:8080

You have multiple options, to change the configuration to your local needs:

  • provide environment variable ==> typical for execution environment, like kubernetes
  • create file .env.local, which then contains local configurations ==> typical during development

If these two options are not fitting for you, there are even more options for changing the configuration, please read the next.js's documentation, chapter environment variables.

Using the GUAC visualizer will look something like this:

image

Note: If you get an error when guac-visualizer tries to render, you may need to update the generated graphql code. To do this:

  1. Clone the GUAC repo
  2. Ensure the paths in the codegen.ts file in this repository are correct. If you cloned GUAC into a directory next to this repo's directory, you will not need to change the paths.
  3. Run yarn graphql-codegen to update the graphql code.