svg-layout-designer-react/README.md

SVG Layout Designer React

An svg layout designer.

Getting Started

Requierements :

• NodeJS
• npm
• Chrome > 98
• pnpm (optional but recommanded unless you prefer having a huge node_modules directory)
• git-lfs (in order to clone the documentation)

Developping

Run npm ci

Run npm run dev

Deploy

Run npm ci

Run npm run build

Run the tests

Run npm ci

Run npm test

API

You can preload a state by setting the state URL parameter with a url address to a state.json file.

Example: http://localhost:4000/?state=http://localhost:5000/state.json

Testing the external API

This program fetch the data structure from others applications, allowing it to assemble them later.

With NodeJS

node run ./test-server/node-http.js

The web server will be running at http://localhost:5000

Configure the file .env.development with the url

With bun.sh

Install bun

Inside test-server folder, run :

bun run http.js

The web server will be running at http://localhost:5000

Configure the file .env.development with the url

Recommanded tools

• VSCode
• React DevTools
• vscode-tailwindcss
• vscode-eslint

Setup debuggin with chrome

Inside .vscode/settings.json, set the following :

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}",
    }
  ]
}

Change the url to the dev server url. Set the runtimeExecutable to you favorite chromium browser.