bigbeard•2y 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

bigbeardOP•2y 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•2y 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•2y 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•2y ago

you can override it passing REMOTE=YOURINSTANCE

bigbeardOP•2y ago

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

rubenf•2y ago

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

bigbeardOP•2y 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•2y ago

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

bigbeardOP•2y 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

bigbeardOP•2y 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•2y ago

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

bigbeardOP•2y ago

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

bigbeardOP•2y 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•2y ago

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

bigbeardOP•2y 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)

Best practices for Importing React app in development and production environments

Did you find this page helpful?