Basic setup: Code studio template#

This section walks you through the setup process of a Code Studio template specifically designed for web application development using leading frontend frameworks. Currently, we support Vue and Angular.

In the next sections, you’ll find two methods to set up your Code Studio template. You can choose the one that suits your needs best:

Prerequisites#

Before you begin, ensure you meet the following requirements:

  • Container based image: Almalinux

  • Knowledge of Dataiku Code Studios.

  • Admin permissions to configure Code Studio templates.

  • Python 3.7+ with Cookiecutter 2.3.1+ installed.

  • For Flask backend, Python 3.6+ and the following packages:

    Flask>=0.9
    git+https://github.com/dataiku/solutions-contrib.git@main#egg=webaiku&subdirectory=bs-infra
    python-dotenv>=0.19.0
    dataiku-api-client
    

Importing the template into Dataiku#

Follow these steps to import the template:

  • Download the Code Studio template.

  • In the Application menu, under Administration, navigate to the Code Studios panel and select the Upload a Code Studio Template option.

  • Import the template you’ve just downloaded.

Import code studio template

  • If you encounter code environment related errors, you can remap cookiecutter and infra37 to code environments existing in your DSS instance.

Remap code envs

  • After importing the template, click on Build to prepare an image ready to be deployed for the Code Studio.

With these steps, your Code Studio template is ready for use. This enables you to swiftly initiate web application development in Dataiku projects, leveraging frameworks like Vue and Angular.

Manual setup#

This section explains how to create and configure a Code Studio template manually. You’ll learn how to add and modify the essential building blocks within a template.

Template creation#

To create a template:

  • Go to the Application menu.

  • Click Administration.

  • Select the Code Studio panel.

  • Click on the + Create Code Studio Template button.

  • Give a name to your new template.

  • Click on the Create button.

  • Finally, go to the Definition panel.

Managing block definitions#

  • File synchronization: This block synchronizes the file system between Code Studio and DSS. In this block, you can define some directories or files you want to exclude from synchronization. In the Excluded files section, enter the patterns: node_modules/, .angular/, pycache.

  • Kubernetes Parameters: Configure Kubernetes settings, if applicable.

  • Visual Studio Code: Add a Visual Studio Code block. Typically, no settings need to be changed here.

  • Append to Dockerfile: Insert this block and include the following Dockerfile content:

    USER root
    RUN yum -y module install nodejs:18
    
    RUN node -v
    
    RUN yum install -y npm && \
    mkdir -p /usr/local/lib/node_modules && \
    chown dataiku:dataiku -R /usr/local/lib/node_modules && \
    npm install npm -g && \
    npm install pnpm -g && \
    npm install yarn -g && \
    npm install @angular/cli -g
    
    RUN yum -y remove git && \
    yum -y remove git-\* && \
    yum -y install https://packages.endpointdev.com/rhel/8/main/x86_64/endpoint-repo.noarch.rpm && \
    yum -y install git
    
    RUN cd /opt/dataiku/code-server/lib/vscode/extensions && \
    npm init -y && \
    npm i typescript
    
  • Add an Entrypoint: Expose the HTML service to make the frontend accessible from the Code Studio UI when launching your web application client server. Use /$request_uri for the proxied subpath.

Expose Client Port

  • Add an Entrypoint Add another entry point for your Flask backend. Use /$request_uri for the proxied subpath here as well.

Expose Flask Port

  • Add Code environments: Finally, include the previously configured code environments for Cookiecutter.

  • Add Code environments: Finally, include the previously configured code environments for Flask.

  • Build the template to prepare an image that is ready to be deployed for the Code Studio.

Using the Configured Template#

Once the template is set up, using it is straightforward:

  • Navigate to </> -> Code Studios in the top navigation bar.

  • Click on + New Code Studio in the upper right and choose your configured template.

  • Start the code studio.

Create New Code Studio