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

Copy .env.development to the file .env.development.local and change the url to whatever you want to use.

With bun.sh

Install bun

Inside test-server folder, run :

bun run http.js

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

Copy .env.development to the file .env.development.local and change the url to whatever you want to use.

Recommanded tools

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

Setup debugging 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 your favorite chromium browser.