This tutorial teaches how to rapidly initiate a web application using pre-configured templates. These templates streamline your workflow by auto-configuring a Node server to host your Code Studio browser path while also routing API requests to the exposed Flask backend.
These templates are also designed for smooth deployment as a standard Dataiku web application.
In this section, we will guide you through the process of creating a new web application using Cookiecutter. You have the option to choose between two templates, VueJS or Angular, for your web application project.
“Project Name”: your Angular or Vue project name. Though the example uses tutorial, you can choose any name.
“Version”: the project’s version.
“Client serve port”: port on which your frontend (e.g., Angular) will run. The default is 4200.
“Flask backend port”: port your Flask backend will operate on. The default is 5000.
“DSS Instance and DKU Project”: these fields are generally optional while operating within Dataiku Code Studio. You can safely leave them blank unless you’re configuring an external development environment that necessitates their input.
After entering these details, a new project folder will be generated in the project-lib-versioned/webapps directory.
Following these steps, you’ll successfully set up a new web application, ready for further development and deployment.
Once you’ve generated your web application using Cookiecutter, you can proceed to launch the frontend and backend. The process is the same for both Angular and Vue templates.
The Code Studio template comes pre-configured with npm, yarn, and pnpm. You can use any of these package managers to install dependencies. For instance, you can replace yarninstall with npminstall or pnpminstall based on your preference.
Run the frontend server
yarnrundev
You can now preview the web application in the Dev panel of the Code Studio.
Execute the following command to launch the backend:
python-mbackend.wsgi
By following these steps, you’ll successfully initiate both the frontend and backend of your web application within Dataiku’s Code Studio environment.
Remember that you can choose between Angular and Vue templates for your project, and the instructions for launching the frontend and backend are the same regardless of your choice.