Code editor

This guide covers setting up your code editor for developing VIKTOR apps. Below instructions assume the app resides in a folder called 'my-app-folder'.

Configure the Python interpreter

PyCharm

Virtual environment

Open the 'my-app-folder' directory. PyCharm will take this directory as the root directory from which imports are resolved. If you have not installed your app yet PyCharm will ask you to configure a virtual environment. You can click 'Cancel' as the CLI will create a virtual environment when you use the install command. If there is a 'requirements.txt' file you can run viktor-cli install to create a virtual environment and install the app's dependencies. Subsequently, open the settings to select a Python interpreter:

File > Settings > Project: {Project Name} > Python interpreter > Wheel icon > Add...

The virtual environment created by the CLI will be selected as the default existing environment. You can click 'OK', 'Apply' and 'OK' again to select the Python intepreter. Now you are ready to start development in PyCharm!

Docker

note

Using a WSL2 based interpreter in PyCharm is only available in PyCharm Professional

Open the 'my-app-folder' directory. PyCharm will take this directory as the root directory from which imports are resolved. This works fine for the app specific code, but it cannot find the VIKTOR SDK code (and of all other dependencies). To solve this, add the 'pip-cache' folder as content root:

File > Settings > Project: {Project Name} > Project Structure > Add Content Root

Directory which should be added, in which HOME has to be replaced with %USERPROFILE% (usually C:\Users\<username>) in case of Windows, or $HOME (usually /home/<username>) in case of Linux:

HOME
└── .viktor
    └── viktor-installs
        └── my-app-folder-specific
            └── pip-cache

note

Since the folder to be added is within a hidden folder ('.viktor'), it must be made visible by clicking the "Show Hidden Files and Directories" button in the "Select Content Root Directory" window.

VS Code

Virtual environment

Make sure to install the "python" extension:

View > Extensions > Search for "python" by Microsoft

Open the 'my-app-folder' directory. If a virtual environment folder is already present you are ready to start developing your app. Otherwise, install your app with viktor-cli install. When the virtual environment is created Visual Studio Code detects the virtual environment and will ask you to select it for the workspace folder, click 'Yes'. Now you are ready to start development in Visual Studio Code!

Docker

Make sure to install the "python" extension:

View > Extensions > Search for "python" by Microsoft

Within the app directory, add another directory named .vscode and add a file named settings.json

my-app-folder
└── .vscode
    └── settings.json

On Windows add the following content to settings.json (replace <USERPROFILE> with the value of the %USERPROFILE% environment variable (e.g. C:/Users/<username>) and <APPFOLDERNAME> with the name of the app folder):

{
    "python.autoComplete.extraPaths": [
        "<USERPROFILE>/.viktor/viktor-installs/<APPFOLDERNAME>-specific/pip-cache"
    ],
    "python.analysis.extraPaths": [
        "<USERPROFILE>/.viktor/viktor-installs/<APPFOLDERNAME>-specific/pip-cache"
    ],
}

On WSL2/Linux add the following content (replace <APPFOLDERNAME> with the name of the app folder):

{
    "python.autoComplete.extraPaths": [
        "${env:HOME}/.viktor/viktor-installs/<APPFOLDERNAME>-specific/pip-cache"
    ],
    "python.analysis.extraPaths": [
        "${env:HOME}/.viktor/viktor-installs/<APPFOLDERNAME>-specific/pip-cache"
    ],
}

Automatically start your app

By means of startup tasks, you are able to automatically start the application as soon as you open the project in your code editor.

note

The startup tasks assume the application is installed correctly.

PyCharm

Within the app directory, add the following files:

my-app-folder
└── .idea
    ├── runConfigurations
    │   └── VIKTOR.xml
    └── startup.xml

with the following contents:

my-app-folder/.idea/runConfigurations/VIKTOR.xml

<?xml version="1.0" encoding="UTF-8"?>
<component name="ProjectRunConfigurationManager">
  <configuration default="false" name="VIKTOR" type="ShConfigurationType">
    <option name="SCRIPT_TEXT" value="viktor-cli start" />
    <option name="INDEPENDENT_SCRIPT_PATH" value="true" />
    <option name="SCRIPT_PATH" value="" />
    <option name="SCRIPT_OPTIONS" value="" />
    <option name="INDEPENDENT_SCRIPT_WORKING_DIRECTORY" value="true" />
    <option name="SCRIPT_WORKING_DIRECTORY" value="$PROJECT_DIR$" />
    <option name="INDEPENDENT_INTERPRETER_PATH" value="true" />
    <option name="INTERPRETER_PATH" value="" />
    <option name="INTERPRETER_OPTIONS" value="" />
    <option name="EXECUTE_IN_TERMINAL" value="true" />
    <option name="EXECUTE_SCRIPT_FILE" value="false" />
    <envs />
    <method v="2" />
  </configuration>
</component>

my-app-folder/.idea/startup.xml

<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="ProjectStartupSharedConfiguration">
    <configurations>
      <configuration id="Shell Script.VIKTOR" name="VIKTOR" />
    </configurations>
  </component>
</project>

VS Code

Within the app directory, add another directory named .vscode and add a file named tasks.json:

my-app-folder
└── .vscode
    └── tasks.json

with the following content:

my-app-folder/.vscode/tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "VIKTOR",
            "type": "shell",
            "command": "viktor-cli start",
            "runOptions": {
                "runOn": "folderOpen"
            }
        }
    ]
}

Now re-open your project to check that the app starts in the terminal of the code editor.