Sign up to take part
Registered users can ask their own questions, contribute to discussions, and be part of the Community!
Registered users can ask their own questions, contribute to discussions, and be part of the Community!
Hi Community ,
Does anyone know if it is possible or even recommended to use React for the frontend of a web app in DSS? If so, can you please share how you accomplished setting this up with the Flask backend.
Thank You!
Hi Adam!
React webapps are not natively supported by DSS, that's why the creation process may look a bit tricky, but here's what you could do:
where
- resource/my-app - your react application directory
- webapps/react/app.js - an empty file required by DSS
- webapps/react/body.html - a symlink to the resource/my-app/build/index.html
{
"meta": {
"label": "Test react app",
"description": "",
"icon": "icon-puzzle-piece"
},
"baseType": "STANDARD", // WARNING: do not change
"hasBackend": "false",
"noJSSecurity": "false",
"standardWebAppLibraries": ["jquery","dataiku"],
"params": [],
"roles": [
/* {"type": "DATASET", "targetParamsKey": "input_dataset"} */
]
}
That's it, now you just need to reload the webapp from the plugin actions dropdown and
considering that your React app is built you can create a new visual webapp in your project.
Hope this helps. Don't hesitate to let us know if you have questions.
Regards,
Andrey Avtomonov
R&D Engineer
Here's the plugin code I was using:
https://github.com/andreybavt/demo-dss-react-plugin
To answer your questions:
1) You can use JSX to develop your app, however, you'd need to build it first so that the build directory contains js files.
Also note that you won't be able to leverage Webpack dev server, but to recompile the webapp after changes.
The build should be run manually from the $DATADIR/plugins/dev/YOUR_PLUGIN_NAME/resource/YOUR_WEBAPP_NAME
2) python-lib is a directory that may contain python code that is shared between different webapps backends. In my case it's empty so you can ignore it to reduce confusion.
In general if you need a python backend for your webapp you need to create a backend.py file defining the endpoints. Here's an example how it can be done
3) Not necessarily, you can have multiple webapps in one plugin. Just create another directory next to webapps/react with a similar structure. (Make sure you don't forget to add a webapp.json and at least modify meta property in it)
For the development process I'd recommend creating a plugin first and adding a simple react webapp into it. Then you're not limited to only coding inside DSS, you can either
- open $DATADIR/plugins/dev/YOUR_PLUGIN_NAME/resource/YOUR_WEBAPP_NAME with your favourite IDE and continue developing the app from it
- or use our VSCode integration to edit your plugin code
https://marketplace.visualstudio.com/items?itemName=dataiku.dataiku-dss
In both cases you are free to develop the webapp completely outside of DSS (just by starting the devserver manually from the webapp dir). But to test the API requests served by the python backend you'd need to compile the app and open it from DSS.
Regards,
Andrey
There is no difference in building. I'll try using window.dataiku.getWebAppBackendUrl
Thanks!
Hi Andrey!
There is no difference (except for building on DSS & locally). I'll try using
window.dataiku.getWebAppBackendUrl
Thanks!
Hi Andrey!
I tried doing this & printed the window object in the console. It had both window.dataiku.getWebAppBackendUrl & window.getWebAppBackendUrl but during runtime it throws an error stating that getWebAppBackendUrl is not a function
Additionally, when I tried making a call to the function in console, I was able to get a response. I have attached the screenshot for reference.
Thanks!
Hmm, could you send me your plugin code to andrey.avtomonov@dataiku.com
You can download the whole contents by navigating to Plugins -> Development -> click on 3 dots on the left of the plugin name and then click on Download.
Thank you everyone for your questions. In the interest of knowledge sharing @Andrey was kind enough to put this topic together as a Knowledge Base article: Creating a Web App with a React Frontend