Join us on July 16th as we explore real-world Reinforcement Learning Learn more

Creating a Web App with React Frontend

Level 3
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!

0 Kudos
12 Replies
Dataiker
Dataiker

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
R&D Engineer @ Dataiku
Level 3
Author

Hi Andrey!

Thank you so much for putting this together. This was very helpful! Is it possible for you to share this plugin that you have with the community? 

I also have some follow up questions:

1. Does this method allow for JSX? If not, does that mean I would need to develop the web application outside of DSS and then compile to get the static files? 

2.  I saw that there is a python-lib folder, is this empty or does this also have some flask modules in it?

3. Does this method mean that each webapp that is made using react will need to be its own plugin? 

Also what do you think of this idea:

Does it make sense to develop the web app outside of DSS and then maybe we can develop some sort of script that takes the regular react web app repo and transforms it into a plugin like this? What are your thoughts on this? 

0 Kudos
Dataiker
Dataiker

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
R&D Engineer @ Dataiku
0 Kudos
Level 3
Author

This is really helpful @Andrey ! Thank you for your help!

0 Kudos
Level 1

Hi  @Andrey,

I am working on a similar use case and I followed all the steps mentioned by you. However, when I load the webapp, I can only see the path to the index.html as a text.

When I replace the link with the actual html from index.html file, the app is working as expected . It seems that the symlink is not working. Can you please shed some information as-to how the symlink is created here.

Thanks

Dataiker
Dataiker

Hi @Suhail ,

Did you also try the plugin from the demo repo: https://github.com/andreybavt/demo-dss-react-plugin.git ?

In order to try it, you'd need to run

npm install && npm run build

in the $DATADIR/plugins/installed/react/resource/my-app

(if you've installed the plugin in dev mode, you'd have to change "installed" to "dev" in the path)

After that, you may open a project and create a visual webapp to test it.

If it doesn't work, could you tell your DSS version?

 

Otherwise, as a workaround you could also delete the body.html symlink and add the following line to the package.json of the react app:

"postbuild": "cp build/index.html ../../webapps/react/body.html",
 
(it needs to be added to the "scripts" section)
 
Then run
 
npm run build
 
from $DATADIR/plugins/installed/react/resource/my-app

 

Regards,

Andrey

Andrey
R&D Engineer @ Dataiku
0 Kudos
Level 3
Author

Hi @Andrey , 

Just as a follow up, does your repo require a specific version of NodeJS, React and or any other dependencies? If so could you list them? 

Additionally, on a side note, does DSS have NodeJS as a dependency? I know DSS is using Angular but wasn't sure of the exact implementation. I just want to know because I don't want to screw up anything when downloading NodeJS and React on my workplace's collaboratively used DSS server. 

Thank you for your help!

Best, 

Adam

 

 

0 Kudos
Dataiker
Dataiker

Hi Adam,

The react app in a demo mainly requires just react as a dependency, an exact list can be found here:

https://github.com/andreybavt/demo-dss-react-plugin/blob/master/resource/my-app/package.json

 

However this is just a demo app, you are free to use any framework and any dependency you want for your webapp. In the end, you're just required to build it to generate static files that DSS would serve when the webapp is opened. At this stage there's no difference whether the webapp was originally developed with React or Angular, plain JS or Typescript, the webapp is just serving the built files that are simply html+js+styles+resources.

 

By default DSS doesn't rely on NodeJS. (There's only PDF export feature that will require Node, but it's not enabled by default)

I was using NodeJs v13.3.0 for testing the demo plugin, but again since there's no difference from DSS point of view you can install other versions.

 

Regards,

Andrey

Andrey
R&D Engineer @ Dataiku
Level 3
Author

Makes sense, thank you!

Level 3
Author

Hi @Andrey , 

I was curious your thoughts on this. Do you have any workarounds for developers who want to use React to build their web app but do not have terminal access to their DSS server (for instance, cannot run "npm install && npm run build" in $DATADIR/plugins/installed/react/resource/my-app)?

In this case these developers would develop the visual web app plugin locally on their computer using React. Do you know what their workaround would be or development process would look like to get this plugin up and running on their DSS instance? Or is it not possible to accomplish this without terminal access?  

Thank you for your help!

Best, 
Adam

Dataiker
Dataiker

Hi Adam,

No, for the process described above in this thread you indeed need SSH access to the server and there's no easy workaround.

As you said, you could develop an app locally, build it, and then copy the content of the "build" directory to DSS via the web UI.

Andrey
R&D Engineer @ Dataiku
Level 3
Author

Thank you for clarifying this! 

Labels (1)