Creating a Web App with React Frontend

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:

Regards,

Andrey

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

Hi @anuraa02
,

If you'd like to have a backend for your react webapp here are the steps you'd need to take:(I assume you've followed the instructions above and created a plugin, however you can follow the same steps even if you've just created a webapp without a plugin)

1) modify $DATADIR/plugins/installed/PLUGIN/webapps/WEBAPP/webapp.json to contain:

"hasBackend": "true"

2) Add $DATADIR/plugins/installed/PLUGIN/webapps/WEBAPP/backend.py, for example:

import dataiku
from flask import request

@app.route('/first_api_call')
def first_call():
    return json.dumps({"status": "ok", "data": 123})

if you need to contact DSS API, you can use the dataiku library imported in the beginning

3) Modify your react component to send AJAX requests (not the part around first_api_call)

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  function handleClick(e) {
    console.log('The link was clicked.');

    window.$.getJSON(window.getWebAppBackendUrl('first_api_call'), function(data) {
      const output = window.$('<pre />').text('Backend reply: ' + JSON.stringify(data));
      window.$('body').append(output)
    });

  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <code onClick={handleClick}>Click me!</code>
      </header>
    </div>
  );
}

export default App;

jQuery and getWebAppBackendUrl are added to your page automatically by DSS, in order to overcome the React compilation issues you'd have to refer to them from a window object.

Don't forget to restart DSS after applying all of the modifications and start the newly created backend when running the webapp.

Regards,

Hi @err0w
,

When Datiaku serves your webapp it adds some utility code on top of it, part if this code is a definition of a getWebAppBackendUrl function. So it should be available to the React application at the application runtime.

I've recorded a small tutorial on how to configure a backend for a React webapp that I previously used for demo in this thread

https://youtu.be/Q4InTCTAtRk

let me know if some parts of it are still not clear.

P.S.

If after following all of the steps in a video the /first_api_call is still failing, you may need to adjust your instance security settings:

Administration -> Settings -> Login (LDAP, SSO) & Security > Webapps -> Authentication mode -> Allow webapp authors to decide

Building a webapp locally doesn't really change a process much, just instead of running the npm commands I ran on the same server do it locally and copy the results.

Could you tell me if there's any difference (except for building locally and not on DSS server) between your case and tutorial here?
https://youtu.be/Q4InTCTAtRk

You can also try to access this function by

window.dataiku.getWebAppBackendUrl

Normally both of this ways should work.

Since this function is added by DSS at the runtime, there's no difference between building the webapp locally or on DSS server

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.