Using Tauri with Angular

How to set up and configure Tauri with an Angular project

Adding Tauri to your Angular Project

Install Tauri in your Angular project:

npm install @tauri-apps/cli

Run the Tauri configuration tool to create basic files:

npx tauri init

Edit your Angular package.json to include the following in the "scripts" section:

"scripts": {
    "tauri-dev": "npx tauri dev"
}

Edit your src-tauri/tauri.conf.json file. The "frontendDit" path should point to the build output folder for Angular. The "beforeDevCommand" should be set to "npm run start".

"build": {
    "frontendDist": "../dist/ng-klass-rm/browser",
    "devUrl": "http://localhost:4200",
    "beforeDevCommand": "npm run start",
    "beforeBuildCommand": "npm run build"
    },

Installing a Plugin

Execute this command to install a Tauri plugin. In this example, the plugin is http:

npx tauri add http

Configuring Plugin Permissions

Add appropriate permissions by opening the src-tauri/capabilities/default.json file. Default permissions are added with the command above.

HTTP Plugin - Configuring URLs

Open the src-tauri/capabilities/default.json file. The "permissions" section should look something like this:

{
    "permissions": [
        "core:default",
        "http:default"
    ]
}

You can globally allow all URLs by replacing "http:default" with the following:

{
    "permissions": [
        "core:default",
        {
            "identifier": "http:default",
            "allow": [{ "url": "https://*" }, { "url": "http://*" }],
            "deny": []
        }
    ]
}

To allow specific URLs, you'll need to replace the "http:default" string with an object:

{
    "permissions": [
        "core:default",
        {
            "identifier": "http:default",
            "allow": [{ "url": "https://*.tauri.app" }],
            "deny": [{ "url": "https://private.tauri.app" }]
        }
    ]
}

Folders

BaseDirectory.AppData: ~/Library/Application Support/com.tauri.dev/

Reference:

  • https://blog.stackademic.com/angular-with-tauri-a-comprehensive-step-by-step-configuration-guide-9f57ff416875
  • https://tauri.app