Basic setup: Deploy your web application#

This tutorial guides you through deploying a web application created within the Code Studio, transforming and deploying it as a standard Dataiku web application.

Tip

Updating an Existing Deployment

If you’ve previously deployed a web application and wish to update it, you can simply Build the webapp, Synchronize the files, and restart your web application backend.

Step 1: Building the application#

  • Open your terminal and navigate to the project folder. Replace __PROJECT_NAME__ with the actual name of your project directory:

    cd ~/workspace/project-lib-versioned/webapps/__PROJECT_NAME__
    
  • Execute the appropriate build command based on your choice of package manager:

    yarn run build
    
  • Upon successful compilation, the built files will be located in the dist folder under the directory path /workspace/project-lib-versioned/webapps/__PROJECT_NAME__/dist

Step 2: Synchronize Files with the Dataiku instance#

  • To ensure that your web application files are accessible within the Dataiku DSS environment, you’ll need to synchronize the contents of your <workspace>/project-lib-versioned folder with Dataiku.

Sync Files

Step 3: Include Webapps Folder in Project Python Path#

Incorporating the webapps folder into your project’s Python path enables the import of your custom Flask blueprints and Python modules.

  • Edit the external-libraries.json file to include webapps in the “pythonPath”:

    {
        "gitReferences": {},
        "pythonPath": [
            "python",
            "webapps"
        ],
        "rsrcPath": [
            "R"
        ],
        "importLibrariesFromProjects": []
    }
    

This makes it possible to seamlessly integrate your custom Flask functionalities and Python modules into your Dataiku project.

Step 4: Initialize a New Standard Dataiku Web Application#

  • Navigate to </> -> Webapps through the top menu bar.

  • Click on + New Webapp button at the screen’s top right corner, then choose Code Webapp > Standard.

New Webapp

  • Clear out the default code in your web application’s CSS, HTML, JS, and Python tabs.

Step 5: Configuring the Python Backend#

  • Open the Settings panel in the web application you’ve just created. Here, select the appropriate code environment for your backend development.

  • Populate the Python backend tab of your standard web application with the following code snippet. Make sure to replace {__YOUR_WEBAPPLICATION_FOLDER__} with your actual web application folder name:

    from flask import Flask
    from webaiku.extension import WEBAIKU
    from {__YOUR_WEBAPPLICATION_FOLDER__}.backend.fetch_api import fetch_api
    
    
    WEBAIKU(app, "webapps/{__YOUR_WEBAPPLICATION_FOLDER__}/dist")
    WEBAIKU.extend(app, [fetch_api])
    

Step 6: Initialize JavaScript#

  • In the JavaScript tab of your web application, paste the following code:

    const backendURL = dataiku.getWebAppBackendUrl('fetch/bs_init?URL='+getWebAppBackendUrl(''));
    window.onload = function() {
        var ifrm = document.createElement("iframe");
        ifrm.setAttribute("src", backendURL);
        ifrm.setAttribute("style", "position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;");
        document.body.appendChild(ifrm);
    }
    
    

After inserting the provided Python and JavaScript code snippets, your web application is ready for viewing.

Application deployed This concludes the JavaScript initialization step, and you should now have a fully functioning web application developed using your preferred framework and deployed within Dataiku.

Next steps#

With your web application fully deployed, the next action you may take is to publish it on a Dataiku Dashboard.

Below are the complete versions of the code snippets used throughout this tutorial for easy reference:

JS Code
const backendURL = dataiku.getWebAppBackendUrl(
  "fetch/bs_init?URL=" + getWebAppBackendUrl("")
);
window.onload = function () {
  var ifrm = document.createElement("iframe");
  ifrm.setAttribute("src", backendURL);
  ifrm.setAttribute(
    "style",
    "position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"
  );
  document.body.appendChild(ifrm);
};
Python Code
from flask import Flask
from webaiku.extension import WEBAIKU
from {__YOUR_WEBAPPLICATION_FOLDER__}.backend.fetch_api import fetch_api


WEBAIKU(app, "webapps/{__YOUR_WEBAPPLICATION_FOLDER__}/dist")
WEBAIKU.extend(app, [fetch_api])