_bigbeard•12mo ago

Best practices for Importing React app in development and production environments

Here's a loom video of my challenge: https://www.loom.com/share/fc26f7a7f7644b74adcbbf0d1e68d25c Example working public app (built in windmill UI): https://app.windmill.dev/public/automation-architech/d854ac2b0766c48cbe2df3f85726ed67 Following this template: https://www.windmill.dev/docs/react_vue_svelte_apps/react I have a simple PDF to text conversion flow in Windmill that works correctly when called directly. I want to call this flow from a React app to allow uploading a PDF and getting the converted text back. I've tried two things: Calling the flow from a React dev environment (localhost:3000). I get errors that the app can't connect to Windmill. Deploying the React app and calling from production. I still get errors accessing the Windmill flow. My questions: What is the best practice for connecting to existing Windmill flows from a React dev environment? Is there something special needed to allow localhost access? What is the recommended way for a deployed React app to call Windmill flows? Do I need to configure something specific to allow access? Is there a good example or resource showing a React app integrating with Windmill that I can reference for best practices? Any help is appreciated! I'm a bit lost on the correct way to call my existing Windmill flows from React.

Loom

Best practices for calling Windmill flows from React development an...

React App Import | Windmill

Although Windmill provides a comprehensive App editor to turn scripts and workflows into custom UIs, you might want to import your own Apps in React.

15 Replies

_bigbeard•12mo ago

ere's a snippet of the code I'm using to handle the file upload:

async function handleFileUpload(event: React.ChangeEvent<HTMLInputElement>) {
  if (event.target.files) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = async function() {
      if (reader.result) {
        const base64data = typeof reader.result === 'string' ? reader.result.split(',')[1] : '';
        const body = JSON.stringify({
          "file_": base64data
        });
        const endpoint = `https://app.windmill.dev/api/w/automation-architech/jobs/run_wait_result/p/u/doug/brisk_script`;

        try {
          const response = await fetch(endpoint, {
            method: 'POST',
            headers: {
              "Content-Type": "application/json",
              "Authorization": "Bearer {token}"
          },
          body
        });

        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error('Error:', error);
        }
      }
    }     
  }  
}

async function handleFileUpload(event: React.ChangeEvent<HTMLInputElement>) {
  if (event.target.files) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = async function() {
      if (reader.result) {
        const base64data = typeof reader.result === 'string' ? reader.result.split(',')[1] : '';
        const body = JSON.stringify({
          "file_": base64data
        });
        const endpoint = `https://app.windmill.dev/api/w/automation-architech/jobs/run_wait_result/p/u/doug/brisk_script`;

        try {
          const response = await fetch(endpoint, {
            method: 'POST',
            headers: {
              "Content-Type": "application/json",
              "Authorization": "Bearer {token}"
          },
          body
        });

        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error('Error:', error);
        }
      }
    }     
  }  
}

rubenf•12mo ago

@bigbeard normally the dev server from vite is the one doing the proxy to app.windmill or your instance so you should do all of your url in a relative manner

rubenf•12mo ago

https://github.com/windmill-labs/windmill-react-template/blob/main/vite.config.ts

GitHub

windmill-react-template/vite.config.ts at main · windmill-labs/wind...

Contribute to windmill-labs/windmill-react-template development by creating an account on GitHub.

rubenf•12mo ago

you can override it passing REMOTE=YOURINSTANCE

_bigbeard•12mo ago

aha, aka: /api/w/automation-architech/jobs/run_wait_result/p/u/doug/brisk_script

rubenf•12mo ago

yes you can remove the https://app.windmill.dev from all your endpoints

_bigbeard•12mo ago

awesome, TYVM! @rubenf on a related topic to the react template .. are there timeouts that can be adjusted on windmill-hosted scripts? Not for one step in a flow, but when calling a single script. Some of these larger PDFs timeout when uploading (only when calling from the React app, not from the Windmill App Builder UI). I can send a more detailed video/screenshot in a bit if this does not make aense

rubenf•12mo ago

We need to add timeouts as runtime settings of scripts, it's a todo

_bigbeard•12mo ago

on a second note, actually it seems like my FE is sending a cancel request.. WINDMILL_TOO_BIG I noticed that the script processes those large pdfs fine when it's a raw API call, but when it's coming from the react template front end, it's timing out at just under 30 seconds

_bigbeard•12mo ago

well now im not sure. it seems like it's the front end timing out because the script in isolation is fine, it's only when I call it from the React FE it fails...

rubenf•12mo ago

that might be in the utils of the react template ? there might be a timeout of 30s there

_bigbeard•12mo ago

So I never did find a solution for this (callling an external API) however, switching to executeWorkspaceScript fixed my issue 🙂

_bigbeard•12mo ago

One more thing: Is there anything I need to change in the tempate to make the app public? Seems like when I import an .iife file, I don't have the same results I get as I do when I build in the Windmill UI

rubenf•12mo ago

@bigbeard yeah for now we didn't think of the deploying custom apps publicly use-case but we can investigate next week

_bigbeard•12mo ago

excellent! If you need help testing let me know. would love to have this one working 🙂 one thing I wanted to add here: If I can white label this application as well individually, I'm trying to put together a demo and would be happy to pay for a public license to remove any branding (1-3 months depending on how long I need to keep it up) and allow anyone to publicly interact with it if they have the link (similar to the windmill app UI)