_bigbeard
_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.
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.
No description
15 Replies
_bigbeard
_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
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
rubenf•12mo ago
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
rubenf•12mo ago
you can override it passing REMOTE=YOURINSTANCE
_bigbeard
_bigbeard•12mo ago
aha, aka: /api/w/automation-architech/jobs/run_wait_result/p/u/doug/brisk_script
rubenf
rubenf•12mo ago
yes you can remove the https://app.windmill.dev from all your endpoints
_bigbeard
_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
rubenf•12mo ago
We need to add timeouts as runtime settings of scripts, it's a todo
_bigbeard
_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
No description
No description
_bigbeard
_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...
No description
No description
rubenf
rubenf•12mo ago
that might be in the utils of the react template ? there might be a timeout of 30s there
_bigbeard
_bigbeard•12mo ago
So I never did find a solution for this (callling an external API) however, switching to executeWorkspaceScript fixed my issue 🙂
_bigbeard
_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
No description
No description
rubenf
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
_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)