LucidChart with React

Hey Dan! Apologies on the delayed response. There seems to be a bug with windows and our webpack script. We will be discussing tomorrow as a team. Will follow up shortly. Thanks!

Thanks for confirming!

Hey Dan,

Sorry again for the delay there. We're still working on making our script windows compatible. In the meantime, I've created a repo that can hopefully unblock you as a workaround.

https://github.com/lucidsoftware/sample-lucid-extensions/commit/32ef439f99d7189ef8acf1e40bb16207f1d68ea6

Here's the file that matters the most. You can create this one manually in your own `/public` folder and that should get your extension talking to your frontend.

https://github.com/lucidsoftware/sample-lucid-extensions/commit/32ef439f99d7189ef8acf1e40bb16207f1d68ea6#diff-9ef5a348eadc3a77e8bb80e863f1a768c8ec18b1bcd86f6210a2129c90e2b876

You’ll probably need to update this url to point to the right location (the url is relative to the root of `/public`): 

https://github.com/lucidsoftware/sample-lucid-extensions/commit/32ef439f99d7189ef8acf1e40bb16207f1d68ea6#diff-e44faa18ad076e8bde1bd79376967ee031fc04f3b8a714abe5f4149fee691fb5R11

This will come up again when you're wanting to generate your production bundle, so I’ll keep you in the loop on our fix.

Thanks! I will check this out shortly and I appreciate the fast response.

I unfortunately cannot get this to work still.  I even tried starting over from scratch several times.

You say “You can create {index.html} manually in your own `/public` folder and that should get your extension talking to your frontend.”

I downloaded the index.html file into this folder:

{mybasefolder}\reacttest\editorextensions\with-cool-ui\rightpanel\public

Is that the correct /public folder to put index.html in?

You say “You’ll probably need to update {extension.ts’s url } to point to the right location (the url is relative to the root of `/public`): 

my full path to “extension.ts” is:

"C:\ReactLucidTest\reacttest\editorextensions\with-cool-ui\src\extension.ts"

is that the correct “extension.ts” to edit?

my full path to “index.html” is:

"C:\ReactLucidTest\reacttest\editorextensions\with-cool-ui\rightpanel\public\index.html"

My current code for extension.ts is:

import {EditorClient, Panel, PanelLocation, Viewport} from 'lucid-extension-sdk';

const client = new EditorClient();

export class RightPanel extends Panel {

    private static icon = 'https://lucid.app/favicon.ico';

    constructor(client: EditorClient) {

        super(client, {

            title: 'From React',

            url: 'rightpanel/index.html',

            location: PanelLocation.RightDock,

            iconUrl: RightPanel.icon,

        });

    }

}

const rightPanel = new RightPanel(client);

you say “the url is relative to the root of `/public”, then should the url value simply be index.html?

Thanks,

Dan

I thought I would also share the results from “Step 3: Replace webpack.config.js for the editor extension” in the LucidChart guide.

I edited the following file:

C:\ReactLucidTest\reacttest\editorextensions\with-cool-ui\webpack.config.js

to contain the code below.  Is this the correct file and is this the correct contents?

onst path = require('path');

const WebpackShellPluginNext = require('webpack-shell-plugin-next');

const reactTargets = [{name: 'rightpanel', port: 3000}];

module.exports = {

    entry: './src/extension.ts',

    module: {

        rules: [

            {

                test: /\.tsx?$/,

                use: 'ts-loader',

                exclude: /node_modules/,

            },

            {

                test: /[\\\/]resources[\\\/]/,

                use: 'raw-loader',

                exclude: /\.json$/,

            },

        ],

    },

    resolve: {

        extensions: ['.ts', '.js'],

    },

    output: {

        filename: 'bin/extension.js',

        path: __dirname,

    },

    plugins: [

        new WebpackShellPluginNext({

            //When doing a watch build, run "npm start" and update the html file to prefix http://localhost:3000/ to all the resource URLs

            onWatchRun: {

                scripts: reactTargets.map(

                    (target) =>

                        `mkdir -p ../../public/${target.name} &&` +

                        `curl http://localhost:${target.port} | ` +

                        `sed -E "s/(src|href)=\\"/\\\\1=\\"http:\\/\\/localhost:${target.port}\/gi" > ` +

                        `../../public/${target.name}/index.html`,

                ),

                blocking: true,

            },

            // When doing a full build, run "npm run build" and then copy all the assets to the root level public folder

            onBeforeNormalRun: {

                scripts: reactTargets.map(

                    (target) =>

                        `mkdir -p ../../public/${target.name} &&` +

                        `cd ${target.name} && ` +

                        `npm run build && ` +

                        `sed -i -E "s/(src|href)=\\"\\//\\1=\\"\/gi" build/index.html &&` +

                        `cp -r build/* ../../../public/${target.name}`

                ),

                blocking: true,

            },

        }),

    ],

    mode: 'development',

};

