Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions clean-architecture-visualizer/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
# Clean Architecture Visualizer (web app)

This directory contains the web application for the Clean Architecture Visualizer project. It exposes a browser-based UI for exploring Clean Architecture “engines” and their interactions.

## Prerequisites

- Node.js and npm installed.
- Git installed (if you are cloning the repo).

## Installation

Clone the repository (if you have not already):

```bash
git clone https://github.com/paulgries/Clean-Architecture-Visualizer.git
cd Clean-Architecture-Visualizer
```

Install dependencies for the web app:

```bash
cd clean-architecture-visualizer
npm install
npm run build
npm link
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried following this and it fails at the npm link step:

Image

@matt-dahlgren is this the expected behavior right now?

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes it is.

npm link is used for local development (so that we can test our cli locally without needing to publish/fully download a package) as seen here in the documentation.

I will be addressing how to properly download cave on my next task in documentation. But we are going to deploy it similarly as MemoryViz is deployed.

If you see here it is an npm download of the repo itself. This change will include a small addition of a package.json to the outermost layer of this project. But it will allow for faster bug changes.

TLDR: npm link is used in development, it is not useable in production as it is looking for a local directory to build.

```

## Running the app

Start the development server:

```bash
cave view <filepath>
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works with the --console flag (stdout) but results in this error otherwise:

"npm error Missing script: "dev"

```

This will start the frontend (and any backend services configured in this package). Check the console output for the local URL (typically http://localhost:5173 or similar, depending on the dev setup).

## Running tests

To run the backend/unit tests:

```bash
npm test
```

The Jest configuration for the backend lives in jest.config.js, and backend tests are under tests/backend/.

## Project structure

Key subdirectories and files:
- src/ – Backend/core logic for the visualizer.
- frontend/ – Frontend code for the UI.
- tests/backend/ – Backend tests.
- examples/ – Example projects and data used with the visualizer.
- package.json – Scripts and dependencies for this package.

For higher-level context about the overall project, see the top-level README.md in the repository root.
31 changes: 6 additions & 25 deletions clean-architecture-visualizer/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading