Creating a Web App with React Frontend

Solved!
adamnieto
Creating a Web App with React Frontend

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!

2 Solutions
Andrey
Dataiker Alumni

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:

1) Create a dev plugin on your DSS instance:

Screenshot 2020-06-02 at 13.35.48.png

โ€ƒ2) create the following file structure:

Screenshot 2020-06-02 at 13.44.22.png

 

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

- webapps/react/webapp.json - a webapp config, for example

 

{
"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"} */
]
}

3) Add  "homepage": "../../resource/my-app/build" to your resource/my-app/package.json

 

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

 

 

 

Andrey Avtomonov
R&D Engineer @ Dataiku

View solution in original post

Andrey
Dataiker Alumni

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

https://github.com/dataiku/dss-plugin-reinforcement-learning/blob/master/webapps/vizualisation/backe...

 

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

Andrey Avtomonov
R&D Engineer @ Dataiku

View solution in original post

25 Replies
err0w
Level 1

There is no difference in building. I'll try using window.dataiku.getWebAppBackendUrl

Thanks!

0 Kudos
err0w
Level 1

Hi Andrey!

There is no difference (except for building on DSS & locally). I'll try using

window.dataiku.getWebAppBackendUrl

Thanks! 

0 Kudos
err0w
Level 1

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! 

0 Kudos
Andrey
Dataiker Alumni

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.

Andrey Avtomonov
R&D Engineer @ Dataiku
0 Kudos
CoreyS
Dataiker Alumni

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 

Looking for more resources to help you use Dataiku effectively and upskill your knowledge? Check out these great resources: Dataiku Academy | Documentation | Knowledge Base

A reply answered your question? Mark as โ€˜Accepted Solutionโ€™ to help others like you!
0 Kudos