I used chatgpt on the error I was getting and got the following response:
 

“The error message you're seeing suggests there's a syntax problem with your command. It appears you're trying to use Unix-style commands (`mkdir`, `curl`, `sed`) in a Windows environment, which might not work as expected because Windows command line (CMD) uses a different syntax. Moreover, the combination of commands and the way they are piped together could also be causing issues.

Let's break down your command and see how it can be adapted for Windows, or how you can use alternative tools:

1. `mkdir -p ../../public/rightpanel`: This command is trying to create a directory, including any necessary parent directories. The `-p` option, which allows the creation of nested directories, does not have a direct equivalent in Windows CMD, but PowerShell supports similar functionality.

2. `curl http://localhost:3000`: This command is used to fetch the content from the specified URL. Windows 10 and later include `curl`, so this part should work, but ensure `curl` is installed if you're on an older version.

3. `sed -E "s/(src|href)=\"/\\1=\"http:\/\/localhost:3000/gi"`: This part uses `sed`, a stream editor for filtering and transforming text, which is not natively available in Windows CMD. You might need to use a different tool for text processing, like PowerShell commands or download a Windows version of `sed`.

4. `> ../../public/rightpanel/index.html`: This part redirects the output to a file, which should work in Windows CMD as well.

For Windows, consider using PowerShell, which is more powerful and flexible than CMD, and supports more Unix-like commands. Here's how you might rewrite your command in PowerShell:

```powershell
# Ensure the directory exists
$dir = "../../public/rightpanel"
if (-Not (Test-Path $dir)) {
  New-Item -ItemType Directory -Force -Path $dir
}

# Fetch content and modify it
$content = Invoke-WebRequest -Uri "http://localhost:3000" | Select-Object -ExpandProperty Content
$modifiedContent = $content -replace '(src|href)="', '$1="http://localhost:3000/'

# Write to file
$modifiedContent | Set-Content "$dir/index.html"
```

This PowerShell script does the following:
- Checks if the directory exists and creates it if it doesn't.
- Fetches content from `http://localhost:3000`.
- Uses a regular expression to replace `src="` and `href="` with `src="http://localhost:3000/` and `href="http://localhost:3000/`.
- Writes the modified content to `../../public/rightpanel/index.html`.

Make sure to run this in a PowerShell environment. If you're integrating this into a build script or tool that doesn't run PowerShell by default, you might need to call it explicitly, e.g., by using `powershell -Command "<your command here>"` or saving the script to a `.ps1` file and running it with PowerShell.”

This leads me to think the issue is related to the webpack.config.js code.  Thoughts?

Hey Dan,

Sorry for not being clearer. There are in fact 2 places you’ll find index.html files.

The first one lives next to the react app (in my case in frontend-frameworks/editorextensions/react-example/react-example/public/index.html) which is what you're serving locally at `http://localhost:3000`. This one is managed by the react app and you shouldn't need to replace it.

