Skip to content

Add Development Environment Setup #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Process-ing wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add Development Environment Setup #3

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
900620f
Add development environment setup
Process-ing Feb 17, 2025
6ba384a
Fix Clava-JS setup link
Process-ing Jul 21, 2025
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
38 changes: 36 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

Clava integration of LARA's web tool for visualization and analysis of the AST and its source code.

For more details, see the [LARA Framework repository](https://github.com/specs-feup/lara-framework).
For more details, see the [LARA visualization tool repository](https://github.com/specs-feup/lara-visualization) and the [Clava repository](https://github.com/specs-feup/clava).

## Usage

Expand Down Expand Up @@ -31,4 +31,38 @@ VisualizationTool.port; // port to which the server is listening
VisualizationTool.hostname; // hostname to which the server is listening
```

For more details, refer to the `GenericVisualizationTool` documentation, from [LARA](https://github.com/specs-feup/lara-framework).
For more details, refer to the `GenericVisualizationTool` documentation, from [LARA](https://github.com/specs-feup/lara-framework).

## Development Environment

To configure the development environment, firstly do the [setup described in Clava-JS](https://github.com/specs-feup/clava/tree/master/Clava-JS#installing-dev-environment). Then, clone the visualization tool repositories:

```bash
git clone -b feature/ast-visualization https://github.com/specs-feup/lara-visualization.git
git clone -b feature/ast-visualization https://github.com/specs-feup/clava-visualization.git
```

Edit the base folder's `package.json` to the following:

```bash
{
"type": "module",
"workspaces": [
"clava/Clava-JS",
Copy link
Member

@joaobispo joaobispo Jul 19, 2025

Choose a reason for hiding this comment

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

Wondering if we need Clava-JS in development mode, or if we could just use a version in NPM. Was this on purpose?

Copy link
Contributor Author

@Process-ing Process-ing Jul 21, 2025

Choose a reason for hiding this comment

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

I think that it should be possible. I included this approach because the developer will also probably work with the standard LARA and Clava repositories, but this shouldn't be a limitation. Do you think I should also include a section for working with the NPM packages of Clava-JS?

Copy link
Member

@joaobispo joaobispo Jul 22, 2025

Choose a reason for hiding this comment

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

In the best case scenario, this is a standalone library that does not need to change the internals of Clava or LARA. However, this library in particuly might be dependant of Clava's internals, how was your experience developing the library, do you find it useful to have the source code of both Clava and LARA?

Copy link
Contributor Author

@Process-ing Process-ing Jul 22, 2025

Choose a reason for hiding this comment

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

In my case, I only used the LARA and Clava repositories to get a closer notion of the API, I did not strictly need to change anything in their code. However, I don't think this will be the general case, as most people will probably use the visualization tool when working with the other repositories.
Nonetheless, it can be useful for some that are making other changes for this tool only, so I will try to add this setup option in this guide (if possible).

"lara-framework/Lara-JS",
"lara-visualization",
"clava-visualization"
]
}
```

Then, execute the following commands to finish the compilation procedure:

```bash
npm install
npm run build -w lara-visualization
npm run build -w clava-visualization
npm install
```

After this, you you should be able to use the tool in your project by following the instructions described in the previous section.