The second one lives in a /public folder that sits right in the root of the package (in my case in /frontend-frameworks/public. I think in your case it should be /ReactLucidTest/reacttest/public, you can create it if it doesn't exist yet). This version of the HTML gets loaded in the iframe your extension creates when users open up the panel you're creating. The entire `/public` folder here will get hosted for you by Lucid; For development the file basically just links up to the resources getting hosted at your localhost address; For production, you can put the minified and bundled react app as well as any images/other static resources you’d like hosted into the folder, and they will be available for your extension to reference.

The version of the HTML that lives in the root level `/public` folder should be getting created automatically for you via that webpack script you pointed to. ChatGPT has the right of it, basically the script hits the locally hosted url, swaps some of the resource urls in it, and the pastes the resulting html/files into the root level `/public` folder (`/frontend-frameworks/public`). This is the one your extension panel should point at, and its URL will be relative to the public folder, so yes if you put your index.html file in `/ReactLucidTest/reacttest/public/index.html`, then your extension should just use `index.html` for the panel's URL. Looks like right now it's looking for `/rightpanel/index.html`.

The problem (as ChatGPT correctly identified) is that windows does not support this command: `sed -E "s/(src|href)=\"/\\1=\"http:\/\/localhost:3000/gi"`, so the webpack scrip is failing to replace the resource urls, and then erroring out before it trys to print the file you want into your root level `/public` folder. That powershell script looks like it will do what you want, but I’m not sure if you can execute that code from the webpack context cleanly. So you could either run it manually once (it only really needs to happen one time for development, and then any time you do a production deployment), or you can manually run the flow by putting the html file I linked where you need it by hand (so paste it somewhere in your /ReactLucidTest/reacttest/public folder, and then reference that location in your extension.ts file where you are specifying the panel's url.)

ablackburn,

I unfotunately cannot get this to work still.

Here is what I did:

• Started over and created an empty folder:  C:\ReactLucidTest2
• Followed the exact instructions as found in the official React Guide here.
• Copied the index.html found that you linked here:  I placed the downloaded index.html in this folder: C:\ReactLucidTest2\reacttest\public
• modified  C:\ReactLucidTest2\reacttest\editorextensions\with-cool-ui\src\extension.ts by setting url to one of these:
  • url: 'index.html',
  • url: 'right/index.html',

The react app is up and running in the browser at http://localhost:3000/ using npm start.

In a second command prompt, i cded to C:\ReactLucidTest2\reacttest and then run:

npx lucid-package test-editor-extension with-cool-ui

I get the following error message:

Listening at http://localhost:9900/extension.js
Listening at http://localhost:9901/shapeLibraries
Found npm start script in C:\ReactLucidTest2\reacttest\editorextensions\with-cool-ui\rightpanel.
node:events:496
      throw er; // Unhandled 'error' event
      ^

Error: spawn npm ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:286:19)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:292:12)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn npm',
  path: 'npm',
  spawnargs: [ 'start' ]
}

Node.js v20.11.1

Thoughts?

I pulled down the full commit code but did not do anything with it since I still followed the official React Guide.

Would someone be willing to do a web meeting with me to get things up and running?

Thanks, Dan

@ablackburn  What was the solution if you do not mind sharing

Hi @rayvega, my name is Richard from the Technical Support team here at Lucid. This is a great question! Thanks for your patience with our reply. I checked-in with the devs this morning and unfortunately it’s not clear exactly what the solution was. I learned that, at a higher level, the solution came from getting the open source example up and running.  The example and setup instructions are stored in our sample-lucid-extensions GitHub repo.

@PromitaDan Do you have any more insights here into how you and @ablackburn solved this issue?

Hello!

I tried to create the package from scratch again today hoping that the issue was fixed. Unfortunately, it appears that developing a LucidChart package and editor extension on a windows machine still does not work.  I still receive the same error. 

Are there any known workarounds for this issue?  I cant be the only one using a windows development machine.

Thanks, Dan

Hey @PromitaDan, I’m glad to hear that you met with Alex this morning to get this issue resolved. Just wanted to summarize your call with Alex for the thread:

1. File Generation Issue on Windows:

   • Windows wasn’t generating a required file correctly. You and Alex manually copy-pasted the contents into your /public/rightpanel folder, which got the Lucid extension properly communicating with the React app.

2. npm Start Script Issue:

   • The CLI was detecting an npm start script and trying to run it, which caused a bug. You resolved this by:
     • Deleting an erroneously created folder in your extension that had a package.json with a problematic start script.
     • Removing the start script from the package.json of your React app.
     • Running the React app manually using npx react-scripts start. This step might not have been necessary but helped in troubleshooting.

Thanks for your patience, and let us know if you need any more help!