diff --git a/CHANGELOG.md b/CHANGELOG.md
index 795f2b53ba..2b66c8b16c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 # UNRELEASED
 
+### feat: new starter templates
+
+`dfx new` now has a new set of customizable project templates and an interactive menu for selecting them. Supports the Svelte, Vue, and React frameworks, and Azle and Kybra backends.
+
+### fix: --no-frontend no longer creates a frontend
+
+Previously `dfx new --no-frontend` still created a frontend canister. This behavior is now accessed via `--frontend simple-assets`.
+
 ### feat: `dfx cycles redeem-faucet-coupon`
 
 It is now possible to redeem faucet coupons to cycles ledger accounts.
diff --git a/Cargo.lock b/Cargo.lock
index e47c0bb252..64ce796246 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1596,6 +1596,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "658bce805d770f407bc62102fca7c2c64ceef2fbcb2b8bd19d2765ce093980de"
 dependencies = [
  "console",
+ "fuzzy-matcher",
  "shell-words",
  "tempfile",
  "thiserror",
@@ -2110,6 +2111,15 @@ dependencies = [
  "slab",
 ]
 
+[[package]]
+name = "fuzzy-matcher"
+version = "0.3.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "54614a3312934d066701a80f20f15fa3b56d67ac7722b39eea5b4c9dd1d66c94"
+dependencies = [
+ "thread_local",
+]
+
 [[package]]
 name = "generic-array"
 version = "0.14.7"
diff --git a/docs/cli-reference/dfx-new.md b/docs/cli-reference/dfx-new.md
index 4e67dde235..32bde55cdf 100644
--- a/docs/cli-reference/dfx-new.md
+++ b/docs/cli-reference/dfx-new.md
@@ -4,6 +4,8 @@ Use the `dfx new` command to create a new project for the IC. This command creat
 
 You can use the `--dry-run` option to preview the directories and files to be created without adding them to the file system.
 
+If called without any arguments besides the project name, it will interactively prompt you for the values of `--type`, `--frontend`, and `--extras`.
+
 ## Basic usage
 
 ``` bash
@@ -14,11 +16,13 @@ dfx new _project_name_ [flag]
 
 You can use the following optional flags with the `dfx new` command:
 
-| Flag              | Description                                                                                                                                                                                                                                                                                                                                                                                                                         |
-|-------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `--dry-run`       | Generates a preview the directories and files to be created for a new project without adding them to the file system.                                                                                                                                                                                                                                                                                                               |
-| `--frontend`      | Installs the template frontend code for the default project canister. The default value for the flag is `true` if `node.js` is currently installed on your local computer. If `node.js` is not currently installed, you can set this flag to `true` to attempt to install `node.js` and the template file when creating the project or you can set the flag to `false` to skip the installation of template frontend code entirely. |                                                                                                                                                                                                                                                                                    |
-| `--no-frontend`      | Skips installing the frontend template code and instead creates an asset canister with a dummy `.txt` file. This is the default behavior if `node.js` is currently not installed on your computer. |
+| Flag                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `--dry-run`             | Generates a preview of the directories and files to be created for a new project without adding them to the file system.                                                                                                                                                                                                                                                                                                                                                                                  |
+| `--extras <EXTRAS>`     | Comma-separated list of additional features to add to the project template. `bitcoin` and `internet-identity` will insert the appropriate boilerplate into `dfx.json`, and `frontend-tests` adds a `vitest` skeleton to the frontend project.                                                                                                                                                                                                                                                             |
+| `--frontend <FRONTEND>` | Installs the template frontend code for the default project canister. The default value for the flag is `vanilla` if `node.js` is currently installed on your local computer. If `node.js` is not currently installed, you can set this flag to attempt to install `node.js` and the template file when creating the project or you can set the flag to `none` to skip the installation of template frontend code entirely. Possible values: `svelte`, `react`, `vue`, `vanilla`, `plain-assets`, `none`. |
+| `--no-frontend`         | Skips installing the frontend template code. This is the default behavior if `node.js` is currently not installed on your computer. Equivalent to `--frontend none`.                                                                                                                                                                                                                                                                                                                                      |
+| `--type <TYPE>`         | Selects the template backend code for the default project canister. The default value for the flag is `motoko`. Possible values: `motoko`, `rust`, `azle`, `kybra`.                                                                                                                                                                                                                                                                                                                                       |
 
 ## Arguments
 
diff --git a/docs/dfx-json-schema.json b/docs/dfx-json-schema.json
index 842511a148..5c7e28a90b 100644
--- a/docs/dfx-json-schema.json
+++ b/docs/dfx-json-schema.json
@@ -237,6 +237,14 @@
               "enum": [
                 "assets"
               ]
+            },
+            "workspace": {
+              "title": "NPM workspace",
+              "description": "The workspace in package.json that this canister is in, if it is not in the root workspace.",
+              "type": [
+                "string",
+                "null"
+              ]
             }
           }
         },
@@ -1068,4 +1076,4 @@
       ]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/e2e/assets/expect_scripts/rust_svelte_with_tests_and_ii.exp b/e2e/assets/expect_scripts/rust_svelte_with_tests_and_ii.exp
new file mode 100755
index 0000000000..5b42989ac4
--- /dev/null
+++ b/e2e/assets/expect_scripts/rust_svelte_with_tests_and_ii.exp
@@ -0,0 +1,21 @@
+#!/usr/bin/expect -df
+
+match_max 100000
+set timeout 30
+
+spawn dfx new e2e_project
+expect "Select a backend language:"
+# down arrow, Rust should be option 2
+send "\033\[B"
+send "\r"
+
+expect "Select a frontend framework:"
+# no down arrow, Svelte should be option 1
+send "\r"
+# first and third, should be II and frontend tests respectively
+expect "Add extra features"
+send " "
+send "\033\[B\033\[B"
+send " "
+send "\r"
+expect eof
diff --git a/e2e/tests-dfx/assetscanister.bash b/e2e/tests-dfx/assetscanister.bash
index bb55041959..56e6c3aca3 100644
--- a/e2e/tests-dfx/assetscanister.bash
+++ b/e2e/tests-dfx/assetscanister.bash
@@ -5,7 +5,7 @@ load ../utils/_
 setup() {
   standard_setup
 
-  dfx_new
+  dfx_new_assets
 }
 
 teardown() {
@@ -91,6 +91,7 @@ check_permission_failure() {
   PREPARE_PRINCIPAL=$(dfx identity get-principal --identity prepare)
   COMMIT_PRINCIPAL=$(dfx identity get-principal --identity commit)
 
+  rm src/e2e_project_frontend/assets/.ic-assets.json5
   install_asset assetscanister
   # Prep for a DeleteAsset operation
   echo "to-be-deleted" >src/e2e_project_frontend/assets/to-be-deleted.txt
@@ -196,6 +197,7 @@ check_permission_failure() {
   PREPARE_PRINCIPAL=$(dfx identity get-principal --identity prepare)
   COMMIT_PRINCIPAL=$(dfx identity get-principal --identity commit)
 
+  rm src/e2e_project_frontend/assets/.ic-assets.json5
   install_asset assetscanister
   dfx_start
   mkdir tmp
@@ -1626,6 +1628,7 @@ WARN: {
 }
 
 @test "asset configuration via .ic-assets.json5 - pretty printing when deploying" {
+  rm src/e2e_project_frontend/assets/.ic-assets.json5
   install_asset assetscanister
 
   dfx_start
@@ -1668,6 +1671,7 @@ WARN: {
 }
 
 @test "syncs asset properties when redeploying" {
+  rm src/e2e_project_frontend/assets/.ic-assets.json5
   install_asset assetscanister
   dfx_start
   assert_command dfx deploy
diff --git a/e2e/tests-dfx/bitcoin.bash b/e2e/tests-dfx/bitcoin.bash
index 58dbe31a2d..eeb425e985 100644
--- a/e2e/tests-dfx/bitcoin.bash
+++ b/e2e/tests-dfx/bitcoin.bash
@@ -37,7 +37,7 @@ set_local_network_bitcoin_enabled() {
 }
 
 @test "dfx restarts replica when ic-btc-adapter restarts" {
-  dfx_new hello
+  dfx_new_assets hello
   dfx_start --enable-bitcoin
 
   install_asset greet
diff --git a/e2e/tests-dfx/build_granular.bash b/e2e/tests-dfx/build_granular.bash
index d614d63d4d..1b8d971250 100644
--- a/e2e/tests-dfx/build_granular.bash
+++ b/e2e/tests-dfx/build_granular.bash
@@ -5,7 +5,7 @@ load ../utils/_
 setup() {
   standard_setup
 
-  dfx_new
+  dfx_new_assets
 }
 
 teardown() {
diff --git a/e2e/tests-dfx/canister_http.bash b/e2e/tests-dfx/canister_http.bash
index feb45c7b6b..f7eddcf1cb 100644
--- a/e2e/tests-dfx/canister_http.bash
+++ b/e2e/tests-dfx/canister_http.bash
@@ -46,7 +46,7 @@ set_shared_local_network_canister_http_empty() {
 }
 
 @test "dfx restarts replica when ic-https-outcalls-adapter restarts" {
-  dfx_new hello
+  dfx_new_assets hello
   dfx_start
 
   install_asset greet
diff --git a/e2e/tests-dfx/create.bash b/e2e/tests-dfx/create.bash
index 3bd22dcfac..2f78fe0be7 100644
--- a/e2e/tests-dfx/create.bash
+++ b/e2e/tests-dfx/create.bash
@@ -6,7 +6,7 @@ load ../utils/cycles-ledger
 setup() {
   standard_setup
 
-  dfx_new
+  dfx_new_assets
 }
 
 teardown() {
diff --git a/e2e/tests-dfx/deploy.bash b/e2e/tests-dfx/deploy.bash
index d8949591cd..8161531025 100644
--- a/e2e/tests-dfx/deploy.bash
+++ b/e2e/tests-dfx/deploy.bash
@@ -6,7 +6,7 @@ load ../utils/cycles-ledger
 setup() {
   standard_setup
 
-  dfx_new hello
+  dfx_new_assets hello
 }
 
 teardown() {
diff --git a/e2e/tests-dfx/dotenv.bash b/e2e/tests-dfx/dotenv.bash
index 2f92e07d0e..c486cc25e4 100644
--- a/e2e/tests-dfx/dotenv.bash
+++ b/e2e/tests-dfx/dotenv.bash
@@ -5,7 +5,7 @@ load ../utils/_
 setup() {
   standard_setup
 
-  dfx_new
+  dfx_new_assets
 }
 
 teardown() {
diff --git a/e2e/tests-dfx/error_diagnosis.bash b/e2e/tests-dfx/error_diagnosis.bash
index cf454be310..cf3bf1ce8d 100644
--- a/e2e/tests-dfx/error_diagnosis.bash
+++ b/e2e/tests-dfx/error_diagnosis.bash
@@ -12,20 +12,6 @@ teardown() {
   standard_teardown
 }
 
-@test "Duplicate assets in dist/ from src/" {
-  dfx_new_frontend hello
-  install_asset greet
-  dfx_start
-  assert_command dfx deploy
-
-  # simulate previous deploy with CopyPlugin step
-  cp src/hello_frontend/assets/* dist/hello_frontend/
-
-  assert_command_fail dfx deploy
-  assert_contains "Remove the CopyPlugin step from webpack.config.js"
-  assert_contains "Delete all files from the dist/ directory"
-}
-
 @test "HTTP 403 has a full diagnosis" {
   dfx_new hello
   install_asset greet
diff --git a/e2e/tests-dfx/frontend.bash b/e2e/tests-dfx/frontend.bash
index a4cf0c601d..e50a510997 100644
--- a/e2e/tests-dfx/frontend.bash
+++ b/e2e/tests-dfx/frontend.bash
@@ -65,8 +65,8 @@ teardown() {
   assert_match "Connection refused"
 }
 
-@test "dfx uses .ic-assets.json file provided in src/__project_name__frontend/src" {
-  echo '[{"match": "*", "headers": {"x-key": "x-value"}}]' > src/e2e_project_frontend/src/.ic-assets.json
+@test "dfx uses .ic-assets.json file provided in src/__project_name__frontend/assets" {
+  echo '[{"match": "*", "headers": {"x-key": "x-value"}}]' > src/e2e_project_frontend/assets/.ic-assets.json5
 
   dfx_start
   dfx canister create --all
@@ -77,14 +77,14 @@ teardown() {
   PORT=$(get_webserver_port)
   assert_command curl -vv http://localhost:"$PORT"/?canisterId="$ID"
   assert_match "< x-key: x-value"
-  assert_command curl -vv http://localhost:"$PORT"/index.js?canisterId="$ID"
+  assert_command curl -vv http://localhost:"$PORT"/favicon.ico?canisterId="$ID"
   assert_match "< x-key: x-value"
 }
 
 @test "dfx uses a custom build command if one is provided" {
-  jq '.canisters.e2e_project_frontend.source = ["dist/e2e_project_frontend/"]' dfx.json | sponge dfx.json
-  jq '.canisters.e2e_project_frontend.build = ["npm run custom-build"]' dfx.json | sponge dfx.json
-  jq '.scripts["custom-build"] = "mkdir -p ./dist/e2e_project_frontend/assets/ && cp -r ./src/e2e_project_frontend/assets/* ./dist/e2e_project_frontend"' package.json | sponge package.json
+  jq '.canisters.e2e_project_frontend.source = ["src/e2e_project_frontend/dist2"]' dfx.json | sponge dfx.json
+  jq '.canisters.e2e_project_frontend.build = ["npm run custom-build --workspace e2e_project_frontend"]' dfx.json | sponge dfx.json
+  jq '.scripts["custom-build"] = "npm run build && mkdir -p ./dist2/ && cp -r ./dist/* ./dist2"' src/e2e_project_frontend/package.json | sponge src/e2e_project_frontend/package.json
 
   dfx_start
   dfx canister create --all
@@ -94,6 +94,6 @@ teardown() {
   ID=$(dfx canister id e2e_project_frontend)
   PORT=$(get_webserver_port)
 
-  assert_command curl -vv http://localhost:"$PORT"/sample-asset.txt?canisterId="$ID"
-  assert_match "This is a sample asset!"
+  assert_command curl -vv http://localhost:"$PORT"/index.html?canisterId="$ID"
+  assert_match "IC Hello Starter"
 }
diff --git a/e2e/tests-dfx/identity.bash b/e2e/tests-dfx/identity.bash
index 3867be21b7..2c9c578cfb 100644
--- a/e2e/tests-dfx/identity.bash
+++ b/e2e/tests-dfx/identity.bash
@@ -5,7 +5,7 @@ load ../utils/_
 setup() {
   standard_setup
 
-  dfx_new
+  dfx_new_assets
 }
 
 teardown() {
diff --git a/e2e/tests-dfx/install.bash b/e2e/tests-dfx/install.bash
index e092ad963d..c62382b4de 100644
--- a/e2e/tests-dfx/install.bash
+++ b/e2e/tests-dfx/install.bash
@@ -5,7 +5,7 @@ load ../utils/_
 setup() {
   standard_setup
 
-  dfx_new
+  dfx_new_assets
 }
 
 teardown() {
diff --git a/e2e/tests-dfx/metadata.bash b/e2e/tests-dfx/metadata.bash
index 8fee87cdf2..5e1c34c962 100644
--- a/e2e/tests-dfx/metadata.bash
+++ b/e2e/tests-dfx/metadata.bash
@@ -186,7 +186,7 @@ teardown() {
 }
 
 @test "asset canister provides candid:service metadata" {
-  dfx_new hello
+  dfx_new_assets hello
   dfx_start
 
   assert_command dfx deploy
diff --git a/e2e/tests-dfx/mode_reinstall.bash b/e2e/tests-dfx/mode_reinstall.bash
index a21e4bdd5d..065c109f2f 100644
--- a/e2e/tests-dfx/mode_reinstall.bash
+++ b/e2e/tests-dfx/mode_reinstall.bash
@@ -5,7 +5,7 @@ load ../utils/_
 setup() {
   standard_setup
 
-  dfx_new hello
+  dfx_new_assets hello
 }
 
 teardown() {
diff --git a/e2e/tests-dfx/new.bash b/e2e/tests-dfx/new.bash
index 6559b2d5b6..73e94099a5 100644
--- a/e2e/tests-dfx/new.bash
+++ b/e2e/tests-dfx/new.bash
@@ -7,6 +7,7 @@ setup() {
 }
 
 teardown() {
+  dfx_stop
   standard_teardown
 }
 
@@ -51,9 +52,34 @@ teardown() {
   assert_eq "motoko"
 }
 
-@test "dfx new always emits sample-asset.txt" {
-  assert_command dfx new e2e_frontend --frontend
-  assert_file_exists e2e_frontend/src/e2e_frontend_frontend/assets/sample-asset.txt
-  assert_command dfx new e2e_no_frontend --no-frontend
-  assert_file_exists e2e_no_frontend/src/e2e_no_frontend_frontend/assets/sample-asset.txt
+@test "frontend templates apply successfully" {
+  for frontend in sveltekit vue react vanilla simple-assets none; do
+    assert_command dfx new e2e_${frontend/-/_} --frontend $frontend
+  done
+  assert_file_not_exists e2e_none/src/e2e_none_frontend
+}
+
+@test "frontend templates pass the frontend tests" {
+  dfx_start
+  for frontend in sveltekit vue react vanilla; do
+    assert_command dfx new e2e_$frontend --frontend $frontend --extras frontend-tests
+    pushd e2e_$frontend
+    assert_command dfx deploy
+    assert_command npm test --workspaces
+    popd
+  done
+}
+
+@test "backend templates" {
+  for backend in motoko rust kybra azle; do
+    assert_command dfx new e2e_$backend --type $backend --no-frontend
+  done
+}
+
+@test "interactive template selection" {
+  assert_command "${BATS_TEST_DIRNAME}/../assets/expect_scripts/rust_svelte_with_tests_and_ii.exp"
+  assert_file_exists e2e_project/Cargo.toml
+  assert_file_exists e2e_project/src/e2e_project_frontend/src/routes/+page.svelte
+  assert_file_exists e2e_project/src/e2e_project_frontend/src/setupTests.js
+  assert_command jq .canisters.internet_identity e2e_project/dfx.json
 }
diff --git a/e2e/tests-dfx/playground.bash b/e2e/tests-dfx/playground.bash
index c90316adb9..486b8b0761 100644
--- a/e2e/tests-dfx/playground.bash
+++ b/e2e/tests-dfx/playground.bash
@@ -5,7 +5,7 @@ load ../utils/_
 setup() {
   standard_setup
   setup_playground
-  dfx_new hello
+  dfx_new_assets hello
 }
 
 teardown() {
diff --git a/e2e/tests-dfx/start.bash b/e2e/tests-dfx/start.bash
index 276f430ee7..f1441bf43a 100644
--- a/e2e/tests-dfx/start.bash
+++ b/e2e/tests-dfx/start.bash
@@ -130,7 +130,7 @@ teardown() {
 }
 
 @test "dfx restarts icx-proxy" {
-  dfx_new hello
+  dfx_new_assets hello
   dfx_start
 
   install_asset greet
@@ -155,7 +155,7 @@ teardown() {
 }
 
 @test "dfx restarts icx-proxy when the replica restarts" {
-  dfx_new hello
+  dfx_new_assets hello
   dfx_start
 
   install_asset greet
diff --git a/e2e/tests-dfx/usage_env.bash b/e2e/tests-dfx/usage_env.bash
index 7cd19f6af5..31ac9aab76 100644
--- a/e2e/tests-dfx/usage_env.bash
+++ b/e2e/tests-dfx/usage_env.bash
@@ -24,7 +24,7 @@ teardown() {
   #cache
   # create a new project to install dfx cache
   assert_command_fail ls "$DFX_CACHE_ROOT/.cache/dfinity/versions"
-  dfx new hello
+  dfx new hello --no-frontend
   assert_command ls "$DFX_CACHE_ROOT/.cache/dfinity/versions"
   assert_command_fail ls "$HOME/.cache/dfinity/versions"
   rm -rf hello
@@ -42,7 +42,7 @@ teardown() {
     #cache
     # create a new project to install dfx cache
     assert_command_fail ls "$HOME/.cache/dfinity/versions"
-    dfx new hello
+    dfx new hello --no-frontend
     assert_command ls "$HOME/.cache/dfinity/versions"
     rm -rf hello
   )
diff --git a/e2e/tests-dfx/wallet.bash b/e2e/tests-dfx/wallet.bash
index 34b5ca885a..33a8417bc7 100644
--- a/e2e/tests-dfx/wallet.bash
+++ b/e2e/tests-dfx/wallet.bash
@@ -79,7 +79,7 @@ teardown() {
 }
 
 @test "'dfx identity set-wallet --force' bypasses wallet canister verification" {
-  dfx_new hello
+  dfx_new_assets hello
   dfx_start
   setup_actuallylocal_shared_network
 
@@ -102,7 +102,7 @@ teardown() {
 }
 
 @test "deploy wallet" {
-  dfx_new hello
+  dfx_new_assets hello
   dfx_start
   setup_actuallylocal_shared_network
 
diff --git a/e2e/tests-icx-asset/icx-asset.bash b/e2e/tests-icx-asset/icx-asset.bash
index 786887aea2..f06b1d20b6 100644
--- a/e2e/tests-icx-asset/icx-asset.bash
+++ b/e2e/tests-icx-asset/icx-asset.bash
@@ -11,7 +11,7 @@ setup() {
 
   standard_setup
 
-  dfx_new_frontend
+  dfx_new_assets
   dfx_start
 
   assert_command dfx deploy
diff --git a/e2e/tests-replica/deploy.bash b/e2e/tests-replica/deploy.bash
index 8ba88f5cf8..b69ac6608e 100644
--- a/e2e/tests-replica/deploy.bash
+++ b/e2e/tests-replica/deploy.bash
@@ -23,7 +23,7 @@ teardown() {
 }
 
 @test "deploy a canister without dependencies" {
-  dfx_new hello
+  dfx_new_assets hello
   dfx_start
   install_asset greet
   assert_command dfx deploy hello_backend
@@ -32,7 +32,7 @@ teardown() {
 }
 
 @test "deploy a canister with dependencies" {
-  dfx_new hello
+  dfx_new_assets hello
   dfx_start
   install_asset greet
   assert_command dfx deploy hello_frontend
diff --git a/e2e/utils/_.bash b/e2e/utils/_.bash
index 3b340a73ed..592e6aa298 100644
--- a/e2e/utils/_.bash
+++ b/e2e/utils/_.bash
@@ -54,7 +54,17 @@ standard_teardown() {
 
 dfx_new_frontend() {
     local project_name=${1:-e2e_project}
-    dfx new "${project_name}" --frontend
+    dfx new "${project_name}" --frontend vanilla
+    test -d "${project_name}"
+    test -f "${project_name}"/dfx.json
+    cd "${project_name}"
+
+    echo PWD: "$(pwd)" >&2
+}
+
+dfx_new_assets() {
+    local project_name=${1:-e2e_project}
+    dfx new "${project_name}" --frontend simple-assets
     test -d "${project_name}"
     test -f "${project_name}"/dfx.json
     cd "${project_name}"
diff --git a/scripts/workflows/provision-linux.sh b/scripts/workflows/provision-linux.sh
index f00de0f386..fffe7d69d9 100755
--- a/scripts/workflows/provision-linux.sh
+++ b/scripts/workflows/provision-linux.sh
@@ -32,7 +32,12 @@ if [ "$E2E_TEST" = "tests-dfx/certificate.bash" ]; then
     sudo tar --directory /usr/local/bin --extract --file mitmproxy.tar.gz
     echo "mitmproxy version: $(mitmproxy --version)"
 fi
-if [ "$E2E_TEST" = "tests-dfx/identity_encryption.bash" ] || [ "$E2E_TEST" = "tests-dfx/identity.bash" ] || [ "$E2E_TEST" = "tests-dfx/generate.bash" ] || [ "$E2E_TEST" = "tests-dfx/start.bash" ]; then
+if [ "$E2E_TEST" = "tests-dfx/identity_encryption.bash" ] \
+    || [ "$E2E_TEST" = "tests-dfx/identity.bash" ] \
+    || [ "$E2E_TEST" = "tests-dfx/generate.bash" ] \
+    || [ "$E2E_TEST" = "tests-dfx/start.bash" ] \
+    || [ "$E2E_TEST" = "tests-dfx/new.bash" ]
+then
     sudo apt-get install --yes expect
 fi
 if [ "$E2E_TEST" = "tests-dfx/deps.bash" ]; then
diff --git a/src/dfx-core/src/config/model/dfinity.rs b/src/dfx-core/src/config/model/dfinity.rs
index d2fb8e9d0e..5eeb32b307 100644
--- a/src/dfx-core/src/config/model/dfinity.rs
+++ b/src/dfx-core/src/config/model/dfinity.rs
@@ -309,6 +309,10 @@ pub enum CanisterTypeProperties {
         /// Optional if there is no build necessary or the assets can be built using the default `npm run build` command.
         #[schemars(default)]
         build: SerdeVec<String>,
+
+        /// # NPM workspace
+        /// The workspace in package.json that this canister is in, if it is not in the root workspace.
+        workspace: Option<String>,
     },
     /// # Custom-Specific Properties
     Custom {
@@ -1118,6 +1122,7 @@ impl<'de> Visitor<'de> for PropertiesVisitor {
         let mut build = None;
         let mut r#type = None;
         let mut id = None;
+        let mut workspace = None;
         while let Some(key) = map.next_key::<String>()? {
             match &*key {
                 "package" => package = Some(map.next_value()?),
@@ -1127,6 +1132,7 @@ impl<'de> Visitor<'de> for PropertiesVisitor {
                 "wasm" => wasm = Some(map.next_value()?),
                 "type" => r#type = Some(map.next_value::<String>()?),
                 "id" => id = Some(map.next_value()?),
+                "workspace" => workspace = Some(map.next_value()?),
                 _ => continue,
             }
         }
@@ -1139,6 +1145,7 @@ impl<'de> Visitor<'de> for PropertiesVisitor {
             Some("assets") => CanisterTypeProperties::Assets {
                 source: source.ok_or_else(|| missing_field("source"))?,
                 build: build.unwrap_or_default(),
+                workspace,
             },
             Some("custom") => CanisterTypeProperties::Custom {
                 build: build.unwrap_or_default(),
diff --git a/src/dfx/Cargo.toml b/src/dfx/Cargo.toml
index 661540d7b5..752ca77d06 100644
--- a/src/dfx/Cargo.toml
+++ b/src/dfx/Cargo.toml
@@ -51,7 +51,7 @@ crc32fast = "1.3.2"
 crossbeam = "0.8.1"
 ctrlc = { version = "3.2.1", features = ["termination"] }
 dfx-core = { path = "../dfx-core" }
-dialoguer.workspace = true
+dialoguer = { workspace = true, features = ["fuzzy-select"] }
 directories-next.workspace = true
 flate2 = { workspace = true, default-features = false, features = ["zlib-ng"] }
 fn-error-context = "0.2.0"
diff --git a/src/dfx/assets/build.rs b/src/dfx/assets/build.rs
index f787ee3517..d664aa2baa 100644
--- a/src/dfx/assets/build.rs
+++ b/src/dfx/assets/build.rs
@@ -129,10 +129,7 @@ fn add_asset_archive(fn_name: &str, f: &mut File, assets_path: &Path) {
 }
 
 fn add_assets_from_directory(fn_name: &str, f: &mut File, path: &str) {
-    for file in WalkDir::new(path)
-        .into_iter()
-        .filter_map(|x| x.ok().filter(|entry| entry.file_type().is_file()))
-    {
+    for file in WalkDir::new(path).into_iter().filter_map(|x| x.ok()) {
         println!("cargo:rerun-if-changed={}", file.path().display())
     }
     let out_dir = env::var("OUT_DIR").unwrap();
@@ -242,27 +239,87 @@ fn add_assets(sources: Sources) {
     add_assets_from_directory(
         "new_project_motoko_files",
         &mut f,
-        "assets/new_project_motoko_files",
+        "assets/project_templates/motoko",
     );
     add_assets_from_directory(
-        "new_project_node_files",
+        "new_project_rust_files",
         &mut f,
-        "assets/new_project_node_files",
+        "assets/project_templates/rust",
     );
     add_assets_from_directory(
-        "new_project_rust_files",
+        "new_project_base_files",
         &mut f,
-        "assets/new_project_rust_files",
+        "assets/project_templates/base",
     );
     add_assets_from_directory(
-        "new_project_no_frontend_files",
+        "new_project_js_files",
         &mut f,
-        "assets/new_project_no_frontend_files",
+        "assets/project_templates/any_js",
     );
     add_assets_from_directory(
-        "new_project_base_files",
+        "new_project_kybra_files",
+        &mut f,
+        "assets/project_templates/kybra",
+    );
+    add_assets_from_directory(
+        "new_project_azle_files",
+        &mut f,
+        "assets/project_templates/azle",
+    );
+    add_assets_from_directory(
+        "new_project_vanillajs_files",
+        &mut f,
+        "assets/project_templates/vanilla_js",
+    );
+    add_assets_from_directory(
+        "new_project_vanillajs_test_files",
+        &mut f,
+        "assets/project_templates/vanilla_js_tests",
+    );
+    add_assets_from_directory(
+        "new_project_react_files",
+        &mut f,
+        "assets/project_templates/react",
+    );
+    add_assets_from_directory(
+        "new_project_react_test_files",
+        &mut f,
+        "assets/project_templates/react_tests",
+    );
+    add_assets_from_directory(
+        "new_project_svelte_files",
+        &mut f,
+        "assets/project_templates/svelte",
+    );
+    add_assets_from_directory(
+        "new_project_svelte_test_files",
+        &mut f,
+        "assets/project_templates/svelte_tests",
+    );
+    add_assets_from_directory(
+        "new_project_vue_files",
+        &mut f,
+        "assets/project_templates/vue",
+    );
+    add_assets_from_directory(
+        "new_project_vue_test_files",
+        &mut f,
+        "assets/project_templates/vue_tests",
+    );
+    add_assets_from_directory(
+        "new_project_assets_files",
+        &mut f,
+        "assets/project_templates/simple_assets",
+    );
+    add_assets_from_directory(
+        "new_project_internet_identity_files",
+        &mut f,
+        "assets/project_templates/internet_identity",
+    );
+    add_assets_from_directory(
+        "new_project_bitcoin_files",
         &mut f,
-        "assets/new_project_base_files",
+        "assets/project_templates/bitcoin",
     );
 }
 
diff --git a/src/dfx/assets/new_project_node_files/package.json b/src/dfx/assets/new_project_node_files/package.json
deleted file mode 100644
index 7901e4d41b..0000000000
--- a/src/dfx/assets/new_project_node_files/package.json
+++ /dev/null
@@ -1,49 +0,0 @@
-{
-  "name": "{project_name}_frontend",
-  "version": "0.2.0",
-  "description": "Internet Computer starter application",
-  "keywords": [
-    "Internet Computer",
-    "Motoko",
-    "JavaScript",
-    "Canister"
-  ],
-  "scripts": {
-    "build": "webpack",
-    "prebuild": "dfx generate",
-    "start": "webpack serve --mode development --env development",
-    "deploy:local": "dfx deploy --network=local",
-    "deploy:ic": "dfx deploy --network=ic",
-    "generate": "dfx generate {project_name}_backend"
-  },
-  "dependencies": {
-    "@dfinity/agent": "^{js_agent_version}",
-    "@dfinity/candid": "^{js_agent_version}",
-    "@dfinity/principal": "^{js_agent_version}"
-  },
-  "devDependencies": {
-    "assert": "2.0.0",
-    "buffer": "6.0.3",
-    "copy-webpack-plugin": "^11.0.0",
-    "dotenv": "^16.0.3",
-    "events": "3.3.0",
-    "html-webpack-plugin": "5.5.0",
-    "process": "0.11.10",
-    "stream-browserify": "3.0.0",
-    "terser-webpack-plugin": "^5.3.3",
-    "util": "0.12.4",
-    "webpack": "^5.73.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.8.1"
-  },
-  "engines": {
-    "node": "^12 || ^14 || ^16 || >=17",
-    "npm": "^7.17 || >=8"
-  },
-  "browserslist": [
-    "last 2 chrome version",
-    "last 2 firefox version",
-    "last 2 safari version",
-    "last 2 edge version"
-  ]
-}
diff --git a/src/dfx/assets/new_project_node_files/src/__project_name___frontend/assets/main.css b/src/dfx/assets/new_project_node_files/src/__project_name___frontend/assets/main.css
deleted file mode 100644
index ccf2e6cf0f..0000000000
--- a/src/dfx/assets/new_project_node_files/src/__project_name___frontend/assets/main.css
+++ /dev/null
@@ -1,37 +0,0 @@
-body {
-    font-family: sans-serif;
-    font-size: 1.5rem;
-}
-
-img {
-    max-width: 50vw;
-    max-height: 25vw;
-    display: block;
-    margin: auto;
-}
-
-form {
-    display: flex;
-    justify-content: center;
-    gap: 0.5em;
-    flex-flow: row wrap;
-    max-width: 40vw;
-    margin: auto;
-    align-items: baseline;
-}
-
-button[type="submit"] {
-    padding: 5px 20px;
-    margin: 10px auto;
-    float: right;
-}
-
-#greeting {
-    margin: 10px auto;
-    padding: 10px 60px;
-    border: 1px solid #222;
-}
-
-#greeting:empty {
-    display: none;
-}
diff --git a/src/dfx/assets/new_project_node_files/src/__project_name___frontend/assets/sample-asset.txt b/src/dfx/assets/new_project_node_files/src/__project_name___frontend/assets/sample-asset.txt
deleted file mode 100644
index 7c011d0f9c..0000000000
--- a/src/dfx/assets/new_project_node_files/src/__project_name___frontend/assets/sample-asset.txt
+++ /dev/null
@@ -1 +0,0 @@
-This is a sample asset!
diff --git a/src/dfx/assets/new_project_node_files/src/__project_name___frontend/src/index.html b/src/dfx/assets/new_project_node_files/src/__project_name___frontend/src/index.html
deleted file mode 100644
index 1ae832c8b1..0000000000
--- a/src/dfx/assets/new_project_node_files/src/__project_name___frontend/src/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>{project_name}</title>
-    <base href="/" />
-    <link rel="icon" href="favicon.ico" />
-    <link type="text/css" rel="stylesheet" href="main.css" />
-  </head>
-  <body>
-    <main>
-      <img src="logo2.svg" alt="DFINITY logo" />
-      <br />
-      <br />
-      <form action="#">
-        <label for="name">Enter your name: &nbsp;</label>
-        <input id="name" alt="Name" type="text" />
-        <button type="submit">Click Me!</button>
-      </form>
-      <section id="greeting"></section>
-    </main>
-  </body>
-</html>
diff --git a/src/dfx/assets/new_project_node_files/src/__project_name___frontend/src/index.js b/src/dfx/assets/new_project_node_files/src/__project_name___frontend/src/index.js
deleted file mode 100644
index 118fa09f7a..0000000000
--- a/src/dfx/assets/new_project_node_files/src/__project_name___frontend/src/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { {project_name}_backend } from "../../declarations/{project_name}_backend";
-
-document.querySelector("form").addEventListener("submit", async (e) => {
-  e.preventDefault();
-  const button = e.target.querySelector("button");
-
-  const name = document.getElementById("name").value.toString();
-
-  button.setAttribute("disabled", true);
-
-  // Interact with foo actor, calling the greet method
-  const greeting = await {project_name}_backend.greet(name);
-
-  button.removeAttribute("disabled");
-
-  document.getElementById("greeting").innerText = greeting;
-
-  return false;
-});
diff --git a/src/dfx/assets/new_project_node_files/webpack.config.js b/src/dfx/assets/new_project_node_files/webpack.config.js
deleted file mode 100644
index 5cff845f07..0000000000
--- a/src/dfx/assets/new_project_node_files/webpack.config.js
+++ /dev/null
@@ -1,96 +0,0 @@
-require("dotenv").config();
-const path = require("path");
-const webpack = require("webpack");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const TerserPlugin = require("terser-webpack-plugin");
-const CopyPlugin = require("copy-webpack-plugin");
-
-const isDevelopment = process.env.NODE_ENV !== "production";
-
-const frontendDirectory = "{project_name}_frontend";
-
-const frontend_entry = path.join("src", frontendDirectory, "src", "index.html");
-
-module.exports = {
-  target: "web",
-  mode: isDevelopment ? "development" : "production",
-  entry: {
-    // The frontend.entrypoint points to the HTML file for this build, so we need
-    // to replace the extension to `.js`.
-    index: path.join(__dirname, frontend_entry).replace(/\.html$/, ".js"),
-  },
-  devtool: isDevelopment ? "source-map" : false,
-  optimization: {
-    minimize: !isDevelopment,
-    minimizer: [new TerserPlugin()],
-  },
-  resolve: {
-    extensions: [".js", ".ts", ".jsx", ".tsx"],
-    fallback: {
-      assert: require.resolve("assert/"),
-      buffer: require.resolve("buffer/"),
-      events: require.resolve("events/"),
-      stream: require.resolve("stream-browserify/"),
-      util: require.resolve("util/"),
-    },
-  },
-  output: {
-    filename: "index.js",
-    path: path.join(__dirname, "dist", frontendDirectory),
-  },
-
-  // Depending in the language or framework you are using for
-  // front-end development, add module loaders to the default
-  // webpack configuration. For example, if you are using React
-  // modules and CSS as described in the "Adding a stylesheet"
-  // tutorial, uncomment the following lines:
-  // module: {
-  //  rules: [
-  //    { test: /\.(ts|tsx|jsx)$/, loader: "ts-loader" },
-  //    { test: /\.css$/, use: ['style-loader','css-loader'] }
-  //  ]
-  // },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: path.join(__dirname, frontend_entry),
-      cache: false,
-    }),
-    new webpack.EnvironmentPlugin([
-      ...Object.keys(process.env).filter((key) => {
-        if (key.includes("CANISTER")) return true;
-        if (key.includes("DFX")) return true;
-        return false;
-      }),
-    ]),
-    new webpack.ProvidePlugin({
-      Buffer: [require.resolve("buffer/"), "Buffer"],
-      process: require.resolve("process/browser"),
-    }),
-    new CopyPlugin({
-      patterns: [
-        {
-          from: `src/${frontendDirectory}/src/.ic-assets.json*`,
-          to: ".ic-assets.json5",
-          noErrorOnMissing: true,
-        },
-      ],
-    }),
-  ],
-  // proxy /api to port 4943 during development.
-  // if you edit dfx.json to define a project-specific local network, change the port to match.
-  devServer: {
-    proxy: {
-      "/api": {
-        target: "http://127.0.0.1:4943",
-        changeOrigin: true,
-        pathRewrite: {
-          "^/api": "/api",
-        },
-      },
-    },
-    static: path.resolve(__dirname, "src", frontendDirectory, "assets"),
-    hot: true,
-    watchFiles: [path.resolve(__dirname, "src", frontendDirectory)],
-    liveReload: true,
-  },
-};
diff --git a/src/dfx/assets/new_project_rust_files/Cargo.toml b/src/dfx/assets/new_project_rust_files/Cargo.toml
deleted file mode 100644
index d0616ce222..0000000000
--- a/src/dfx/assets/new_project_rust_files/Cargo.toml
+++ /dev/null
@@ -1,4 +0,0 @@
-[workspace]
-members = [
-    "src/{project_name}_backend",
-]
diff --git a/src/dfx/assets/project_templates/any_js/package.json b/src/dfx/assets/project_templates/any_js/package.json
new file mode 100644
index 0000000000..ec3206c127
--- /dev/null
+++ b/src/dfx/assets/project_templates/any_js/package.json
@@ -0,0 +1,16 @@
+{
+    "name": "{project_name}",
+    "type": "module",
+    "scripts": {
+        "start": "npm start --workspaces --if-present",
+        "prebuild": "npm run prebuild --workspaces --if-present",
+        "build": "npm run build --workspaces --if-present",
+        "pretest": "npm run prebuild --workspaces --if-present",
+        "test": "npm test --workspaces --if-present"
+    },
+    "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=7.0.0"
+    },
+    "workspaces": [ ]
+}
diff --git a/src/dfx/assets/project_templates/any_js/tsconfig.json b/src/dfx/assets/project_templates/any_js/tsconfig.json
new file mode 100644
index 0000000000..f4629166d9
--- /dev/null
+++ b/src/dfx/assets/project_templates/any_js/tsconfig.json
@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "strict": true,
+        "target": "ES2020",
+        "experimentalDecorators": true,
+        "strictPropertyInitialization": false,
+        "moduleResolution": "node",
+        "allowJs": true,
+        "outDir": "HACK_BECAUSE_OF_ALLOW_JS"
+    }
+}
diff --git a/src/dfx/assets/project_templates/azle/dfx.json-patch b/src/dfx/assets/project_templates/azle/dfx.json-patch
new file mode 100644
index 0000000000..4ada1db29e
--- /dev/null
+++ b/src/dfx/assets/project_templates/azle/dfx.json-patch
@@ -0,0 +1,14 @@
+[
+    {
+        "path": "/canisters/{project_name}_backend",
+        "op": "add",
+        "value": {
+            "type": "custom",
+            "main": "src/{project_name}_backend/src/index.ts",
+            "candid": "src/{project_name}_backend/{project_name}_backend.did",
+            "build": "npx azle {project_name}_backend",
+            "wasm": ".azle/{project_name}_backend/{project_name}_backend.wasm",
+            "gzip": true
+        }
+    }
+]
diff --git a/src/dfx/assets/project_templates/azle/package.json-patch b/src/dfx/assets/project_templates/azle/package.json-patch
new file mode 100644
index 0000000000..81e3754421
--- /dev/null
+++ b/src/dfx/assets/project_templates/azle/package.json-patch
@@ -0,0 +1,7 @@
+[
+    {
+        "op": "add",
+        "path": "/workspaces/-",
+        "value": "src/{project_name}_backend"
+    }
+]
\ No newline at end of file
diff --git a/src/dfx/assets/project_templates/azle/src/__project_name___backend/__project_name___backend.did b/src/dfx/assets/project_templates/azle/src/__project_name___backend/__project_name___backend.did
new file mode 100644
index 0000000000..b971bf69eb
--- /dev/null
+++ b/src/dfx/assets/project_templates/azle/src/__project_name___backend/__project_name___backend.did
@@ -0,0 +1,3 @@
+service : {
+    "greet" : (text) -> (text) query;
+}
diff --git a/src/dfx/assets/project_templates/azle/src/__project_name___backend/package.json b/src/dfx/assets/project_templates/azle/src/__project_name___backend/package.json
new file mode 100644
index 0000000000..6a90d825da
--- /dev/null
+++ b/src/dfx/assets/project_templates/azle/src/__project_name___backend/package.json
@@ -0,0 +1,9 @@
+{
+    "name": "{project_name}_backend",
+    "version": "0.0.0",
+    "private": true,
+    "type": "module",
+    "dependencies": {
+        "azle": "^0.19.0"
+    }
+}
\ No newline at end of file
diff --git a/src/dfx/assets/project_templates/azle/src/__project_name___backend/src/index.ts b/src/dfx/assets/project_templates/azle/src/__project_name___backend/src/index.ts
new file mode 100644
index 0000000000..87c3d05729
--- /dev/null
+++ b/src/dfx/assets/project_templates/azle/src/__project_name___backend/src/index.ts
@@ -0,0 +1,7 @@
+import { Canister, query, text } from 'azle';
+
+export default Canister({
+    greet: query([text], text, (name) => {
+        return `Hello, ${name}!`;
+    })
+})
diff --git a/src/dfx/assets/new_project_base_files/README.md b/src/dfx/assets/project_templates/base/README.md
similarity index 100%
rename from src/dfx/assets/new_project_base_files/README.md
rename to src/dfx/assets/project_templates/base/README.md
diff --git a/src/dfx/assets/new_project_base_files/__dot__gitignore b/src/dfx/assets/project_templates/base/__dot__gitignore
similarity index 88%
rename from src/dfx/assets/new_project_base_files/__dot__gitignore
rename to src/dfx/assets/project_templates/base/__dot__gitignore
index 938bc33a56..49c89a1c95 100644
--- a/src/dfx/assets/new_project_base_files/__dot__gitignore
+++ b/src/dfx/assets/project_templates/base/__dot__gitignore
@@ -11,7 +11,7 @@
 .dfx/
 
 # generated files
-src/declarations/
+**/declarations/
 
 # rust
 target/
@@ -19,6 +19,7 @@ target/
 # frontend code
 node_modules/
 dist/
+.svelte-kit/
 
 # environment variables
 .env
diff --git a/src/dfx/assets/new_project_base_files/dfx.json b/src/dfx/assets/project_templates/base/dfx.json
similarity index 100%
rename from src/dfx/assets/new_project_base_files/dfx.json
rename to src/dfx/assets/project_templates/base/dfx.json
diff --git a/src/dfx/assets/project_templates/bitcoin/dfx.json-patch b/src/dfx/assets/project_templates/bitcoin/dfx.json-patch
new file mode 100644
index 0000000000..b100e8bec9
--- /dev/null
+++ b/src/dfx/assets/project_templates/bitcoin/dfx.json-patch
@@ -0,0 +1,13 @@
+[
+    {
+        "op": "add",
+        "path": "/defaults/bitcoin",
+        "value": {
+            "enabled": true,
+            "nodes": [
+                "127.0.0.1:18444"
+            ],
+            "log_level": "info"
+        }
+    }
+]
diff --git a/src/dfx/assets/project_templates/internet_identity/dfx.json-patch b/src/dfx/assets/project_templates/internet_identity/dfx.json-patch
new file mode 100644
index 0000000000..055084c18a
--- /dev/null
+++ b/src/dfx/assets/project_templates/internet_identity/dfx.json-patch
@@ -0,0 +1,17 @@
+[
+    {
+        "op": "add",
+        "path": "/canisters/internet_identity",
+        "value": {
+            "type": "custom",
+            "candid": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity.did",
+            "wasm": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity_dev.wasm.gz",
+            "remote": {
+                "id": {
+                    "ic": "rdmx6-jaaaa-aaaaa-aaadq-cai"
+                }
+            },
+            "frontend": { }
+        }
+    }
+]
diff --git a/src/dfx/assets/project_templates/kybra/dfx.json-patch b/src/dfx/assets/project_templates/kybra/dfx.json-patch
new file mode 100644
index 0000000000..1357f5e17a
--- /dev/null
+++ b/src/dfx/assets/project_templates/kybra/dfx.json-patch
@@ -0,0 +1,14 @@
+[
+    {
+        "path": "/canisters/{project_name}_backend",
+        "op": "add",
+        "value": {
+            "type": "custom",
+            "build": "python -m kybra {project_name}_backend src/{project_name}_backend/src/main.py src/{project_name}_backend/{project_name}_backend.did",
+            "post_install": ".kybra/{project_name}_backend/post_install.sh",
+            "candid": "src/{project_name}_backend/{project_name}_backend.did",
+            "wasm": ".kybra/{project_name}_backend/{project_name}_backend.wasm",
+            "gzip": true
+        }
+    }
+]
\ No newline at end of file
diff --git a/src/dfx/assets/project_templates/kybra/requirements.in b/src/dfx/assets/project_templates/kybra/requirements.in
new file mode 100644
index 0000000000..318fcdddd4
--- /dev/null
+++ b/src/dfx/assets/project_templates/kybra/requirements.in
@@ -0,0 +1 @@
+kybra~=0.5.0
diff --git a/src/dfx/assets/project_templates/kybra/requirements.txt b/src/dfx/assets/project_templates/kybra/requirements.txt
new file mode 100644
index 0000000000..a696bbab6e
--- /dev/null
+++ b/src/dfx/assets/project_templates/kybra/requirements.txt
@@ -0,0 +1,15 @@
+#
+# This file is autogenerated by pip-compile with Python 3.11
+# by the following command:
+#
+#    pip-compile requirements.in
+#
+altgraph==0.17.4
+    # via modulegraph
+kybra==0.5.2
+    # via -r requirements.in
+modulegraph==0.19.3
+    # via kybra
+
+# The following packages are considered to be unsafe in a requirements file:
+# setuptools
diff --git a/src/dfx/assets/new_project_rust_files/src/__project_name___backend/__project_name___backend.did b/src/dfx/assets/project_templates/kybra/src/__project_name___backend/__project_name___backend.did
similarity index 100%
rename from src/dfx/assets/new_project_rust_files/src/__project_name___backend/__project_name___backend.did
rename to src/dfx/assets/project_templates/kybra/src/__project_name___backend/__project_name___backend.did
diff --git a/src/dfx/assets/project_templates/kybra/src/__project_name___backend/src/main.py b/src/dfx/assets/project_templates/kybra/src/__project_name___backend/src/main.py
new file mode 100644
index 0000000000..bf0f57a9da
--- /dev/null
+++ b/src/dfx/assets/project_templates/kybra/src/__project_name___backend/src/main.py
@@ -0,0 +1,5 @@
+from kybra import query
+
+@query
+def greet(name: str) -> str:
+    return f"Hello, {name}!"
diff --git a/src/dfx/assets/new_project_motoko_files/README.md.patch b/src/dfx/assets/project_templates/motoko/README.md.patch
similarity index 100%
rename from src/dfx/assets/new_project_motoko_files/README.md.patch
rename to src/dfx/assets/project_templates/motoko/README.md.patch
diff --git a/src/dfx/assets/new_project_motoko_files/dfx.json-patch b/src/dfx/assets/project_templates/motoko/dfx.json-patch
similarity index 100%
rename from src/dfx/assets/new_project_motoko_files/dfx.json-patch
rename to src/dfx/assets/project_templates/motoko/dfx.json-patch
diff --git a/src/dfx/assets/new_project_motoko_files/src/__project_name___backend/main.mo b/src/dfx/assets/project_templates/motoko/src/__project_name___backend/main.mo
similarity index 100%
rename from src/dfx/assets/new_project_motoko_files/src/__project_name___backend/main.mo
rename to src/dfx/assets/project_templates/motoko/src/__project_name___backend/main.mo
diff --git a/src/dfx/assets/new_project_node_files/dfx.json-patch b/src/dfx/assets/project_templates/react/dfx.json-patch
similarity index 68%
rename from src/dfx/assets/new_project_node_files/dfx.json-patch
rename to src/dfx/assets/project_templates/react/dfx.json-patch
index 933faf7453..fa6e3bd3ed 100644
--- a/src/dfx/assets/new_project_node_files/dfx.json-patch
+++ b/src/dfx/assets/project_templates/react/dfx.json-patch
@@ -5,11 +5,12 @@
         "value": {
             "type": "assets",
             "source": [
-                "src/{project_name}_frontend/assets"
+                "src/{project_name}_frontend/dist"
             ],
             "dependencies": [
                 "{project_name}_backend"
-            ]
+            ],
+            "workspace": "{project_name}_frontend"
         }
     }
 ]
diff --git a/src/dfx/assets/project_templates/react/package.json-patch b/src/dfx/assets/project_templates/react/package.json-patch
new file mode 100644
index 0000000000..c74a9e93c7
--- /dev/null
+++ b/src/dfx/assets/project_templates/react/package.json-patch
@@ -0,0 +1,7 @@
+[
+    {
+        "op": "add",
+        "path": "/workspaces/-",
+        "value": "src/{project_name}_frontend"
+    }
+]
diff --git a/src/dfx/assets/project_templates/react/src/__project_name___frontend/index.html b/src/dfx/assets/project_templates/react/src/__project_name___frontend/index.html
new file mode 100644
index 0000000000..a8f14f76b8
--- /dev/null
+++ b/src/dfx/assets/project_templates/react/src/__project_name___frontend/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>IC Hello Starter</title>
+  <base href="/" />
+  <link rel="icon" href="/favicon.ico" />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/dfx/assets/project_templates/react/src/__project_name___frontend/package.json b/src/dfx/assets/project_templates/react/src/__project_name___frontend/package.json
new file mode 100644
index 0000000000..111f329b2c
--- /dev/null
+++ b/src/dfx/assets/project_templates/react/src/__project_name___frontend/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "{project_name}_frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "setup": "npm i && dfx canister create {project_name}_backend && dfx generate {project_name}_backend && dfx deploy",
+    "start": "vite --port 3000",
+    "prebuild": "dfx generate",
+    "build": "tsc && vite build",
+    "format": "prettier --write \"src/**/*.{json,js,jsx,ts,tsx,css,scss}\""
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@dfinity/agent": "^0.15.7",
+    "@dfinity/candid": "^0.15.7",
+    "@dfinity/principal": "^0.15.7"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@vitejs/plugin-react": "^4.0.1",
+    "dotenv": "^16.3.1",
+    "sass": "^1.63.6",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9",
+    "vite-plugin-environment": "^1.1.3"
+  }
+}
diff --git a/src/dfx/assets/new_project_node_files/src/__project_name___frontend/src/.ic-assets.json5 b/src/dfx/assets/project_templates/react/src/__project_name___frontend/public/.ic-assets.json5
similarity index 96%
rename from src/dfx/assets/new_project_node_files/src/__project_name___frontend/src/.ic-assets.json5
rename to src/dfx/assets/project_templates/react/src/__project_name___frontend/public/.ic-assets.json5
index b58d2e1fc6..394b81c66e 100644
--- a/src/dfx/assets/new_project_node_files/src/__project_name___frontend/src/.ic-assets.json5
+++ b/src/dfx/assets/project_templates/react/src/__project_name___frontend/public/.ic-assets.json5
@@ -50,8 +50,7 @@
             // See: https://owasp.org/www-community/attacks/xss/
             "X-XSS-Protection": "1; mode=block"
         },
-        // Set the allow_raw_access field to false to redirect all requests from .raw.icp0.io to .icp0.io
-        // The default behavior is to allow raw access.
-        // "allow_raw_access": true
+        // Uncomment to redirect all requests from .raw.icp0.io to .icp0.io
+        // "allow_raw_access": false
     },
 ]
diff --git a/src/dfx/assets/new_project_node_files/src/__project_name___frontend/assets/favicon.ico b/src/dfx/assets/project_templates/react/src/__project_name___frontend/public/favicon.ico
similarity index 100%
rename from src/dfx/assets/new_project_node_files/src/__project_name___frontend/assets/favicon.ico
rename to src/dfx/assets/project_templates/react/src/__project_name___frontend/public/favicon.ico
diff --git a/src/dfx/assets/new_project_node_files/src/__project_name___frontend/assets/logo2.svg b/src/dfx/assets/project_templates/react/src/__project_name___frontend/public/logo2.svg
similarity index 100%
rename from src/dfx/assets/new_project_node_files/src/__project_name___frontend/assets/logo2.svg
rename to src/dfx/assets/project_templates/react/src/__project_name___frontend/public/logo2.svg
diff --git a/src/dfx/assets/project_templates/react/src/__project_name___frontend/src/App.jsx b/src/dfx/assets/project_templates/react/src/__project_name___frontend/src/App.jsx
new file mode 100644
index 0000000000..48e6545c81
--- /dev/null
+++ b/src/dfx/assets/project_templates/react/src/__project_name___frontend/src/App.jsx
@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { {project_name}_backend } from 'declarations/{project_name}_backend';
+
+function App() {
+  const [greeting, setGreeting] = useState('');
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    const name = event.target.elements.name.value;
+    {project_name}_backend.greet(name).then((greeting) => {
+      setGreeting(greeting);
+    });
+    return false;
+  }
+
+  return (
+    <main>
+      <img src="/logo2.svg" alt="DFINITY logo" />
+      <br />
+      <br />
+      <form action="#" onSubmit={handleSubmit}>
+        <label htmlFor="name">Enter your name: &nbsp;</label>
+        <input id="name" alt="Name" type="text" />
+        <button type="submit">Click Me!</button>
+      </form>
+      <section id="greeting">{greeting}</section>
+    </main>
+  );
+}
+
+export default App;
diff --git a/src/dfx/assets/project_templates/react/src/__project_name___frontend/src/index.scss b/src/dfx/assets/project_templates/react/src/__project_name___frontend/src/index.scss
new file mode 100644
index 0000000000..c1c320834c
--- /dev/null
+++ b/src/dfx/assets/project_templates/react/src/__project_name___frontend/src/index.scss
@@ -0,0 +1,37 @@
+body {
+  font-family: sans-serif;
+  font-size: 1.5rem;
+}
+
+img {
+  max-width: 50vw;
+  max-height: 25vw;
+  display: block;
+  margin: auto;
+}
+
+form {
+  display: flex;
+  justify-content: center;
+  gap: 0.5em;
+  flex-flow: row wrap;
+  max-width: 40vw;
+  margin: auto;
+  align-items: baseline;
+}
+
+button[type="submit"] {
+  padding: 5px 20px;
+  margin: 10px auto;
+  float: right;
+}
+
+#greeting {
+  margin: 10px auto;
+  padding: 10px 60px;
+  border: 1px solid #222;
+}
+
+#greeting:empty {
+  display: none;
+}
diff --git a/src/dfx/assets/project_templates/react/src/__project_name___frontend/src/main.jsx b/src/dfx/assets/project_templates/react/src/__project_name___frontend/src/main.jsx
new file mode 100644
index 0000000000..173e7221c5
--- /dev/null
+++ b/src/dfx/assets/project_templates/react/src/__project_name___frontend/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.scss';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/src/dfx/assets/project_templates/react/src/__project_name___frontend/src/vite-env.d.ts b/src/dfx/assets/project_templates/react/src/__project_name___frontend/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/src/dfx/assets/project_templates/react/src/__project_name___frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/src/dfx/assets/project_templates/react/src/__project_name___frontend/tsconfig.json b/src/dfx/assets/project_templates/react/src/__project_name___frontend/tsconfig.json
new file mode 100644
index 0000000000..39a545e919
--- /dev/null
+++ b/src/dfx/assets/project_templates/react/src/__project_name___frontend/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}
diff --git a/src/dfx/assets/project_templates/react/src/__project_name___frontend/vite.config.js b/src/dfx/assets/project_templates/react/src/__project_name___frontend/vite.config.js
new file mode 100644
index 0000000000..670b0347b6
--- /dev/null
+++ b/src/dfx/assets/project_templates/react/src/__project_name___frontend/vite.config.js
@@ -0,0 +1,43 @@
+import { fileURLToPath, URL } from 'url';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import environment from 'vite-plugin-environment';
+import dotenv from 'dotenv';
+
+dotenv.config({ path: '../../.env' });
+
+export default defineConfig({
+  build: {
+    emptyOutDir: true,
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      define: {
+        global: "globalThis",
+      },
+    },
+  },
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://127.0.0.1:4943",
+        changeOrigin: true,
+      },
+    },
+  },
+  plugins: [
+    react(),
+    environment("all", { prefix: "CANISTER_" }),
+    environment("all", { prefix: "DFX_" }),
+  ],
+  resolve: {
+    alias: [
+      {
+        find: "declarations",
+        replacement: fileURLToPath(
+          new URL("../declarations", import.meta.url)
+        ),
+      },
+    ],
+  },
+});
diff --git a/src/dfx/assets/project_templates/react_tests/src/__project_name___frontend/package.json-patch b/src/dfx/assets/project_templates/react_tests/src/__project_name___frontend/package.json-patch
new file mode 100644
index 0000000000..0695d69555
--- /dev/null
+++ b/src/dfx/assets/project_templates/react_tests/src/__project_name___frontend/package.json-patch
@@ -0,0 +1,32 @@
+[
+    {
+        "op": "add",
+        "path": "/devDependencies/@testing-library~1jest-dom",
+        "value": "^5.16.5"
+    },
+    {
+        "op": "add",
+        "path": "/devDependencies/@testing-library~1react",
+        "value": "^14.0.0"
+    },
+    {
+        "op": "add",
+        "path": "/devDependencies/cross-fetch",
+        "value": "^3.1.6"
+    },
+    {
+        "op": "add",
+        "path": "/devDependencies/vitest",
+        "value": "^0.32.2"
+    },
+    {
+        "op": "add",
+        "path": "/devDependencies/jsdom",
+        "value": "^22.1.0"
+    },
+    {
+        "op": "add",
+        "path": "/scripts/test",
+        "value": "vitest run"
+    }
+]
diff --git a/src/dfx/assets/project_templates/react_tests/src/__project_name___frontend/src/setupTests.js b/src/dfx/assets/project_templates/react_tests/src/__project_name___frontend/src/setupTests.js
new file mode 100644
index 0000000000..c29162e04f
--- /dev/null
+++ b/src/dfx/assets/project_templates/react_tests/src/__project_name___frontend/src/setupTests.js
@@ -0,0 +1,5 @@
+import matchers from '@testing-library/jest-dom/matchers';
+import 'cross-fetch/polyfill';
+import { expect } from 'vitest';
+
+expect.extend(matchers);
diff --git a/src/dfx/assets/project_templates/react_tests/src/__project_name___frontend/src/tests/App.test.jsx b/src/dfx/assets/project_templates/react_tests/src/__project_name___frontend/src/tests/App.test.jsx
new file mode 100644
index 0000000000..9e54579365
--- /dev/null
+++ b/src/dfx/assets/project_templates/react_tests/src/__project_name___frontend/src/tests/App.test.jsx
@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import App from '../App';
+import { StrictMode } from 'react';
+
+describe('App', () => {
+  it('renders as expected', () => {
+    render(
+      <StrictMode>
+        <App />
+      </StrictMode>,
+    );
+    expect(document.body.innerHTML).toMatchInlineSnapshot('"<div><main><img src=\\"/logo2.svg\\" alt=\\"DFINITY logo\\"><br><br><form action=\\"#\\"><label for=\\"name\\">Enter your name: &nbsp;</label><input id=\\"name\\" alt=\\"Name\\" type=\\"text\\"><button type=\\"submit\\">Click Me!</button></form><section id=\\"greeting\\"></section></main></div>"');
+    expect(1).toEqual(1);
+  });
+});
diff --git a/src/dfx/assets/project_templates/react_tests/src/__project_name___frontend/tsconfig.json-patch b/src/dfx/assets/project_templates/react_tests/src/__project_name___frontend/tsconfig.json-patch
new file mode 100644
index 0000000000..b1501d3f56
--- /dev/null
+++ b/src/dfx/assets/project_templates/react_tests/src/__project_name___frontend/tsconfig.json-patch
@@ -0,0 +1,7 @@
+[
+    {
+        "op": "add",
+        "path": "/compilerOptions/types/-",
+        "value": "@testing-library/jest-dom"
+    }
+]
diff --git a/src/dfx/assets/project_templates/react_tests/src/__project_name___frontend/vite.config.js.patch b/src/dfx/assets/project_templates/react_tests/src/__project_name___frontend/vite.config.js.patch
new file mode 100644
index 0000000000..c2f6c8f6d3
--- /dev/null
+++ b/src/dfx/assets/project_templates/react_tests/src/__project_name___frontend/vite.config.js.patch
@@ -0,0 +1,11 @@
+--- a/src/{project_name}_frontend/vite.config.js
++++ b/src/{project_name}_frontend/vite.config.js
+@@ -1,1 +1,2 @@
++/// <reference types="vitest" />
+ import { fileURLToPath, URL } from 'url';
+@@ -33,1 +33,5 @@
++  test: {
++    environment: 'jsdom',
++    setupFiles: 'src/setupTests.js',
++  },
+   resolve: {
diff --git a/src/dfx/assets/project_templates/rust/Cargo.toml b/src/dfx/assets/project_templates/rust/Cargo.toml
new file mode 100644
index 0000000000..76f71f33d6
--- /dev/null
+++ b/src/dfx/assets/project_templates/rust/Cargo.toml
@@ -0,0 +1,5 @@
+[workspace]
+members = [
+    "src/{project_name}_backend"
+]
+resolver = "2"
diff --git a/src/dfx/assets/new_project_rust_files/README.md.patch b/src/dfx/assets/project_templates/rust/README.md.patch
similarity index 96%
rename from src/dfx/assets/new_project_rust_files/README.md.patch
rename to src/dfx/assets/project_templates/rust/README.md.patch
index 04bf8c1da7..5d37f5183d 100644
--- a/src/dfx/assets/new_project_rust_files/README.md.patch
+++ b/src/dfx/assets/project_templates/rust/README.md.patch
@@ -1,5 +1,5 @@
 --- a/README.md
-+++ b/README.md 
++++ b/README.md
 @@ -9,2 +9,6 @@
  - [Quick Start](https://internetcomputer.org/docs/current/developer-docs/setup/deploy-locally)
  - [SDK Developer Tools](https://internetcomputer.org/docs/current/developer-docs/setup/install)
diff --git a/src/dfx/assets/new_project_rust_files/dfx.json-patch b/src/dfx/assets/project_templates/rust/dfx.json-patch
similarity index 100%
rename from src/dfx/assets/new_project_rust_files/dfx.json-patch
rename to src/dfx/assets/project_templates/rust/dfx.json-patch
diff --git a/src/dfx/assets/new_project_rust_files/src/__project_name___backend/Cargo.toml b/src/dfx/assets/project_templates/rust/src/__project_name___backend/Cargo.toml
similarity index 100%
rename from src/dfx/assets/new_project_rust_files/src/__project_name___backend/Cargo.toml
rename to src/dfx/assets/project_templates/rust/src/__project_name___backend/Cargo.toml
diff --git a/src/dfx/assets/new_project_node_files/__dot__env b/src/dfx/assets/project_templates/rust/src/__project_name___backend/__project_name___backend.did
similarity index 72%
rename from src/dfx/assets/new_project_node_files/__dot__env
rename to src/dfx/assets/project_templates/rust/src/__project_name___backend/__project_name___backend.did
index dfbd8f71ed..aa419a250f 100644
--- a/src/dfx/assets/new_project_node_files/__dot__env
+++ b/src/dfx/assets/project_templates/rust/src/__project_name___backend/__project_name___backend.did
@@ -1 +1,3 @@
-# Do not commit this file to your public repos.
+service : {
+    "greet": (text) -> (text) query;
+}
diff --git a/src/dfx/assets/new_project_rust_files/src/__project_name___backend/src/lib.rs b/src/dfx/assets/project_templates/rust/src/__project_name___backend/src/lib.rs
similarity index 100%
rename from src/dfx/assets/new_project_rust_files/src/__project_name___backend/src/lib.rs
rename to src/dfx/assets/project_templates/rust/src/__project_name___backend/src/lib.rs
diff --git a/src/dfx/assets/new_project_no_frontend_files/dfx.json-patch b/src/dfx/assets/project_templates/simple_assets/dfx.json-patch
similarity index 100%
rename from src/dfx/assets/new_project_no_frontend_files/dfx.json-patch
rename to src/dfx/assets/project_templates/simple_assets/dfx.json-patch
diff --git a/src/dfx/assets/project_templates/simple_assets/src/__project_name___frontend/assets/.ic-assets.json5 b/src/dfx/assets/project_templates/simple_assets/src/__project_name___frontend/assets/.ic-assets.json5
new file mode 100644
index 0000000000..887f555461
--- /dev/null
+++ b/src/dfx/assets/project_templates/simple_assets/src/__project_name___frontend/assets/.ic-assets.json5
@@ -0,0 +1,56 @@
+[
+    {
+        "match": "**/*",
+        "headers": {
+            // Security: The Content Security Policy (CSP) given below aims at working with many apps rather than providing maximal security.
+            // We recommend tightening the CSP for your specific application. Some recommendations are as follows:
+            // - Use the CSP Evaluator (https://csp-evaluator.withgoogle.com/) to validate the CSP you define.
+            // - Follow the “Strict CSP” recommendations (https://csp.withgoogle.com/docs/strict-csp.html). However, note that in the context of the IC,
+            //   nonces cannot be used because the response bodies must be static to work well with HTTP asset certification.
+            //   Thus, we recommend to include script hashes (in combination with strict-dynamic) in the CSP as described
+            //   in https://csp.withgoogle.com/docs/faq.html in section “What if my site is static and I can't add nonces to scripts?”.
+            //   See for example the II CSP (https://github.com/dfinity/internet-identity/blob/main/src/internet_identity/src/http.rs).
+            // - It is recommended to tighten the connect-src directive. With the current CSP configuration the browser can
+            //   make requests to https://*.icp0.io, hence being able to call any canister via https://icp0.io/api/v2/canister/{canister-ID}.
+            //   This could potentially be used in combination with another vulnerability (e.g. XSS) to exfiltrate private data.
+            //   The developer can configure this policy to only allow requests to their specific canisters,
+            //   e.g: connect-src 'self' https://icp-api.io/api/v2/canister/{my-canister-ID}, where {my-canister-ID} has the following format: aaaaa-aaaaa-aaaaa-aaaaa-aaa
+            // - It is recommended to configure style-src, style-src-elem and font-src directives with the resources your canister is going to use
+            //   instead of using the wild card (*) option. Normally this will include 'self' but also other third party styles or fonts resources (e.g: https://fonts.googleapis.com or other CDNs)
+
+            // Notes about the CSP below:
+            // - script-src 'unsafe-eval' is currently required because agent-js uses a WebAssembly module for the validation of bls signatures.
+            //   There is currently no other way to allow execution of WebAssembly modules with CSP.
+            //   See: https://github.com/WebAssembly/content-security-policy/blob/main/proposals/CSP.md.
+            // - We added img-src data: because data: images are used often.
+            // - frame-ancestors: none mitigates clickjacking attacks. See https://owasp.org/www-community/attacks/Clickjacking.
+            "Content-Security-Policy": "default-src 'self';script-src 'self' 'unsafe-eval' 'unsafe-inline';connect-src 'self' http://localhost:* https://icp0.io https://*.icp0.io https://icp-api.io;img-src 'self' data:;style-src * 'unsafe-inline';style-src-elem * 'unsafe-inline';font-src *;object-src 'none';base-uri 'self';frame-ancestors 'none';form-action 'self';upgrade-insecure-requests;",
+
+            // Security: The permissions policy disables all features for security reasons. If your site needs such permissions, activate them.
+            // To configure permissions go here https://www.permissionspolicy.com/
+            "Permissions-Policy": "accelerometer=(), ambient-light-sensor=(), autoplay=(), battery=(), camera=(), cross-origin-isolated=(), display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), fullscreen=(), geolocation=(), gyroscope=(), keyboard-map=(), magnetometer=(), microphone=(), midi=(), navigation-override=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(), xr-spatial-tracking=(), clipboard-read=(), clipboard-write=(), gamepad=(), speaker-selection=(), conversion-measurement=(), focus-without-user-activation=(), hid=(), idle-detection=(), interest-cohort=(), serial=(), sync-script=(), trust-token-redemption=(), window-placement=(), vertical-scroll=()",
+
+            // Security: Mitigates clickjacking attacks.
+            // See: https://owasp.org/www-community/attacks/Clickjacking.
+            "X-Frame-Options": "DENY",
+
+            // Security: Avoids forwarding referrer information to other origins.
+            // See: https://owasp.org/www-project-secure-headers/#referrer-policy.
+            "Referrer-Policy": "same-origin",
+
+            // Security: Tells the user’s browser that it must always use HTTPS with your site.
+            // See: https://owasp.org/www-project-secure-headers/#http-strict-transport-security
+            "Strict-Transport-Security": "max-age=31536000; includeSubDomains",
+
+            // Security: Prevents the browser from interpreting files as a different MIME type to what is specified in the Content-Type header.
+            // See: https://owasp.org/www-project-secure-headers/#x-content-type-options
+            "X-Content-Type-Options": "nosniff",
+
+            // Security: Enables browser features to mitigate some of the XSS attacks. Note that it has to be in mode=block.
+            // See: https://owasp.org/www-community/attacks/xss/
+            "X-XSS-Protection": "1; mode=block"
+        },
+        // Uncomment to redirect all requests from .raw.icp0.io to .icp0.io
+        // "allow_raw_access": false
+    },
+]
diff --git a/src/dfx/assets/new_project_no_frontend_files/src/__project_name___frontend/assets/sample-asset.txt b/src/dfx/assets/project_templates/simple_assets/src/__project_name___frontend/assets/sample-asset.txt
similarity index 100%
rename from src/dfx/assets/new_project_no_frontend_files/src/__project_name___frontend/assets/sample-asset.txt
rename to src/dfx/assets/project_templates/simple_assets/src/__project_name___frontend/assets/sample-asset.txt
diff --git a/src/dfx/assets/project_templates/svelte/dfx.json-patch b/src/dfx/assets/project_templates/svelte/dfx.json-patch
new file mode 100644
index 0000000000..731bca83c1
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte/dfx.json-patch
@@ -0,0 +1,23 @@
+[
+    {
+        "op": "add",
+        "path": "/canisters/{project_name}_frontend",
+        "value": {
+            "type": "assets",
+            "source": [
+                "src/{project_name}_frontend/dist"
+            ],
+            "dependencies": [
+                "{project_name}_backend"
+            ],
+            "workspace": "{project_name}_frontend"
+        }
+    },
+    {
+        "op": "add",
+        "path": "/canisters/{project_name}_backend/declarations",
+        "value": {
+            "node_compatibility": true
+        }
+    }
+]
diff --git a/src/dfx/assets/project_templates/svelte/package.json-patch b/src/dfx/assets/project_templates/svelte/package.json-patch
new file mode 100644
index 0000000000..c74a9e93c7
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte/package.json-patch
@@ -0,0 +1,7 @@
+[
+    {
+        "op": "add",
+        "path": "/workspaces/-",
+        "value": "src/{project_name}_frontend"
+    }
+]
diff --git a/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/package.json b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/package.json
new file mode 100644
index 0000000000..5109a2622b
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "{project_name}_frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "setup": "npm i && dfx canister create {project_name}_backend && dfx generate {project_name}_backend && dfx deploy",
+    "start": "vite --port 3000",
+    "prebuild": "dfx generate",
+    "build": "tsc && vite build",
+    "format": "prettier --write \"src/**/*.{json,js,jsx,ts,tsx,css,scss}\""
+  },
+  "dependencies": {
+    "@dfinity/agent": "^0.20.0",
+    "@dfinity/candid": "^0.20.0",
+    "@dfinity/principal": "^0.20.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-static": "^2.0.0",
+    "@sveltejs/kit": "^1.21.0",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "dotenv": "^16.3.1",
+    "sass": "^1.63.6",
+    "svelte": "^4.0.1",
+    "svelte-check": "^3.4.4",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9",
+    "vite-plugin-environment": "^1.1.3"
+  }
+}
diff --git a/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/app.d.ts b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/app.d.ts
new file mode 100644
index 0000000000..899c7e8fca
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/app.d.ts
@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface Platform {}
+  }
+}
+
+export {};
diff --git a/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/app.html b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/app.html
new file mode 100644
index 0000000000..dfae06cc73
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/app.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+	<meta name="viewport" content="width=device-width" />
+	<title>IC Hello Starter</title>
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/index.scss b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/index.scss
new file mode 100644
index 0000000000..c1c320834c
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/index.scss
@@ -0,0 +1,37 @@
+body {
+  font-family: sans-serif;
+  font-size: 1.5rem;
+}
+
+img {
+  max-width: 50vw;
+  max-height: 25vw;
+  display: block;
+  margin: auto;
+}
+
+form {
+  display: flex;
+  justify-content: center;
+  gap: 0.5em;
+  flex-flow: row wrap;
+  max-width: 40vw;
+  margin: auto;
+  align-items: baseline;
+}
+
+button[type="submit"] {
+  padding: 5px 20px;
+  margin: 10px auto;
+  float: right;
+}
+
+#greeting {
+  margin: 10px auto;
+  padding: 10px 60px;
+  border: 1px solid #222;
+}
+
+#greeting:empty {
+  display: none;
+}
diff --git a/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/lib/canisters.js b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/lib/canisters.js
new file mode 100644
index 0000000000..6030da0260
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/lib/canisters.js
@@ -0,0 +1,12 @@
+import { createActor, canisterId } from 'declarations/{project_name}_backend';
+import { building } from '$app/environment';
+
+function dummyActor() {
+    return new Proxy({}, { get() { throw new Error("Canister invoked while building"); } });
+}
+
+const buildingOrTesting = building || process.env.NODE_ENV === "test";
+
+export const backend = buildingOrTesting
+  ? dummyActor()
+  : createActor(canisterId);
diff --git a/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/routes/+layout.js b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/routes/+layout.js
new file mode 100644
index 0000000000..c8cacf0895
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/routes/+layout.js
@@ -0,0 +1 @@
+export const prerender = true;
\ No newline at end of file
diff --git a/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/routes/+page.svelte b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/routes/+page.svelte
new file mode 100644
index 0000000000..472a02ea70
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/routes/+page.svelte
@@ -0,0 +1,26 @@
+<script>
+  import "../index.scss";
+  import { backend } from "$lib/canisters";
+
+  let greeting = "";
+
+  function onSubmit(event) {
+    const name = event.target.name.value;
+    backend.greet(name).then((response) => {
+      greeting = response;
+    });
+    return false;
+  }
+</script>
+
+<main>
+  <img src="/logo2.svg" alt="DFINITY logo" />
+  <br />
+  <br />
+  <form action="#" on:submit|preventDefault={onSubmit}>
+    <label for="name">Enter your name: &nbsp;</label>
+    <input id="name" alt="Name" type="text" />
+    <button type="submit">Click Me!</button>
+  </form>
+  <section id="greeting">{greeting}</section>
+</main>
diff --git a/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/vite-env.d.ts b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/static/.ic-assets.json5 b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/static/.ic-assets.json5
new file mode 100644
index 0000000000..887f555461
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/static/.ic-assets.json5
@@ -0,0 +1,56 @@
+[
+    {
+        "match": "**/*",
+        "headers": {
+            // Security: The Content Security Policy (CSP) given below aims at working with many apps rather than providing maximal security.
+            // We recommend tightening the CSP for your specific application. Some recommendations are as follows:
+            // - Use the CSP Evaluator (https://csp-evaluator.withgoogle.com/) to validate the CSP you define.
+            // - Follow the “Strict CSP” recommendations (https://csp.withgoogle.com/docs/strict-csp.html). However, note that in the context of the IC,
+            //   nonces cannot be used because the response bodies must be static to work well with HTTP asset certification.
+            //   Thus, we recommend to include script hashes (in combination with strict-dynamic) in the CSP as described
+            //   in https://csp.withgoogle.com/docs/faq.html in section “What if my site is static and I can't add nonces to scripts?”.
+            //   See for example the II CSP (https://github.com/dfinity/internet-identity/blob/main/src/internet_identity/src/http.rs).
+            // - It is recommended to tighten the connect-src directive. With the current CSP configuration the browser can
+            //   make requests to https://*.icp0.io, hence being able to call any canister via https://icp0.io/api/v2/canister/{canister-ID}.
+            //   This could potentially be used in combination with another vulnerability (e.g. XSS) to exfiltrate private data.
+            //   The developer can configure this policy to only allow requests to their specific canisters,
+            //   e.g: connect-src 'self' https://icp-api.io/api/v2/canister/{my-canister-ID}, where {my-canister-ID} has the following format: aaaaa-aaaaa-aaaaa-aaaaa-aaa
+            // - It is recommended to configure style-src, style-src-elem and font-src directives with the resources your canister is going to use
+            //   instead of using the wild card (*) option. Normally this will include 'self' but also other third party styles or fonts resources (e.g: https://fonts.googleapis.com or other CDNs)
+
+            // Notes about the CSP below:
+            // - script-src 'unsafe-eval' is currently required because agent-js uses a WebAssembly module for the validation of bls signatures.
+            //   There is currently no other way to allow execution of WebAssembly modules with CSP.
+            //   See: https://github.com/WebAssembly/content-security-policy/blob/main/proposals/CSP.md.
+            // - We added img-src data: because data: images are used often.
+            // - frame-ancestors: none mitigates clickjacking attacks. See https://owasp.org/www-community/attacks/Clickjacking.
+            "Content-Security-Policy": "default-src 'self';script-src 'self' 'unsafe-eval' 'unsafe-inline';connect-src 'self' http://localhost:* https://icp0.io https://*.icp0.io https://icp-api.io;img-src 'self' data:;style-src * 'unsafe-inline';style-src-elem * 'unsafe-inline';font-src *;object-src 'none';base-uri 'self';frame-ancestors 'none';form-action 'self';upgrade-insecure-requests;",
+
+            // Security: The permissions policy disables all features for security reasons. If your site needs such permissions, activate them.
+            // To configure permissions go here https://www.permissionspolicy.com/
+            "Permissions-Policy": "accelerometer=(), ambient-light-sensor=(), autoplay=(), battery=(), camera=(), cross-origin-isolated=(), display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), fullscreen=(), geolocation=(), gyroscope=(), keyboard-map=(), magnetometer=(), microphone=(), midi=(), navigation-override=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(), xr-spatial-tracking=(), clipboard-read=(), clipboard-write=(), gamepad=(), speaker-selection=(), conversion-measurement=(), focus-without-user-activation=(), hid=(), idle-detection=(), interest-cohort=(), serial=(), sync-script=(), trust-token-redemption=(), window-placement=(), vertical-scroll=()",
+
+            // Security: Mitigates clickjacking attacks.
+            // See: https://owasp.org/www-community/attacks/Clickjacking.
+            "X-Frame-Options": "DENY",
+
+            // Security: Avoids forwarding referrer information to other origins.
+            // See: https://owasp.org/www-project-secure-headers/#referrer-policy.
+            "Referrer-Policy": "same-origin",
+
+            // Security: Tells the user’s browser that it must always use HTTPS with your site.
+            // See: https://owasp.org/www-project-secure-headers/#http-strict-transport-security
+            "Strict-Transport-Security": "max-age=31536000; includeSubDomains",
+
+            // Security: Prevents the browser from interpreting files as a different MIME type to what is specified in the Content-Type header.
+            // See: https://owasp.org/www-project-secure-headers/#x-content-type-options
+            "X-Content-Type-Options": "nosniff",
+
+            // Security: Enables browser features to mitigate some of the XSS attacks. Note that it has to be in mode=block.
+            // See: https://owasp.org/www-community/attacks/xss/
+            "X-XSS-Protection": "1; mode=block"
+        },
+        // Uncomment to redirect all requests from .raw.icp0.io to .icp0.io
+        // "allow_raw_access": false
+    },
+]
diff --git a/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/static/favicon.ico b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/static/favicon.ico
new file mode 100644
index 0000000000..338fbf34cd
Binary files /dev/null and b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/static/favicon.ico differ
diff --git a/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/static/logo2.svg b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/static/logo2.svg
new file mode 100644
index 0000000000..74bc67e39d
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/static/logo2.svg
@@ -0,0 +1,37 @@
+<svg width="684" height="147" viewBox="0 0 228 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="227" height="48" rx="3.5" fill="white" stroke="url(#paint0_linear_1810_46)"/>
+<path d="M51.3703 12C48.4634 12 45.2947 13.5165 41.9454 16.5037C40.3565 17.9191 38.9842 19.4357 37.9551 20.6489C37.9551 20.6489 37.9551 20.6489 37.9641 20.6581V20.6489C37.9641 20.6489 39.5891 22.4504 41.3856 24.3805C42.3516 23.2133 43.7419 21.6232 45.3398 20.1894C48.319 17.5331 50.2599 16.9724 51.3703 16.9724C55.5502 16.9724 58.9446 20.3456 58.9446 24.4908C58.9446 28.6085 55.5412 31.9816 51.3703 32.0092C51.1808 32.0092 50.937 31.9816 50.6301 31.9173C51.8488 32.4504 53.1578 32.8364 54.4037 32.8364C62.0592 32.8364 63.5578 27.7537 63.6571 27.3861C63.8828 26.4577 64.0002 25.4835 64.0002 24.4816C64.0002 17.6066 58.3307 12 51.3703 12Z" fill="url(#paint1_linear_1810_46)"/>
+<path d="M24.6298 36.9999C27.5368 36.9999 30.7055 35.4834 34.0548 32.4962C35.6437 31.0808 37.0159 29.5642 38.0451 28.351C38.0451 28.351 38.0451 28.351 38.0361 28.3418V28.351C38.0361 28.351 36.4111 26.5495 34.6145 24.6194C33.6486 25.7867 32.2583 27.3767 30.6604 28.8106C27.6812 31.4668 25.7403 32.0275 24.6298 32.0275C20.45 32.0183 17.0555 28.6451 17.0555 24.4999C17.0555 20.3822 20.459 17.0091 24.6298 16.9815C24.8194 16.9815 25.0632 17.0091 25.3701 17.0734C24.1514 16.5403 22.8423 16.1543 21.5965 16.1543C13.941 16.1543 12.4514 21.237 12.3431 21.5955C12.1174 22.533 12 23.4981 12 24.4999C12 31.3933 17.6694 36.9999 24.6298 36.9999Z" fill="url(#paint2_linear_1810_46)"/>
+<path d="M54.3856 32.7261C50.4675 32.625 46.396 29.4816 45.5654 28.7004C43.4168 26.6783 38.4606 21.2096 38.0724 20.7776C34.4432 16.6324 29.5231 12 24.63 12H24.621H24.612C18.6717 12.0276 13.6794 16.1268 12.3433 21.5956C12.4426 21.2371 14.4016 16.0533 21.5877 16.2371C25.5057 16.3382 29.5953 19.5276 30.4349 20.3088C32.5835 22.3309 37.5398 27.7997 37.9279 28.2316C41.5571 32.3677 46.4772 37 51.3703 37H51.3793H51.3883C57.3286 36.9725 62.33 32.8732 63.6571 27.4044C63.5487 27.7629 61.5807 32.9008 54.3856 32.7261Z" fill="#29ABE2"/>
+<path d="M73.0301 33.827C73.3063 33.827 73.5301 33.6032 73.5301 33.327V26.6622C73.5301 26.386 73.3063 26.1622 73.0301 26.1622H72.5C72.2239 26.1622 72 26.386 72 26.6622V33.327C72 33.6032 72.2239 33.827 72.5 33.827H73.0301Z" fill="#161617"/>
+<path d="M83.2018 33.827C83.478 33.827 83.7018 33.6032 83.7018 33.327V26.6622C83.7018 26.386 83.478 26.1622 83.2018 26.1622H82.6936C82.4174 26.1622 82.1936 26.386 82.1936 26.6622V31.2324L79.264 26.6256C79.0805 26.337 78.7622 26.1622 78.4202 26.1622H77.5895C77.3133 26.1622 77.0895 26.386 77.0895 26.6622V33.327C77.0895 33.6032 77.3133 33.827 77.5895 33.827H78.0978C78.3739 33.827 78.5978 33.6032 78.5978 33.327V28.3892L81.9693 33.5987C82.0614 33.7411 82.2195 33.827 82.389 33.827H83.2018Z" fill="#161617"/>
+<path d="M92.4535 27.5784C92.7297 27.5784 92.9535 27.3545 92.9535 27.0784V26.6622C92.9535 26.386 92.7297 26.1622 92.4535 26.1622H87.0379C86.7617 26.1622 86.5379 26.386 86.5379 26.6622V27.0784C86.5379 27.3545 86.7617 27.5784 87.0379 27.5784H88.9861V33.327C88.9861 33.6032 89.21 33.827 89.4861 33.827H90.0053C90.2814 33.827 90.5053 33.6032 90.5053 33.327V27.5784H92.4535Z" fill="#161617"/>
+<path d="M100.138 33.827C100.415 33.827 100.638 33.6032 100.638 33.327V32.9216C100.638 32.6455 100.415 32.4216 100.138 32.4216H97.2941V30.6486H99.8215C100.098 30.6486 100.322 30.4248 100.322 30.1486V29.8189C100.322 29.5428 100.098 29.3189 99.8215 29.3189H97.2941V27.5676H100.138C100.415 27.5676 100.638 27.3437 100.638 27.0676V26.6622C100.638 26.386 100.415 26.1622 100.138 26.1622H96.2858C96.0096 26.1622 95.7858 26.386 95.7858 26.6622V33.327C95.7858 33.6032 96.0096 33.827 96.2858 33.827H100.138Z" fill="#161617"/>
+<path d="M107.55 33.5559C107.635 33.7224 107.807 33.827 107.994 33.827H108.541C108.918 33.827 109.16 33.4259 108.983 33.0929L107.711 30.6919C108.727 30.4 109.361 29.5892 109.361 28.5189C109.361 27.1892 108.4 26.1622 106.891 26.1622H104.364C104.088 26.1622 103.864 26.386 103.864 26.6622V33.327C103.864 33.6032 104.088 33.827 104.364 33.827H104.883C105.159 33.827 105.383 33.6032 105.383 33.327V30.8757H106.17L107.55 33.5559ZM105.383 29.5892V27.4595H106.607C107.372 27.4595 107.82 27.8811 107.82 28.5297C107.82 29.1568 107.372 29.5892 106.607 29.5892H105.383Z" fill="#161617"/>
+<path d="M118.609 33.827C118.885 33.827 119.109 33.6032 119.109 33.327V26.6622C119.109 26.386 118.885 26.1622 118.609 26.1622H118.101C117.825 26.1622 117.601 26.386 117.601 26.6622V31.2324L114.671 26.6256C114.488 26.337 114.17 26.1622 113.828 26.1622H112.997C112.721 26.1622 112.497 26.386 112.497 26.6622V33.327C112.497 33.6032 112.721 33.827 112.997 33.827H113.505C113.781 33.827 114.005 33.6032 114.005 33.327V28.3892L117.377 33.5987C117.469 33.7411 117.627 33.827 117.796 33.827H118.609Z" fill="#161617"/>
+<path d="M127.03 33.827C127.306 33.827 127.53 33.6032 127.53 33.327V32.9216C127.53 32.6455 127.306 32.4216 127.03 32.4216H124.186V30.6486H126.713C126.989 30.6486 127.213 30.4248 127.213 30.1486V29.8189C127.213 29.5428 126.989 29.3189 126.713 29.3189H124.186V27.5676H127.03C127.306 27.5676 127.53 27.3437 127.53 27.0676V26.6622C127.53 26.386 127.306 26.1622 127.03 26.1622H123.178C122.901 26.1622 122.678 26.386 122.678 26.6622V33.327C122.678 33.6032 122.901 33.827 123.178 33.827H127.03Z" fill="#161617"/>
+<path d="M135.939 27.5784C136.215 27.5784 136.439 27.3545 136.439 27.0784V26.6622C136.439 26.386 136.215 26.1622 135.939 26.1622H130.523C130.247 26.1622 130.023 26.386 130.023 26.6622V27.0784C130.023 27.3545 130.247 27.5784 130.523 27.5784H132.471V33.327C132.471 33.6032 132.695 33.827 132.971 33.827H133.491C133.767 33.827 133.991 33.6032 133.991 33.327V27.5784H135.939Z" fill="#161617"/>
+<path d="M146.823 33.9892C148.998 33.9892 150.113 32.5622 150.408 31.3838L148.998 30.9622C148.79 31.6757 148.146 32.5297 146.823 32.5297C145.577 32.5297 144.419 31.6324 144.419 30C144.419 28.2595 145.643 27.4378 146.801 27.4378C148.146 27.4378 148.747 28.2486 148.932 28.9838L150.353 28.5405C150.047 27.2973 148.943 26 146.801 26C144.725 26 142.856 27.5568 142.856 30C142.856 32.4432 144.659 33.9892 146.823 33.9892Z" fill="#161617"/>
+<path d="M154.428 29.9892C154.428 28.2595 155.653 27.4378 156.844 27.4378C158.046 27.4378 159.27 28.2595 159.27 29.9892C159.27 31.7189 158.046 32.5405 156.844 32.5405C155.653 32.5405 154.428 31.7189 154.428 29.9892ZM152.866 30C152.866 32.4649 154.745 33.9892 156.844 33.9892C158.953 33.9892 160.833 32.4649 160.833 30C160.833 27.5243 158.953 26 156.844 26C154.745 26 152.866 27.5243 152.866 30Z" fill="#161617"/>
+<path d="M172.077 33.827C172.354 33.827 172.577 33.6032 172.577 33.327V26.6622C172.577 26.386 172.354 26.1622 172.077 26.1622H170.858C170.655 26.1622 170.472 26.2846 170.395 26.4722L168.249 31.6973L166.05 26.4683C165.972 26.2828 165.79 26.1622 165.589 26.1622H164.432C164.156 26.1622 163.932 26.386 163.932 26.6622V33.327C163.932 33.6032 164.156 33.827 164.432 33.827H164.875C165.151 33.827 165.375 33.6032 165.375 33.327V28.4973L167.476 33.52C167.554 33.706 167.736 33.827 167.937 33.827H168.528C168.73 33.827 168.912 33.7053 168.989 33.5187L171.091 28.4541V33.327C171.091 33.6032 171.315 33.827 171.591 33.827H172.077Z" fill="#161617"/>
+<path d="M177.66 29.6541V27.4595H178.851C179.605 27.4595 180.065 27.8811 180.065 28.5622C180.065 29.2216 179.605 29.6541 178.851 29.6541H177.66ZM179.037 30.9405C180.567 30.9405 181.584 29.9459 181.584 28.5514C181.584 27.1676 180.567 26.1622 179.037 26.1622H176.641C176.365 26.1622 176.141 26.386 176.141 26.6622V33.327C176.141 33.6032 176.365 33.827 176.641 33.827H177.149C177.425 33.827 177.649 33.6032 177.649 33.327V30.9405H179.037Z" fill="#161617"/>
+<path d="M187.414 34C189.076 34 190.398 32.9946 190.398 31.1135V26.6622C190.398 26.386 190.174 26.1622 189.898 26.1622H189.39C189.114 26.1622 188.89 26.386 188.89 26.6622V31.0054C188.89 32.0108 188.332 32.5405 187.414 32.5405C186.518 32.5405 185.95 32.0108 185.95 31.0054V26.6622C185.95 26.386 185.726 26.1622 185.45 26.1622H184.941C184.665 26.1622 184.441 26.386 184.441 26.6622V31.1135C184.441 32.9946 185.764 34 187.414 34Z" fill="#161617"/>
+<path d="M199.081 27.5784C199.357 27.5784 199.581 27.3545 199.581 27.0784V26.6622C199.581 26.386 199.357 26.1622 199.081 26.1622H193.666C193.389 26.1622 193.166 26.386 193.166 26.6622V27.0784C193.166 27.3545 193.389 27.5784 193.666 27.5784H195.614V33.327C195.614 33.6032 195.838 33.827 196.114 33.827H196.633C196.909 33.827 197.133 33.6032 197.133 33.327V27.5784H199.081Z" fill="#161617"/>
+<path d="M206.766 33.827C207.042 33.827 207.266 33.6032 207.266 33.327V32.9216C207.266 32.6455 207.042 32.4216 206.766 32.4216H203.922V30.6486H206.449C206.725 30.6486 206.949 30.4248 206.949 30.1486V29.8189C206.949 29.5428 206.725 29.3189 206.449 29.3189H203.922V27.5676H206.766C207.042 27.5676 207.266 27.3437 207.266 27.0676V26.6622C207.266 26.386 207.042 26.1622 206.766 26.1622H202.913C202.637 26.1622 202.413 26.386 202.413 26.6622V33.327C202.413 33.6032 202.637 33.827 202.913 33.827H206.766Z" fill="#161617"/>
+<path d="M214.177 33.5559C214.263 33.7224 214.435 33.827 214.622 33.827H215.169C215.546 33.827 215.787 33.4259 215.611 33.0929L214.339 30.6919C215.355 30.4 215.989 29.5892 215.989 28.5189C215.989 27.1892 215.027 26.1622 213.519 26.1622H210.492V33.327C210.492 33.6032 210.715 33.827 210.992 33.827H211.511C211.787 33.827 212.011 33.6032 212.011 33.327V30.8757H212.798L214.177 33.5559ZM212.011 29.5892V27.4595H213.235C214 27.4595 214.448 27.8811 214.448 28.5297C214.448 29.1568 214 29.5892 213.235 29.5892H212.011Z" fill="#161617"/>
+<path d="M73.937 21V13.872H73.123C72.947 14.642 72.276 15.225 71.286 15.269V15.797H73.035V21H73.937ZM78.1258 20.34C77.5978 20.34 77.2128 20.142 76.9268 19.834C76.4538 19.339 76.2558 18.514 76.2558 17.436C76.2558 16.358 76.4538 15.533 76.9268 15.038C77.2128 14.73 77.5978 14.532 78.1258 14.532C78.6538 14.532 79.0388 14.73 79.3248 15.038C79.7978 15.533 79.9958 16.358 79.9958 17.436C79.9958 18.514 79.7978 19.339 79.3248 19.834C79.0388 20.142 78.6538 20.34 78.1258 20.34ZM78.1258 21.154C79.0938 21.154 79.7868 20.725 80.2378 20.065C80.7328 19.35 80.8978 18.404 80.8978 17.436C80.8978 16.468 80.7328 15.522 80.2378 14.807C79.7868 14.147 79.0938 13.718 78.1258 13.718C77.1578 13.718 76.4648 14.147 76.0138 14.807C75.5188 15.522 75.3538 16.468 75.3538 17.436C75.3538 18.404 75.5188 19.35 76.0138 20.065C76.4648 20.725 77.1578 21.154 78.1258 21.154ZM84.8611 20.34C84.3331 20.34 83.9481 20.142 83.6621 19.834C83.1891 19.339 82.9911 18.514 82.9911 17.436C82.9911 16.358 83.1891 15.533 83.6621 15.038C83.9481 14.73 84.3331 14.532 84.8611 14.532C85.3891 14.532 85.7741 14.73 86.0601 15.038C86.5331 15.533 86.7311 16.358 86.7311 17.436C86.7311 18.514 86.5331 19.339 86.0601 19.834C85.7741 20.142 85.3891 20.34 84.8611 20.34ZM84.8611 21.154C85.8291 21.154 86.5221 20.725 86.9731 20.065C87.4681 19.35 87.6331 18.404 87.6331 17.436C87.6331 16.468 87.4681 15.522 86.9731 14.807C86.5221 14.147 85.8291 13.718 84.8611 13.718C83.8931 13.718 83.2001 14.147 82.7491 14.807C82.2541 15.522 82.0891 16.468 82.0891 17.436C82.0891 18.404 82.2541 19.35 82.7491 20.065C83.2001 20.725 83.8931 21.154 84.8611 21.154ZM89.3635 15.478C89.3635 14.917 89.7815 14.499 90.3095 14.499C90.8595 14.499 91.2665 14.917 91.2665 15.478C91.2665 16.039 90.8595 16.457 90.3095 16.457C89.7815 16.457 89.3635 16.039 89.3635 15.478ZM88.5935 15.478C88.5935 16.435 89.3745 17.194 90.3095 17.194C91.2555 17.194 92.0475 16.435 92.0475 15.478C92.0475 14.521 91.2555 13.762 90.3095 13.762C89.3745 13.762 88.5935 14.521 88.5935 15.478ZM93.7195 19.339C93.7195 18.778 94.1375 18.36 94.6655 18.36C95.2155 18.36 95.6225 18.778 95.6225 19.339C95.6225 19.9 95.2155 20.318 94.6655 20.318C94.1375 20.318 93.7195 19.9 93.7195 19.339ZM92.9495 19.339C92.9495 20.296 93.7305 21.055 94.6655 21.055C95.6115 21.055 96.4035 20.296 96.4035 19.339C96.4035 18.382 95.6115 17.623 94.6655 17.623C93.7305 17.623 92.9495 18.382 92.9495 19.339ZM90.3425 21L95.4795 13.872H94.6325L89.4735 21H90.3425ZM102.709 15.577C101.191 15.577 100.069 16.743 100.069 18.36C100.069 19.988 101.191 21.154 102.709 21.154C104.227 21.154 105.349 19.988 105.349 18.36C105.349 16.743 104.227 15.577 102.709 15.577ZM102.709 16.369C103.655 16.369 104.469 17.084 104.469 18.36C104.469 19.647 103.655 20.362 102.709 20.362C101.763 20.362 100.949 19.647 100.949 18.36C100.949 17.084 101.763 16.369 102.709 16.369ZM107.586 17.898C107.586 17.073 108.059 16.369 108.906 16.369C109.863 16.369 110.215 16.985 110.215 17.755V21H111.095V17.623C111.095 16.479 110.479 15.577 109.214 15.577C108.521 15.577 107.905 15.907 107.564 16.523V15.731H106.706V21H107.586V17.898ZM115.57 18.228V17.458H112.633V18.228H115.57ZM119.423 16.369C120.369 16.369 120.798 17.018 120.941 17.579L121.733 17.238C121.513 16.402 120.776 15.577 119.423 15.577C117.938 15.577 116.816 16.721 116.816 18.36C116.816 19.966 117.916 21.154 119.434 21.154C120.787 21.154 121.524 20.296 121.777 19.515L121.007 19.174C120.853 19.658 120.435 20.362 119.434 20.362C118.499 20.362 117.696 19.625 117.696 18.36C117.696 17.084 118.499 16.369 119.423 16.369ZM123.914 17.854C123.914 17.04 124.398 16.369 125.234 16.369C126.191 16.369 126.543 16.985 126.543 17.755V21H127.423V17.623C127.423 16.479 126.807 15.577 125.542 15.577C124.86 15.577 124.255 15.885 123.914 16.435V13.047H123.034V21H123.914V17.854ZM128.697 19.603C128.697 20.406 129.346 21.154 130.435 21.154C131.381 21.154 131.953 20.637 132.184 20.208C132.184 20.615 132.228 20.879 132.25 21H133.108C133.075 20.835 133.042 20.56 133.042 20.12V17.458C133.042 16.435 132.415 15.577 130.919 15.577C129.786 15.577 128.906 16.259 128.796 17.26L129.632 17.458C129.709 16.787 130.171 16.325 130.941 16.325C131.766 16.325 132.162 16.776 132.162 17.37C132.162 17.601 132.074 17.766 131.689 17.821L130.27 18.03C129.346 18.162 128.697 18.679 128.697 19.603ZM130.545 20.406C129.94 20.406 129.577 19.988 129.577 19.559C129.577 19.042 129.94 18.756 130.446 18.679L132.162 18.426V18.778C132.162 19.9 131.458 20.406 130.545 20.406ZM135.58 21V15.731H134.7V21H135.58ZM134.48 13.652C134.48 14.015 134.777 14.312 135.14 14.312C135.503 14.312 135.8 14.015 135.8 13.652C135.8 13.289 135.503 12.992 135.14 12.992C134.777 12.992 134.48 13.289 134.48 13.652ZM138.179 17.898C138.179 17.073 138.652 16.369 139.499 16.369C140.456 16.369 140.808 16.985 140.808 17.755V21H141.688V17.623C141.688 16.479 141.072 15.577 139.807 15.577C139.114 15.577 138.498 15.907 138.157 16.523V15.731H137.299V21H138.179V17.898Z" fill="black"/>
+<defs>
+<linearGradient id="paint0_linear_1810_46" x1="33.5294" y1="7.20588" x2="47.888" y2="74.0171" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED1E79"/>
+<stop offset="1" stop-color="#522785"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1810_46" x1="44.7958" y1="13.6484" x2="62.2866" y2="31.4386" gradientUnits="userSpaceOnUse">
+<stop offset="0.21" stop-color="#F15A24"/>
+<stop offset="0.6841" stop-color="#FBB03B"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1810_46" x1="31.2044" y1="35.3515" x2="13.7136" y2="17.5614" gradientUnits="userSpaceOnUse">
+<stop offset="0.21" stop-color="#ED1E79"/>
+<stop offset="0.8929" stop-color="#522785"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/svelte.config.js b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/svelte.config.js
new file mode 100644
index 0000000000..0d8c6762d0
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/svelte.config.js
@@ -0,0 +1,19 @@
+import adapter from '@sveltejs/adapter-static';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  kit: {
+    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
+    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+    adapter: adapter({
+      pages: 'dist',
+      assets: 'dist',
+      fallback: undefined,
+      precompress: false,
+      strict: true,
+    }),
+  },
+};
+
+export default config;
diff --git a/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/tsconfig.json b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/tsconfig.json
new file mode 100644
index 0000000000..efe61e1a02
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}
diff --git a/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/vite.config.js b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/vite.config.js
new file mode 100644
index 0000000000..51010df640
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte/src/__project_name___frontend/vite.config.js
@@ -0,0 +1,43 @@
+import { fileURLToPath, URL } from 'url';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import environment from 'vite-plugin-environment';
+import dotenv from 'dotenv';
+
+dotenv.config({ path: '../../.env' });
+
+export default defineConfig({
+  build: {
+    emptyOutDir: true,
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      define: {
+        global: "globalThis",
+      },
+    },
+  },
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://127.0.0.1:4943",
+        changeOrigin: true,
+      },
+    },
+  },
+  plugins: [
+    sveltekit(),
+    environment("all", { prefix: "CANISTER_" }),
+    environment("all", { prefix: "DFX_" }),
+  ],
+  resolve: {
+    alias: [
+      {
+        find: "declarations",
+        replacement: fileURLToPath(
+          new URL("../declarations", import.meta.url)
+        ),
+      },
+    ],
+  },
+});
diff --git a/src/dfx/assets/project_templates/svelte_tests/src/__project_name___frontend/package.json-patch b/src/dfx/assets/project_templates/svelte_tests/src/__project_name___frontend/package.json-patch
new file mode 100644
index 0000000000..b6d3f53c0c
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte_tests/src/__project_name___frontend/package.json-patch
@@ -0,0 +1,27 @@
+[
+    {
+        "op": "add",
+        "path": "/devDependencies/@testing-library~1jest-dom",
+        "value": "^5.16.5"
+    },
+    {
+        "op": "add",
+        "path": "/devDependencies/cross-fetch",
+        "value": "^3.1.6"
+    },
+    {
+        "op": "add",
+        "path": "/devDependencies/jsdom",
+        "value": "^22.1.0"
+    },
+    {
+        "op": "add",
+        "path": "/devDependencies/vitest",
+        "value": "^0.32.2"
+    },
+    {
+        "op": "add",
+        "path": "/scripts/test",
+        "value": "vitest run"
+    }
+]
\ No newline at end of file
diff --git a/src/dfx/assets/project_templates/svelte_tests/src/__project_name___frontend/src/setupTests.js b/src/dfx/assets/project_templates/svelte_tests/src/__project_name___frontend/src/setupTests.js
new file mode 100644
index 0000000000..c29162e04f
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte_tests/src/__project_name___frontend/src/setupTests.js
@@ -0,0 +1,5 @@
+import matchers from '@testing-library/jest-dom/matchers';
+import 'cross-fetch/polyfill';
+import { expect } from 'vitest';
+
+expect.extend(matchers);
diff --git a/src/dfx/assets/project_templates/svelte_tests/src/__project_name___frontend/src/tests/App.test.js b/src/dfx/assets/project_templates/svelte_tests/src/__project_name___frontend/src/tests/App.test.js
new file mode 100644
index 0000000000..0d5b86dc99
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte_tests/src/__project_name___frontend/src/tests/App.test.js
@@ -0,0 +1,19 @@
+import { test, expect, afterEach } from 'vitest';
+import App from '../routes/+page.svelte';
+
+let host;
+
+afterEach(() => {
+  host.remove();
+});
+
+test('mount component', async () => {
+  host = document.createElement('div');
+  host.setAttribute('id', 'host');
+  document.body.appendChild(host);
+  const instance = new App({ target: host, props: {} });
+  expect(instance).toBeTruthy();
+  expect(host.innerHTML).toMatchInlineSnapshot(
+    '"<main><img src=\\"/logo2.svg\\" alt=\\"DFINITY logo\\"> <br> <br> <form action=\\"#\\"><label for=\\"name\\">Enter your name: &nbsp;</label> <input id=\\"name\\" alt=\\"Name\\" type=\\"text\\"> <button type=\\"submit\\">Click Me!</button></form> <section id=\\"greeting\\"></section></main><!--<+page>-->"',
+  );
+});
diff --git a/src/dfx/assets/project_templates/svelte_tests/src/__project_name___frontend/tsconfig.json-patch b/src/dfx/assets/project_templates/svelte_tests/src/__project_name___frontend/tsconfig.json-patch
new file mode 100644
index 0000000000..b1501d3f56
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte_tests/src/__project_name___frontend/tsconfig.json-patch
@@ -0,0 +1,7 @@
+[
+    {
+        "op": "add",
+        "path": "/compilerOptions/types/-",
+        "value": "@testing-library/jest-dom"
+    }
+]
diff --git a/src/dfx/assets/project_templates/svelte_tests/src/__project_name___frontend/vite.config.js.patch b/src/dfx/assets/project_templates/svelte_tests/src/__project_name___frontend/vite.config.js.patch
new file mode 100644
index 0000000000..c2f6c8f6d3
--- /dev/null
+++ b/src/dfx/assets/project_templates/svelte_tests/src/__project_name___frontend/vite.config.js.patch
@@ -0,0 +1,11 @@
+--- a/src/{project_name}_frontend/vite.config.js
++++ b/src/{project_name}_frontend/vite.config.js
+@@ -1,1 +1,2 @@
++/// <reference types="vitest" />
+ import { fileURLToPath, URL } from 'url';
+@@ -33,1 +33,5 @@
++  test: {
++    environment: 'jsdom',
++    setupFiles: 'src/setupTests.js',
++  },
+   resolve: {
diff --git a/src/dfx/assets/project_templates/vanilla_js/dfx.json-patch b/src/dfx/assets/project_templates/vanilla_js/dfx.json-patch
new file mode 100644
index 0000000000..fa6e3bd3ed
--- /dev/null
+++ b/src/dfx/assets/project_templates/vanilla_js/dfx.json-patch
@@ -0,0 +1,16 @@
+[
+    {
+        "op": "add",
+        "path": "/canisters/{project_name}_frontend",
+        "value": {
+            "type": "assets",
+            "source": [
+                "src/{project_name}_frontend/dist"
+            ],
+            "dependencies": [
+                "{project_name}_backend"
+            ],
+            "workspace": "{project_name}_frontend"
+        }
+    }
+]
diff --git a/src/dfx/assets/project_templates/vanilla_js/package.json-patch b/src/dfx/assets/project_templates/vanilla_js/package.json-patch
new file mode 100644
index 0000000000..c74a9e93c7
--- /dev/null
+++ b/src/dfx/assets/project_templates/vanilla_js/package.json-patch
@@ -0,0 +1,7 @@
+[
+    {
+        "op": "add",
+        "path": "/workspaces/-",
+        "value": "src/{project_name}_frontend"
+    }
+]
diff --git a/src/dfx/assets/new_project_node_files/src/__project_name___frontend/assets/.ic-assets.json5 b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/assets/.ic-assets.json5
similarity index 96%
rename from src/dfx/assets/new_project_node_files/src/__project_name___frontend/assets/.ic-assets.json5
rename to src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/assets/.ic-assets.json5
index b58d2e1fc6..394b81c66e 100644
--- a/src/dfx/assets/new_project_node_files/src/__project_name___frontend/assets/.ic-assets.json5
+++ b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/assets/.ic-assets.json5
@@ -50,8 +50,7 @@
             // See: https://owasp.org/www-community/attacks/xss/
             "X-XSS-Protection": "1; mode=block"
         },
-        // Set the allow_raw_access field to false to redirect all requests from .raw.icp0.io to .icp0.io
-        // The default behavior is to allow raw access.
-        // "allow_raw_access": true
+        // Uncomment to redirect all requests from .raw.icp0.io to .icp0.io
+        // "allow_raw_access": false
     },
 ]
diff --git a/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/assets/favicon.ico b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/assets/favicon.ico
new file mode 100644
index 0000000000..338fbf34cd
Binary files /dev/null and b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/assets/favicon.ico differ
diff --git a/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/index.html b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/index.html
new file mode 100644
index 0000000000..6c1db68a54
--- /dev/null
+++ b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>IC Hello Starter</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/package.json b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/package.json
new file mode 100644
index 0000000000..9c7a8d6c8d
--- /dev/null
+++ b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "{project_name}_frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "setup": "npm i && dfx canister create {project_name}_backend && dfx generate {project_name}_backend && dfx deploy",
+    "start": "vite --port 3000",
+    "prebuild": "dfx generate",
+    "build": "tsc && vite build",
+    "format": "prettier --write \"src/**/*.{json,js,jsx,ts,tsx,css,scss}\""
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "cross-fetch": "^3.1.6",
+    "dotenv": "^16.3.1",
+    "sass": "^1.63.6",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9",
+    "vite-plugin-environment": "^1.1.3",
+    "vitest": "^0.32.2"
+  },
+  "dependencies": {
+    "@dfinity/agent": "^0.20.0",
+    "@dfinity/candid": "^0.20.0",
+    "@dfinity/principal": "^0.20.0",
+    "lit-html": "^2.8.0"
+  }
+}
diff --git a/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/src/App.js b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/src/App.js
new file mode 100644
index 0000000000..1cac8128fb
--- /dev/null
+++ b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/src/App.js
@@ -0,0 +1,40 @@
+import { html, render } from 'lit-html';
+import { {project_name}_backend } from 'declarations/{project_name}_backend';
+import logo from './logo2.svg';
+
+class App {
+  greeting = '';
+
+  constructor() {
+    this.#render();
+  }
+
+  #handleSubmit = async (e) => {
+    e.preventDefault();
+    const name = document.getElementById('name').value;
+    this.greeting = await {project_name}_backend.greet(name);
+    this.#render();
+  };
+
+  #render() {
+    let body = html`
+      <main>
+        <img src="${logo}" alt="DFINITY logo" />
+        <br />
+        <br />
+        <form action="#">
+          <label for="name">Enter your name: &nbsp;</label>
+          <input id="name" alt="Name" type="text" />
+          <button type="submit">Click Me!</button>
+        </form>
+        <section id="greeting">${this.greeting}</section>
+      </main>
+    `;
+    render(body, document.getElementById('root'));
+    document
+      .querySelector('form')
+      .addEventListener('submit', this.#handleSubmit);
+  }
+}
+
+export default App;
diff --git a/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/src/index.scss b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/src/index.scss
new file mode 100644
index 0000000000..c1c320834c
--- /dev/null
+++ b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/src/index.scss
@@ -0,0 +1,37 @@
+body {
+  font-family: sans-serif;
+  font-size: 1.5rem;
+}
+
+img {
+  max-width: 50vw;
+  max-height: 25vw;
+  display: block;
+  margin: auto;
+}
+
+form {
+  display: flex;
+  justify-content: center;
+  gap: 0.5em;
+  flex-flow: row wrap;
+  max-width: 40vw;
+  margin: auto;
+  align-items: baseline;
+}
+
+button[type="submit"] {
+  padding: 5px 20px;
+  margin: 10px auto;
+  float: right;
+}
+
+#greeting {
+  margin: 10px auto;
+  padding: 10px 60px;
+  border: 1px solid #222;
+}
+
+#greeting:empty {
+  display: none;
+}
diff --git a/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/src/logo2.svg b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/src/logo2.svg
new file mode 100644
index 0000000000..74bc67e39d
--- /dev/null
+++ b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/src/logo2.svg
@@ -0,0 +1,37 @@
+<svg width="684" height="147" viewBox="0 0 228 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="227" height="48" rx="3.5" fill="white" stroke="url(#paint0_linear_1810_46)"/>
+<path d="M51.3703 12C48.4634 12 45.2947 13.5165 41.9454 16.5037C40.3565 17.9191 38.9842 19.4357 37.9551 20.6489C37.9551 20.6489 37.9551 20.6489 37.9641 20.6581V20.6489C37.9641 20.6489 39.5891 22.4504 41.3856 24.3805C42.3516 23.2133 43.7419 21.6232 45.3398 20.1894C48.319 17.5331 50.2599 16.9724 51.3703 16.9724C55.5502 16.9724 58.9446 20.3456 58.9446 24.4908C58.9446 28.6085 55.5412 31.9816 51.3703 32.0092C51.1808 32.0092 50.937 31.9816 50.6301 31.9173C51.8488 32.4504 53.1578 32.8364 54.4037 32.8364C62.0592 32.8364 63.5578 27.7537 63.6571 27.3861C63.8828 26.4577 64.0002 25.4835 64.0002 24.4816C64.0002 17.6066 58.3307 12 51.3703 12Z" fill="url(#paint1_linear_1810_46)"/>
+<path d="M24.6298 36.9999C27.5368 36.9999 30.7055 35.4834 34.0548 32.4962C35.6437 31.0808 37.0159 29.5642 38.0451 28.351C38.0451 28.351 38.0451 28.351 38.0361 28.3418V28.351C38.0361 28.351 36.4111 26.5495 34.6145 24.6194C33.6486 25.7867 32.2583 27.3767 30.6604 28.8106C27.6812 31.4668 25.7403 32.0275 24.6298 32.0275C20.45 32.0183 17.0555 28.6451 17.0555 24.4999C17.0555 20.3822 20.459 17.0091 24.6298 16.9815C24.8194 16.9815 25.0632 17.0091 25.3701 17.0734C24.1514 16.5403 22.8423 16.1543 21.5965 16.1543C13.941 16.1543 12.4514 21.237 12.3431 21.5955C12.1174 22.533 12 23.4981 12 24.4999C12 31.3933 17.6694 36.9999 24.6298 36.9999Z" fill="url(#paint2_linear_1810_46)"/>
+<path d="M54.3856 32.7261C50.4675 32.625 46.396 29.4816 45.5654 28.7004C43.4168 26.6783 38.4606 21.2096 38.0724 20.7776C34.4432 16.6324 29.5231 12 24.63 12H24.621H24.612C18.6717 12.0276 13.6794 16.1268 12.3433 21.5956C12.4426 21.2371 14.4016 16.0533 21.5877 16.2371C25.5057 16.3382 29.5953 19.5276 30.4349 20.3088C32.5835 22.3309 37.5398 27.7997 37.9279 28.2316C41.5571 32.3677 46.4772 37 51.3703 37H51.3793H51.3883C57.3286 36.9725 62.33 32.8732 63.6571 27.4044C63.5487 27.7629 61.5807 32.9008 54.3856 32.7261Z" fill="#29ABE2"/>
+<path d="M73.0301 33.827C73.3063 33.827 73.5301 33.6032 73.5301 33.327V26.6622C73.5301 26.386 73.3063 26.1622 73.0301 26.1622H72.5C72.2239 26.1622 72 26.386 72 26.6622V33.327C72 33.6032 72.2239 33.827 72.5 33.827H73.0301Z" fill="#161617"/>
+<path d="M83.2018 33.827C83.478 33.827 83.7018 33.6032 83.7018 33.327V26.6622C83.7018 26.386 83.478 26.1622 83.2018 26.1622H82.6936C82.4174 26.1622 82.1936 26.386 82.1936 26.6622V31.2324L79.264 26.6256C79.0805 26.337 78.7622 26.1622 78.4202 26.1622H77.5895C77.3133 26.1622 77.0895 26.386 77.0895 26.6622V33.327C77.0895 33.6032 77.3133 33.827 77.5895 33.827H78.0978C78.3739 33.827 78.5978 33.6032 78.5978 33.327V28.3892L81.9693 33.5987C82.0614 33.7411 82.2195 33.827 82.389 33.827H83.2018Z" fill="#161617"/>
+<path d="M92.4535 27.5784C92.7297 27.5784 92.9535 27.3545 92.9535 27.0784V26.6622C92.9535 26.386 92.7297 26.1622 92.4535 26.1622H87.0379C86.7617 26.1622 86.5379 26.386 86.5379 26.6622V27.0784C86.5379 27.3545 86.7617 27.5784 87.0379 27.5784H88.9861V33.327C88.9861 33.6032 89.21 33.827 89.4861 33.827H90.0053C90.2814 33.827 90.5053 33.6032 90.5053 33.327V27.5784H92.4535Z" fill="#161617"/>
+<path d="M100.138 33.827C100.415 33.827 100.638 33.6032 100.638 33.327V32.9216C100.638 32.6455 100.415 32.4216 100.138 32.4216H97.2941V30.6486H99.8215C100.098 30.6486 100.322 30.4248 100.322 30.1486V29.8189C100.322 29.5428 100.098 29.3189 99.8215 29.3189H97.2941V27.5676H100.138C100.415 27.5676 100.638 27.3437 100.638 27.0676V26.6622C100.638 26.386 100.415 26.1622 100.138 26.1622H96.2858C96.0096 26.1622 95.7858 26.386 95.7858 26.6622V33.327C95.7858 33.6032 96.0096 33.827 96.2858 33.827H100.138Z" fill="#161617"/>
+<path d="M107.55 33.5559C107.635 33.7224 107.807 33.827 107.994 33.827H108.541C108.918 33.827 109.16 33.4259 108.983 33.0929L107.711 30.6919C108.727 30.4 109.361 29.5892 109.361 28.5189C109.361 27.1892 108.4 26.1622 106.891 26.1622H104.364C104.088 26.1622 103.864 26.386 103.864 26.6622V33.327C103.864 33.6032 104.088 33.827 104.364 33.827H104.883C105.159 33.827 105.383 33.6032 105.383 33.327V30.8757H106.17L107.55 33.5559ZM105.383 29.5892V27.4595H106.607C107.372 27.4595 107.82 27.8811 107.82 28.5297C107.82 29.1568 107.372 29.5892 106.607 29.5892H105.383Z" fill="#161617"/>
+<path d="M118.609 33.827C118.885 33.827 119.109 33.6032 119.109 33.327V26.6622C119.109 26.386 118.885 26.1622 118.609 26.1622H118.101C117.825 26.1622 117.601 26.386 117.601 26.6622V31.2324L114.671 26.6256C114.488 26.337 114.17 26.1622 113.828 26.1622H112.997C112.721 26.1622 112.497 26.386 112.497 26.6622V33.327C112.497 33.6032 112.721 33.827 112.997 33.827H113.505C113.781 33.827 114.005 33.6032 114.005 33.327V28.3892L117.377 33.5987C117.469 33.7411 117.627 33.827 117.796 33.827H118.609Z" fill="#161617"/>
+<path d="M127.03 33.827C127.306 33.827 127.53 33.6032 127.53 33.327V32.9216C127.53 32.6455 127.306 32.4216 127.03 32.4216H124.186V30.6486H126.713C126.989 30.6486 127.213 30.4248 127.213 30.1486V29.8189C127.213 29.5428 126.989 29.3189 126.713 29.3189H124.186V27.5676H127.03C127.306 27.5676 127.53 27.3437 127.53 27.0676V26.6622C127.53 26.386 127.306 26.1622 127.03 26.1622H123.178C122.901 26.1622 122.678 26.386 122.678 26.6622V33.327C122.678 33.6032 122.901 33.827 123.178 33.827H127.03Z" fill="#161617"/>
+<path d="M135.939 27.5784C136.215 27.5784 136.439 27.3545 136.439 27.0784V26.6622C136.439 26.386 136.215 26.1622 135.939 26.1622H130.523C130.247 26.1622 130.023 26.386 130.023 26.6622V27.0784C130.023 27.3545 130.247 27.5784 130.523 27.5784H132.471V33.327C132.471 33.6032 132.695 33.827 132.971 33.827H133.491C133.767 33.827 133.991 33.6032 133.991 33.327V27.5784H135.939Z" fill="#161617"/>
+<path d="M146.823 33.9892C148.998 33.9892 150.113 32.5622 150.408 31.3838L148.998 30.9622C148.79 31.6757 148.146 32.5297 146.823 32.5297C145.577 32.5297 144.419 31.6324 144.419 30C144.419 28.2595 145.643 27.4378 146.801 27.4378C148.146 27.4378 148.747 28.2486 148.932 28.9838L150.353 28.5405C150.047 27.2973 148.943 26 146.801 26C144.725 26 142.856 27.5568 142.856 30C142.856 32.4432 144.659 33.9892 146.823 33.9892Z" fill="#161617"/>
+<path d="M154.428 29.9892C154.428 28.2595 155.653 27.4378 156.844 27.4378C158.046 27.4378 159.27 28.2595 159.27 29.9892C159.27 31.7189 158.046 32.5405 156.844 32.5405C155.653 32.5405 154.428 31.7189 154.428 29.9892ZM152.866 30C152.866 32.4649 154.745 33.9892 156.844 33.9892C158.953 33.9892 160.833 32.4649 160.833 30C160.833 27.5243 158.953 26 156.844 26C154.745 26 152.866 27.5243 152.866 30Z" fill="#161617"/>
+<path d="M172.077 33.827C172.354 33.827 172.577 33.6032 172.577 33.327V26.6622C172.577 26.386 172.354 26.1622 172.077 26.1622H170.858C170.655 26.1622 170.472 26.2846 170.395 26.4722L168.249 31.6973L166.05 26.4683C165.972 26.2828 165.79 26.1622 165.589 26.1622H164.432C164.156 26.1622 163.932 26.386 163.932 26.6622V33.327C163.932 33.6032 164.156 33.827 164.432 33.827H164.875C165.151 33.827 165.375 33.6032 165.375 33.327V28.4973L167.476 33.52C167.554 33.706 167.736 33.827 167.937 33.827H168.528C168.73 33.827 168.912 33.7053 168.989 33.5187L171.091 28.4541V33.327C171.091 33.6032 171.315 33.827 171.591 33.827H172.077Z" fill="#161617"/>
+<path d="M177.66 29.6541V27.4595H178.851C179.605 27.4595 180.065 27.8811 180.065 28.5622C180.065 29.2216 179.605 29.6541 178.851 29.6541H177.66ZM179.037 30.9405C180.567 30.9405 181.584 29.9459 181.584 28.5514C181.584 27.1676 180.567 26.1622 179.037 26.1622H176.641C176.365 26.1622 176.141 26.386 176.141 26.6622V33.327C176.141 33.6032 176.365 33.827 176.641 33.827H177.149C177.425 33.827 177.649 33.6032 177.649 33.327V30.9405H179.037Z" fill="#161617"/>
+<path d="M187.414 34C189.076 34 190.398 32.9946 190.398 31.1135V26.6622C190.398 26.386 190.174 26.1622 189.898 26.1622H189.39C189.114 26.1622 188.89 26.386 188.89 26.6622V31.0054C188.89 32.0108 188.332 32.5405 187.414 32.5405C186.518 32.5405 185.95 32.0108 185.95 31.0054V26.6622C185.95 26.386 185.726 26.1622 185.45 26.1622H184.941C184.665 26.1622 184.441 26.386 184.441 26.6622V31.1135C184.441 32.9946 185.764 34 187.414 34Z" fill="#161617"/>
+<path d="M199.081 27.5784C199.357 27.5784 199.581 27.3545 199.581 27.0784V26.6622C199.581 26.386 199.357 26.1622 199.081 26.1622H193.666C193.389 26.1622 193.166 26.386 193.166 26.6622V27.0784C193.166 27.3545 193.389 27.5784 193.666 27.5784H195.614V33.327C195.614 33.6032 195.838 33.827 196.114 33.827H196.633C196.909 33.827 197.133 33.6032 197.133 33.327V27.5784H199.081Z" fill="#161617"/>
+<path d="M206.766 33.827C207.042 33.827 207.266 33.6032 207.266 33.327V32.9216C207.266 32.6455 207.042 32.4216 206.766 32.4216H203.922V30.6486H206.449C206.725 30.6486 206.949 30.4248 206.949 30.1486V29.8189C206.949 29.5428 206.725 29.3189 206.449 29.3189H203.922V27.5676H206.766C207.042 27.5676 207.266 27.3437 207.266 27.0676V26.6622C207.266 26.386 207.042 26.1622 206.766 26.1622H202.913C202.637 26.1622 202.413 26.386 202.413 26.6622V33.327C202.413 33.6032 202.637 33.827 202.913 33.827H206.766Z" fill="#161617"/>
+<path d="M214.177 33.5559C214.263 33.7224 214.435 33.827 214.622 33.827H215.169C215.546 33.827 215.787 33.4259 215.611 33.0929L214.339 30.6919C215.355 30.4 215.989 29.5892 215.989 28.5189C215.989 27.1892 215.027 26.1622 213.519 26.1622H210.492V33.327C210.492 33.6032 210.715 33.827 210.992 33.827H211.511C211.787 33.827 212.011 33.6032 212.011 33.327V30.8757H212.798L214.177 33.5559ZM212.011 29.5892V27.4595H213.235C214 27.4595 214.448 27.8811 214.448 28.5297C214.448 29.1568 214 29.5892 213.235 29.5892H212.011Z" fill="#161617"/>
+<path d="M73.937 21V13.872H73.123C72.947 14.642 72.276 15.225 71.286 15.269V15.797H73.035V21H73.937ZM78.1258 20.34C77.5978 20.34 77.2128 20.142 76.9268 19.834C76.4538 19.339 76.2558 18.514 76.2558 17.436C76.2558 16.358 76.4538 15.533 76.9268 15.038C77.2128 14.73 77.5978 14.532 78.1258 14.532C78.6538 14.532 79.0388 14.73 79.3248 15.038C79.7978 15.533 79.9958 16.358 79.9958 17.436C79.9958 18.514 79.7978 19.339 79.3248 19.834C79.0388 20.142 78.6538 20.34 78.1258 20.34ZM78.1258 21.154C79.0938 21.154 79.7868 20.725 80.2378 20.065C80.7328 19.35 80.8978 18.404 80.8978 17.436C80.8978 16.468 80.7328 15.522 80.2378 14.807C79.7868 14.147 79.0938 13.718 78.1258 13.718C77.1578 13.718 76.4648 14.147 76.0138 14.807C75.5188 15.522 75.3538 16.468 75.3538 17.436C75.3538 18.404 75.5188 19.35 76.0138 20.065C76.4648 20.725 77.1578 21.154 78.1258 21.154ZM84.8611 20.34C84.3331 20.34 83.9481 20.142 83.6621 19.834C83.1891 19.339 82.9911 18.514 82.9911 17.436C82.9911 16.358 83.1891 15.533 83.6621 15.038C83.9481 14.73 84.3331 14.532 84.8611 14.532C85.3891 14.532 85.7741 14.73 86.0601 15.038C86.5331 15.533 86.7311 16.358 86.7311 17.436C86.7311 18.514 86.5331 19.339 86.0601 19.834C85.7741 20.142 85.3891 20.34 84.8611 20.34ZM84.8611 21.154C85.8291 21.154 86.5221 20.725 86.9731 20.065C87.4681 19.35 87.6331 18.404 87.6331 17.436C87.6331 16.468 87.4681 15.522 86.9731 14.807C86.5221 14.147 85.8291 13.718 84.8611 13.718C83.8931 13.718 83.2001 14.147 82.7491 14.807C82.2541 15.522 82.0891 16.468 82.0891 17.436C82.0891 18.404 82.2541 19.35 82.7491 20.065C83.2001 20.725 83.8931 21.154 84.8611 21.154ZM89.3635 15.478C89.3635 14.917 89.7815 14.499 90.3095 14.499C90.8595 14.499 91.2665 14.917 91.2665 15.478C91.2665 16.039 90.8595 16.457 90.3095 16.457C89.7815 16.457 89.3635 16.039 89.3635 15.478ZM88.5935 15.478C88.5935 16.435 89.3745 17.194 90.3095 17.194C91.2555 17.194 92.0475 16.435 92.0475 15.478C92.0475 14.521 91.2555 13.762 90.3095 13.762C89.3745 13.762 88.5935 14.521 88.5935 15.478ZM93.7195 19.339C93.7195 18.778 94.1375 18.36 94.6655 18.36C95.2155 18.36 95.6225 18.778 95.6225 19.339C95.6225 19.9 95.2155 20.318 94.6655 20.318C94.1375 20.318 93.7195 19.9 93.7195 19.339ZM92.9495 19.339C92.9495 20.296 93.7305 21.055 94.6655 21.055C95.6115 21.055 96.4035 20.296 96.4035 19.339C96.4035 18.382 95.6115 17.623 94.6655 17.623C93.7305 17.623 92.9495 18.382 92.9495 19.339ZM90.3425 21L95.4795 13.872H94.6325L89.4735 21H90.3425ZM102.709 15.577C101.191 15.577 100.069 16.743 100.069 18.36C100.069 19.988 101.191 21.154 102.709 21.154C104.227 21.154 105.349 19.988 105.349 18.36C105.349 16.743 104.227 15.577 102.709 15.577ZM102.709 16.369C103.655 16.369 104.469 17.084 104.469 18.36C104.469 19.647 103.655 20.362 102.709 20.362C101.763 20.362 100.949 19.647 100.949 18.36C100.949 17.084 101.763 16.369 102.709 16.369ZM107.586 17.898C107.586 17.073 108.059 16.369 108.906 16.369C109.863 16.369 110.215 16.985 110.215 17.755V21H111.095V17.623C111.095 16.479 110.479 15.577 109.214 15.577C108.521 15.577 107.905 15.907 107.564 16.523V15.731H106.706V21H107.586V17.898ZM115.57 18.228V17.458H112.633V18.228H115.57ZM119.423 16.369C120.369 16.369 120.798 17.018 120.941 17.579L121.733 17.238C121.513 16.402 120.776 15.577 119.423 15.577C117.938 15.577 116.816 16.721 116.816 18.36C116.816 19.966 117.916 21.154 119.434 21.154C120.787 21.154 121.524 20.296 121.777 19.515L121.007 19.174C120.853 19.658 120.435 20.362 119.434 20.362C118.499 20.362 117.696 19.625 117.696 18.36C117.696 17.084 118.499 16.369 119.423 16.369ZM123.914 17.854C123.914 17.04 124.398 16.369 125.234 16.369C126.191 16.369 126.543 16.985 126.543 17.755V21H127.423V17.623C127.423 16.479 126.807 15.577 125.542 15.577C124.86 15.577 124.255 15.885 123.914 16.435V13.047H123.034V21H123.914V17.854ZM128.697 19.603C128.697 20.406 129.346 21.154 130.435 21.154C131.381 21.154 131.953 20.637 132.184 20.208C132.184 20.615 132.228 20.879 132.25 21H133.108C133.075 20.835 133.042 20.56 133.042 20.12V17.458C133.042 16.435 132.415 15.577 130.919 15.577C129.786 15.577 128.906 16.259 128.796 17.26L129.632 17.458C129.709 16.787 130.171 16.325 130.941 16.325C131.766 16.325 132.162 16.776 132.162 17.37C132.162 17.601 132.074 17.766 131.689 17.821L130.27 18.03C129.346 18.162 128.697 18.679 128.697 19.603ZM130.545 20.406C129.94 20.406 129.577 19.988 129.577 19.559C129.577 19.042 129.94 18.756 130.446 18.679L132.162 18.426V18.778C132.162 19.9 131.458 20.406 130.545 20.406ZM135.58 21V15.731H134.7V21H135.58ZM134.48 13.652C134.48 14.015 134.777 14.312 135.14 14.312C135.503 14.312 135.8 14.015 135.8 13.652C135.8 13.289 135.503 12.992 135.14 12.992C134.777 12.992 134.48 13.289 134.48 13.652ZM138.179 17.898C138.179 17.073 138.652 16.369 139.499 16.369C140.456 16.369 140.808 16.985 140.808 17.755V21H141.688V17.623C141.688 16.479 141.072 15.577 139.807 15.577C139.114 15.577 138.498 15.907 138.157 16.523V15.731H137.299V21H138.179V17.898Z" fill="black"/>
+<defs>
+<linearGradient id="paint0_linear_1810_46" x1="33.5294" y1="7.20588" x2="47.888" y2="74.0171" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED1E79"/>
+<stop offset="1" stop-color="#522785"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1810_46" x1="44.7958" y1="13.6484" x2="62.2866" y2="31.4386" gradientUnits="userSpaceOnUse">
+<stop offset="0.21" stop-color="#F15A24"/>
+<stop offset="0.6841" stop-color="#FBB03B"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1810_46" x1="31.2044" y1="35.3515" x2="13.7136" y2="17.5614" gradientUnits="userSpaceOnUse">
+<stop offset="0.21" stop-color="#ED1E79"/>
+<stop offset="0.8929" stop-color="#522785"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/src/main.js b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/src/main.js
new file mode 100644
index 0000000000..16c07d59d0
--- /dev/null
+++ b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/src/main.js
@@ -0,0 +1,4 @@
+import App from './App';
+import './index.scss';
+
+const app = new App();
diff --git a/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/src/vite-env.d.ts b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/tsconfig.json b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/tsconfig.json
new file mode 100644
index 0000000000..39a545e919
--- /dev/null
+++ b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}
diff --git a/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/vite.config.js b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/vite.config.js
new file mode 100644
index 0000000000..18ceb500c7
--- /dev/null
+++ b/src/dfx/assets/project_templates/vanilla_js/src/__project_name___frontend/vite.config.js
@@ -0,0 +1,42 @@
+import { defineConfig } from 'vite';
+import { fileURLToPath, URL } from 'url';
+import environment from 'vite-plugin-environment';
+import dotenv from 'dotenv';
+
+dotenv.config({ path: '../../.env' });
+
+export default defineConfig({
+  build: {
+    emptyOutDir: true,
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      define: {
+        global: "globalThis",
+      },
+    },
+  },
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://127.0.0.1:4943",
+        changeOrigin: true,
+      },
+    },
+  },
+  publicDir: "assets",
+  plugins: [
+    environment("all", { prefix: "CANISTER_" }),
+    environment("all", { prefix: "DFX_" }),
+  ],
+  resolve: {
+    alias: [
+      {
+        find: "declarations",
+        replacement: fileURLToPath(
+          new URL("../declarations", import.meta.url)
+        ),
+      },
+    ],
+  },
+});
diff --git a/src/dfx/assets/project_templates/vanilla_js_tests/src/__project_name___frontend/package.json-patch b/src/dfx/assets/project_templates/vanilla_js_tests/src/__project_name___frontend/package.json-patch
new file mode 100644
index 0000000000..b24159f32b
--- /dev/null
+++ b/src/dfx/assets/project_templates/vanilla_js_tests/src/__project_name___frontend/package.json-patch
@@ -0,0 +1,27 @@
+[
+    {
+        "op": "add",
+        "path": "/devDependencies/@testing-library~1jest-dom",
+        "value": "^5.16.5"
+    },
+    {
+        "op": "add",
+        "path": "/devDependencies/cross-fetch",
+        "value": "^3.1.6"
+    },
+    {
+        "op": "add",
+        "path": "/devDependencies/jsdom",
+        "value": "^22.1.0"
+    },
+    {
+        "op": "add",
+        "path": "/devDependencies/vitest",
+        "value": "^0.32.2"
+    },
+    {
+        "op": "add",
+        "path": "/scripts/test",
+        "value": "vitest run"
+    }
+]
diff --git a/src/dfx/assets/project_templates/vanilla_js_tests/src/__project_name___frontend/src/setupTests.js b/src/dfx/assets/project_templates/vanilla_js_tests/src/__project_name___frontend/src/setupTests.js
new file mode 100644
index 0000000000..c29162e04f
--- /dev/null
+++ b/src/dfx/assets/project_templates/vanilla_js_tests/src/__project_name___frontend/src/setupTests.js
@@ -0,0 +1,5 @@
+import matchers from '@testing-library/jest-dom/matchers';
+import 'cross-fetch/polyfill';
+import { expect } from 'vitest';
+
+expect.extend(matchers);
diff --git a/src/dfx/assets/project_templates/vanilla_js_tests/src/__project_name___frontend/src/tests/App.test.js b/src/dfx/assets/project_templates/vanilla_js_tests/src/__project_name___frontend/src/tests/App.test.js
new file mode 100644
index 0000000000..14502a8907
--- /dev/null
+++ b/src/dfx/assets/project_templates/vanilla_js_tests/src/__project_name___frontend/src/tests/App.test.js
@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest';
+import App from '../App';
+
+describe('App', () => {
+  it('renders as expected', () => {
+    const root = document.createElement('div');
+    root.id = 'root';
+    document.body.appendChild(root);
+    new App();
+
+    expect(root.querySelector('main')).toBeTruthy();
+  });
+});
diff --git a/src/dfx/assets/project_templates/vanilla_js_tests/src/__project_name___frontend/tsconfig.json-patch b/src/dfx/assets/project_templates/vanilla_js_tests/src/__project_name___frontend/tsconfig.json-patch
new file mode 100644
index 0000000000..b1501d3f56
--- /dev/null
+++ b/src/dfx/assets/project_templates/vanilla_js_tests/src/__project_name___frontend/tsconfig.json-patch
@@ -0,0 +1,7 @@
+[
+    {
+        "op": "add",
+        "path": "/compilerOptions/types/-",
+        "value": "@testing-library/jest-dom"
+    }
+]
diff --git a/src/dfx/assets/project_templates/vanilla_js_tests/src/__project_name___frontend/vite.config.js.patch b/src/dfx/assets/project_templates/vanilla_js_tests/src/__project_name___frontend/vite.config.js.patch
new file mode 100644
index 0000000000..dce9050f78
--- /dev/null
+++ b/src/dfx/assets/project_templates/vanilla_js_tests/src/__project_name___frontend/vite.config.js.patch
@@ -0,0 +1,11 @@
+--- a/src/{project_name}_frontend/vite.config.js
++++ b/src/{project_name}_frontend/vite.config.js
+@@ -1,1 +1,2 @@
++/// <reference types="vitest" />
+ import { defineConfig } from 'vite';
+@@ -32,1 +32,5 @@
++  test: {
++    environment: 'jsdom',
++    setupFiles: 'src/setupTests.js',
++  },
+   resolve: {
diff --git a/src/dfx/assets/project_templates/vue/dfx.json-patch b/src/dfx/assets/project_templates/vue/dfx.json-patch
new file mode 100644
index 0000000000..a608dc8351
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue/dfx.json-patch
@@ -0,0 +1,16 @@
+[
+    {
+        "op": "add",
+        "path": "/canisters/{project_name}_frontend",
+        "value": {
+            "type": "assets",
+            "dependencies": [
+                "{project_name}_backend"
+            ],
+            "source": [
+                "src/{project_name}_frontend/dist"
+            ],
+            "workspace": "{project_name}_frontend"
+        }
+    }
+]
diff --git a/src/dfx/assets/project_templates/vue/package.json-patch b/src/dfx/assets/project_templates/vue/package.json-patch
new file mode 100644
index 0000000000..c74a9e93c7
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue/package.json-patch
@@ -0,0 +1,7 @@
+[
+    {
+        "op": "add",
+        "path": "/workspaces/-",
+        "value": "src/{project_name}_frontend"
+    }
+]
diff --git a/src/dfx/assets/project_templates/vue/src/__project_name___frontend/index.html b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/index.html
new file mode 100644
index 0000000000..6e80f94528
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <link rel="icon" href="/favicon.ico" />
+  <title>IC Hello Starter</title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but this application doesn't work properly without
+      JavaScript enabled. Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <script src="/src/main.js" type="module"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/dfx/assets/project_templates/vue/src/__project_name___frontend/package.json b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/package.json
new file mode 100644
index 0000000000..8f7ebedadb
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "{project_name}_frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "setup": "npm i && dfx canister create {project_name}_backend && dfx generate {project_name}_backend && dfx deploy",
+    "start": "vite --port 3000",
+    "prebuild": "dfx generate",
+    "build": "tsc && vite build",
+    "format": "prettier --write \"src/**/*.{json,js,jsx,ts,tsx,css,scss}\""
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/tsconfig": "^0.4.0",
+    "dotenv": "^16.3.1",
+    "prettier": "^2.8.8",
+    "sass": "^1.63.6",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9",
+    "vite-plugin-environment": "^1.1.3"
+  },
+  "dependencies": {
+    "pinia": "^2.1.6",
+    "vue": "^3.3.4",
+    "@dfinity/agent": "^0.20.0",
+    "@dfinity/candid": "^0.20.0",
+    "@dfinity/principal": "^0.20.0"
+  }
+}
diff --git a/src/dfx/assets/project_templates/vue/src/__project_name___frontend/public/.ic-assets.json5 b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/public/.ic-assets.json5
new file mode 100644
index 0000000000..394b81c66e
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/public/.ic-assets.json5
@@ -0,0 +1,56 @@
+[
+    {
+        "match": "**/*",
+        "headers": {
+            // Security: The Content Security Policy (CSP) given below aims at working with many apps rather than providing maximal security.
+            // We recommend tightening the CSP for your specific application. Some recommendations are as follows:
+            // - Use the CSP Evaluator (https://csp-evaluator.withgoogle.com/) to validate the CSP you define.
+            // - Follow the “Strict CSP” recommendations (https://csp.withgoogle.com/docs/strict-csp.html). However, note that in the context of the IC,
+            //   nonces cannot be used because the response bodies must be static to work well with HTTP asset certification.
+            //   Thus, we recommend to include script hashes (in combination with strict-dynamic) in the CSP as described
+            //   in https://csp.withgoogle.com/docs/faq.html in section “What if my site is static and I can't add nonces to scripts?”.
+            //   See for example the II CSP (https://github.com/dfinity/internet-identity/blob/main/src/internet_identity/src/http.rs).
+            // - It is recommended to tighten the connect-src directive. With the current CSP configuration the browser can
+            //   make requests to https://*.icp0.io, hence being able to call any canister via https://icp0.io/api/v2/canister/{canister-ID}.
+            //   This could potentially be used in combination with another vulnerability (e.g. XSS) to exfiltrate private data.
+            //   The developer can configure this policy to only allow requests to their specific canisters,
+            //   e.g: connect-src 'self' https://icp-api.io/api/v2/canister/{my-canister-ID}, where {my-canister-ID} has the following format: aaaaa-aaaaa-aaaaa-aaaaa-aaa
+            // - It is recommended to configure style-src, style-src-elem and font-src directives with the resources your canister is going to use
+            //   instead of using the wild card (*) option. Normally this will include 'self' but also other third party styles or fonts resources (e.g: https://fonts.googleapis.com or other CDNs)
+
+            // Notes about the CSP below:
+            // - script-src 'unsafe-eval' is currently required because agent-js uses a WebAssembly module for the validation of bls signatures.
+            //   There is currently no other way to allow execution of WebAssembly modules with CSP.
+            //   See: https://github.com/WebAssembly/content-security-policy/blob/main/proposals/CSP.md.
+            // - We added img-src data: because data: images are used often.
+            // - frame-ancestors: none mitigates clickjacking attacks. See https://owasp.org/www-community/attacks/Clickjacking.
+            "Content-Security-Policy": "default-src 'self';script-src 'self' 'unsafe-eval';connect-src 'self' http://localhost:* https://icp0.io https://*.icp0.io https://icp-api.io;img-src 'self' data:;style-src * 'unsafe-inline';style-src-elem * 'unsafe-inline';font-src *;object-src 'none';base-uri 'self';frame-ancestors 'none';form-action 'self';upgrade-insecure-requests;",
+
+            // Security: The permissions policy disables all features for security reasons. If your site needs such permissions, activate them.
+            // To configure permissions go here https://www.permissionspolicy.com/
+            "Permissions-Policy": "accelerometer=(), ambient-light-sensor=(), autoplay=(), battery=(), camera=(), cross-origin-isolated=(), display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), fullscreen=(), geolocation=(), gyroscope=(), keyboard-map=(), magnetometer=(), microphone=(), midi=(), navigation-override=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(), xr-spatial-tracking=(), clipboard-read=(), clipboard-write=(), gamepad=(), speaker-selection=(), conversion-measurement=(), focus-without-user-activation=(), hid=(), idle-detection=(), interest-cohort=(), serial=(), sync-script=(), trust-token-redemption=(), window-placement=(), vertical-scroll=()",
+
+            // Security: Mitigates clickjacking attacks.
+            // See: https://owasp.org/www-community/attacks/Clickjacking.
+            "X-Frame-Options": "DENY",
+
+            // Security: Avoids forwarding referrer information to other origins.
+            // See: https://owasp.org/www-project-secure-headers/#referrer-policy.
+            "Referrer-Policy": "same-origin",
+
+            // Security: Tells the user’s browser that it must always use HTTPS with your site.
+            // See: https://owasp.org/www-project-secure-headers/#http-strict-transport-security
+            "Strict-Transport-Security": "max-age=31536000; includeSubDomains",
+
+            // Security: Prevents the browser from interpreting files as a different MIME type to what is specified in the Content-Type header.
+            // See: https://owasp.org/www-project-secure-headers/#x-content-type-options
+            "X-Content-Type-Options": "nosniff",
+
+            // Security: Enables browser features to mitigate some of the XSS attacks. Note that it has to be in mode=block.
+            // See: https://owasp.org/www-community/attacks/xss/
+            "X-XSS-Protection": "1; mode=block"
+        },
+        // Uncomment to redirect all requests from .raw.icp0.io to .icp0.io
+        // "allow_raw_access": false
+    },
+]
diff --git a/src/dfx/assets/project_templates/vue/src/__project_name___frontend/public/favicon.ico b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/public/favicon.ico
new file mode 100644
index 0000000000..338fbf34cd
Binary files /dev/null and b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/public/favicon.ico differ
diff --git a/src/dfx/assets/project_templates/vue/src/__project_name___frontend/public/logo2.svg b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/public/logo2.svg
new file mode 100644
index 0000000000..74bc67e39d
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/public/logo2.svg
@@ -0,0 +1,37 @@
+<svg width="684" height="147" viewBox="0 0 228 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="227" height="48" rx="3.5" fill="white" stroke="url(#paint0_linear_1810_46)"/>
+<path d="M51.3703 12C48.4634 12 45.2947 13.5165 41.9454 16.5037C40.3565 17.9191 38.9842 19.4357 37.9551 20.6489C37.9551 20.6489 37.9551 20.6489 37.9641 20.6581V20.6489C37.9641 20.6489 39.5891 22.4504 41.3856 24.3805C42.3516 23.2133 43.7419 21.6232 45.3398 20.1894C48.319 17.5331 50.2599 16.9724 51.3703 16.9724C55.5502 16.9724 58.9446 20.3456 58.9446 24.4908C58.9446 28.6085 55.5412 31.9816 51.3703 32.0092C51.1808 32.0092 50.937 31.9816 50.6301 31.9173C51.8488 32.4504 53.1578 32.8364 54.4037 32.8364C62.0592 32.8364 63.5578 27.7537 63.6571 27.3861C63.8828 26.4577 64.0002 25.4835 64.0002 24.4816C64.0002 17.6066 58.3307 12 51.3703 12Z" fill="url(#paint1_linear_1810_46)"/>
+<path d="M24.6298 36.9999C27.5368 36.9999 30.7055 35.4834 34.0548 32.4962C35.6437 31.0808 37.0159 29.5642 38.0451 28.351C38.0451 28.351 38.0451 28.351 38.0361 28.3418V28.351C38.0361 28.351 36.4111 26.5495 34.6145 24.6194C33.6486 25.7867 32.2583 27.3767 30.6604 28.8106C27.6812 31.4668 25.7403 32.0275 24.6298 32.0275C20.45 32.0183 17.0555 28.6451 17.0555 24.4999C17.0555 20.3822 20.459 17.0091 24.6298 16.9815C24.8194 16.9815 25.0632 17.0091 25.3701 17.0734C24.1514 16.5403 22.8423 16.1543 21.5965 16.1543C13.941 16.1543 12.4514 21.237 12.3431 21.5955C12.1174 22.533 12 23.4981 12 24.4999C12 31.3933 17.6694 36.9999 24.6298 36.9999Z" fill="url(#paint2_linear_1810_46)"/>
+<path d="M54.3856 32.7261C50.4675 32.625 46.396 29.4816 45.5654 28.7004C43.4168 26.6783 38.4606 21.2096 38.0724 20.7776C34.4432 16.6324 29.5231 12 24.63 12H24.621H24.612C18.6717 12.0276 13.6794 16.1268 12.3433 21.5956C12.4426 21.2371 14.4016 16.0533 21.5877 16.2371C25.5057 16.3382 29.5953 19.5276 30.4349 20.3088C32.5835 22.3309 37.5398 27.7997 37.9279 28.2316C41.5571 32.3677 46.4772 37 51.3703 37H51.3793H51.3883C57.3286 36.9725 62.33 32.8732 63.6571 27.4044C63.5487 27.7629 61.5807 32.9008 54.3856 32.7261Z" fill="#29ABE2"/>
+<path d="M73.0301 33.827C73.3063 33.827 73.5301 33.6032 73.5301 33.327V26.6622C73.5301 26.386 73.3063 26.1622 73.0301 26.1622H72.5C72.2239 26.1622 72 26.386 72 26.6622V33.327C72 33.6032 72.2239 33.827 72.5 33.827H73.0301Z" fill="#161617"/>
+<path d="M83.2018 33.827C83.478 33.827 83.7018 33.6032 83.7018 33.327V26.6622C83.7018 26.386 83.478 26.1622 83.2018 26.1622H82.6936C82.4174 26.1622 82.1936 26.386 82.1936 26.6622V31.2324L79.264 26.6256C79.0805 26.337 78.7622 26.1622 78.4202 26.1622H77.5895C77.3133 26.1622 77.0895 26.386 77.0895 26.6622V33.327C77.0895 33.6032 77.3133 33.827 77.5895 33.827H78.0978C78.3739 33.827 78.5978 33.6032 78.5978 33.327V28.3892L81.9693 33.5987C82.0614 33.7411 82.2195 33.827 82.389 33.827H83.2018Z" fill="#161617"/>
+<path d="M92.4535 27.5784C92.7297 27.5784 92.9535 27.3545 92.9535 27.0784V26.6622C92.9535 26.386 92.7297 26.1622 92.4535 26.1622H87.0379C86.7617 26.1622 86.5379 26.386 86.5379 26.6622V27.0784C86.5379 27.3545 86.7617 27.5784 87.0379 27.5784H88.9861V33.327C88.9861 33.6032 89.21 33.827 89.4861 33.827H90.0053C90.2814 33.827 90.5053 33.6032 90.5053 33.327V27.5784H92.4535Z" fill="#161617"/>
+<path d="M100.138 33.827C100.415 33.827 100.638 33.6032 100.638 33.327V32.9216C100.638 32.6455 100.415 32.4216 100.138 32.4216H97.2941V30.6486H99.8215C100.098 30.6486 100.322 30.4248 100.322 30.1486V29.8189C100.322 29.5428 100.098 29.3189 99.8215 29.3189H97.2941V27.5676H100.138C100.415 27.5676 100.638 27.3437 100.638 27.0676V26.6622C100.638 26.386 100.415 26.1622 100.138 26.1622H96.2858C96.0096 26.1622 95.7858 26.386 95.7858 26.6622V33.327C95.7858 33.6032 96.0096 33.827 96.2858 33.827H100.138Z" fill="#161617"/>
+<path d="M107.55 33.5559C107.635 33.7224 107.807 33.827 107.994 33.827H108.541C108.918 33.827 109.16 33.4259 108.983 33.0929L107.711 30.6919C108.727 30.4 109.361 29.5892 109.361 28.5189C109.361 27.1892 108.4 26.1622 106.891 26.1622H104.364C104.088 26.1622 103.864 26.386 103.864 26.6622V33.327C103.864 33.6032 104.088 33.827 104.364 33.827H104.883C105.159 33.827 105.383 33.6032 105.383 33.327V30.8757H106.17L107.55 33.5559ZM105.383 29.5892V27.4595H106.607C107.372 27.4595 107.82 27.8811 107.82 28.5297C107.82 29.1568 107.372 29.5892 106.607 29.5892H105.383Z" fill="#161617"/>
+<path d="M118.609 33.827C118.885 33.827 119.109 33.6032 119.109 33.327V26.6622C119.109 26.386 118.885 26.1622 118.609 26.1622H118.101C117.825 26.1622 117.601 26.386 117.601 26.6622V31.2324L114.671 26.6256C114.488 26.337 114.17 26.1622 113.828 26.1622H112.997C112.721 26.1622 112.497 26.386 112.497 26.6622V33.327C112.497 33.6032 112.721 33.827 112.997 33.827H113.505C113.781 33.827 114.005 33.6032 114.005 33.327V28.3892L117.377 33.5987C117.469 33.7411 117.627 33.827 117.796 33.827H118.609Z" fill="#161617"/>
+<path d="M127.03 33.827C127.306 33.827 127.53 33.6032 127.53 33.327V32.9216C127.53 32.6455 127.306 32.4216 127.03 32.4216H124.186V30.6486H126.713C126.989 30.6486 127.213 30.4248 127.213 30.1486V29.8189C127.213 29.5428 126.989 29.3189 126.713 29.3189H124.186V27.5676H127.03C127.306 27.5676 127.53 27.3437 127.53 27.0676V26.6622C127.53 26.386 127.306 26.1622 127.03 26.1622H123.178C122.901 26.1622 122.678 26.386 122.678 26.6622V33.327C122.678 33.6032 122.901 33.827 123.178 33.827H127.03Z" fill="#161617"/>
+<path d="M135.939 27.5784C136.215 27.5784 136.439 27.3545 136.439 27.0784V26.6622C136.439 26.386 136.215 26.1622 135.939 26.1622H130.523C130.247 26.1622 130.023 26.386 130.023 26.6622V27.0784C130.023 27.3545 130.247 27.5784 130.523 27.5784H132.471V33.327C132.471 33.6032 132.695 33.827 132.971 33.827H133.491C133.767 33.827 133.991 33.6032 133.991 33.327V27.5784H135.939Z" fill="#161617"/>
+<path d="M146.823 33.9892C148.998 33.9892 150.113 32.5622 150.408 31.3838L148.998 30.9622C148.79 31.6757 148.146 32.5297 146.823 32.5297C145.577 32.5297 144.419 31.6324 144.419 30C144.419 28.2595 145.643 27.4378 146.801 27.4378C148.146 27.4378 148.747 28.2486 148.932 28.9838L150.353 28.5405C150.047 27.2973 148.943 26 146.801 26C144.725 26 142.856 27.5568 142.856 30C142.856 32.4432 144.659 33.9892 146.823 33.9892Z" fill="#161617"/>
+<path d="M154.428 29.9892C154.428 28.2595 155.653 27.4378 156.844 27.4378C158.046 27.4378 159.27 28.2595 159.27 29.9892C159.27 31.7189 158.046 32.5405 156.844 32.5405C155.653 32.5405 154.428 31.7189 154.428 29.9892ZM152.866 30C152.866 32.4649 154.745 33.9892 156.844 33.9892C158.953 33.9892 160.833 32.4649 160.833 30C160.833 27.5243 158.953 26 156.844 26C154.745 26 152.866 27.5243 152.866 30Z" fill="#161617"/>
+<path d="M172.077 33.827C172.354 33.827 172.577 33.6032 172.577 33.327V26.6622C172.577 26.386 172.354 26.1622 172.077 26.1622H170.858C170.655 26.1622 170.472 26.2846 170.395 26.4722L168.249 31.6973L166.05 26.4683C165.972 26.2828 165.79 26.1622 165.589 26.1622H164.432C164.156 26.1622 163.932 26.386 163.932 26.6622V33.327C163.932 33.6032 164.156 33.827 164.432 33.827H164.875C165.151 33.827 165.375 33.6032 165.375 33.327V28.4973L167.476 33.52C167.554 33.706 167.736 33.827 167.937 33.827H168.528C168.73 33.827 168.912 33.7053 168.989 33.5187L171.091 28.4541V33.327C171.091 33.6032 171.315 33.827 171.591 33.827H172.077Z" fill="#161617"/>
+<path d="M177.66 29.6541V27.4595H178.851C179.605 27.4595 180.065 27.8811 180.065 28.5622C180.065 29.2216 179.605 29.6541 178.851 29.6541H177.66ZM179.037 30.9405C180.567 30.9405 181.584 29.9459 181.584 28.5514C181.584 27.1676 180.567 26.1622 179.037 26.1622H176.641C176.365 26.1622 176.141 26.386 176.141 26.6622V33.327C176.141 33.6032 176.365 33.827 176.641 33.827H177.149C177.425 33.827 177.649 33.6032 177.649 33.327V30.9405H179.037Z" fill="#161617"/>
+<path d="M187.414 34C189.076 34 190.398 32.9946 190.398 31.1135V26.6622C190.398 26.386 190.174 26.1622 189.898 26.1622H189.39C189.114 26.1622 188.89 26.386 188.89 26.6622V31.0054C188.89 32.0108 188.332 32.5405 187.414 32.5405C186.518 32.5405 185.95 32.0108 185.95 31.0054V26.6622C185.95 26.386 185.726 26.1622 185.45 26.1622H184.941C184.665 26.1622 184.441 26.386 184.441 26.6622V31.1135C184.441 32.9946 185.764 34 187.414 34Z" fill="#161617"/>
+<path d="M199.081 27.5784C199.357 27.5784 199.581 27.3545 199.581 27.0784V26.6622C199.581 26.386 199.357 26.1622 199.081 26.1622H193.666C193.389 26.1622 193.166 26.386 193.166 26.6622V27.0784C193.166 27.3545 193.389 27.5784 193.666 27.5784H195.614V33.327C195.614 33.6032 195.838 33.827 196.114 33.827H196.633C196.909 33.827 197.133 33.6032 197.133 33.327V27.5784H199.081Z" fill="#161617"/>
+<path d="M206.766 33.827C207.042 33.827 207.266 33.6032 207.266 33.327V32.9216C207.266 32.6455 207.042 32.4216 206.766 32.4216H203.922V30.6486H206.449C206.725 30.6486 206.949 30.4248 206.949 30.1486V29.8189C206.949 29.5428 206.725 29.3189 206.449 29.3189H203.922V27.5676H206.766C207.042 27.5676 207.266 27.3437 207.266 27.0676V26.6622C207.266 26.386 207.042 26.1622 206.766 26.1622H202.913C202.637 26.1622 202.413 26.386 202.413 26.6622V33.327C202.413 33.6032 202.637 33.827 202.913 33.827H206.766Z" fill="#161617"/>
+<path d="M214.177 33.5559C214.263 33.7224 214.435 33.827 214.622 33.827H215.169C215.546 33.827 215.787 33.4259 215.611 33.0929L214.339 30.6919C215.355 30.4 215.989 29.5892 215.989 28.5189C215.989 27.1892 215.027 26.1622 213.519 26.1622H210.492V33.327C210.492 33.6032 210.715 33.827 210.992 33.827H211.511C211.787 33.827 212.011 33.6032 212.011 33.327V30.8757H212.798L214.177 33.5559ZM212.011 29.5892V27.4595H213.235C214 27.4595 214.448 27.8811 214.448 28.5297C214.448 29.1568 214 29.5892 213.235 29.5892H212.011Z" fill="#161617"/>
+<path d="M73.937 21V13.872H73.123C72.947 14.642 72.276 15.225 71.286 15.269V15.797H73.035V21H73.937ZM78.1258 20.34C77.5978 20.34 77.2128 20.142 76.9268 19.834C76.4538 19.339 76.2558 18.514 76.2558 17.436C76.2558 16.358 76.4538 15.533 76.9268 15.038C77.2128 14.73 77.5978 14.532 78.1258 14.532C78.6538 14.532 79.0388 14.73 79.3248 15.038C79.7978 15.533 79.9958 16.358 79.9958 17.436C79.9958 18.514 79.7978 19.339 79.3248 19.834C79.0388 20.142 78.6538 20.34 78.1258 20.34ZM78.1258 21.154C79.0938 21.154 79.7868 20.725 80.2378 20.065C80.7328 19.35 80.8978 18.404 80.8978 17.436C80.8978 16.468 80.7328 15.522 80.2378 14.807C79.7868 14.147 79.0938 13.718 78.1258 13.718C77.1578 13.718 76.4648 14.147 76.0138 14.807C75.5188 15.522 75.3538 16.468 75.3538 17.436C75.3538 18.404 75.5188 19.35 76.0138 20.065C76.4648 20.725 77.1578 21.154 78.1258 21.154ZM84.8611 20.34C84.3331 20.34 83.9481 20.142 83.6621 19.834C83.1891 19.339 82.9911 18.514 82.9911 17.436C82.9911 16.358 83.1891 15.533 83.6621 15.038C83.9481 14.73 84.3331 14.532 84.8611 14.532C85.3891 14.532 85.7741 14.73 86.0601 15.038C86.5331 15.533 86.7311 16.358 86.7311 17.436C86.7311 18.514 86.5331 19.339 86.0601 19.834C85.7741 20.142 85.3891 20.34 84.8611 20.34ZM84.8611 21.154C85.8291 21.154 86.5221 20.725 86.9731 20.065C87.4681 19.35 87.6331 18.404 87.6331 17.436C87.6331 16.468 87.4681 15.522 86.9731 14.807C86.5221 14.147 85.8291 13.718 84.8611 13.718C83.8931 13.718 83.2001 14.147 82.7491 14.807C82.2541 15.522 82.0891 16.468 82.0891 17.436C82.0891 18.404 82.2541 19.35 82.7491 20.065C83.2001 20.725 83.8931 21.154 84.8611 21.154ZM89.3635 15.478C89.3635 14.917 89.7815 14.499 90.3095 14.499C90.8595 14.499 91.2665 14.917 91.2665 15.478C91.2665 16.039 90.8595 16.457 90.3095 16.457C89.7815 16.457 89.3635 16.039 89.3635 15.478ZM88.5935 15.478C88.5935 16.435 89.3745 17.194 90.3095 17.194C91.2555 17.194 92.0475 16.435 92.0475 15.478C92.0475 14.521 91.2555 13.762 90.3095 13.762C89.3745 13.762 88.5935 14.521 88.5935 15.478ZM93.7195 19.339C93.7195 18.778 94.1375 18.36 94.6655 18.36C95.2155 18.36 95.6225 18.778 95.6225 19.339C95.6225 19.9 95.2155 20.318 94.6655 20.318C94.1375 20.318 93.7195 19.9 93.7195 19.339ZM92.9495 19.339C92.9495 20.296 93.7305 21.055 94.6655 21.055C95.6115 21.055 96.4035 20.296 96.4035 19.339C96.4035 18.382 95.6115 17.623 94.6655 17.623C93.7305 17.623 92.9495 18.382 92.9495 19.339ZM90.3425 21L95.4795 13.872H94.6325L89.4735 21H90.3425ZM102.709 15.577C101.191 15.577 100.069 16.743 100.069 18.36C100.069 19.988 101.191 21.154 102.709 21.154C104.227 21.154 105.349 19.988 105.349 18.36C105.349 16.743 104.227 15.577 102.709 15.577ZM102.709 16.369C103.655 16.369 104.469 17.084 104.469 18.36C104.469 19.647 103.655 20.362 102.709 20.362C101.763 20.362 100.949 19.647 100.949 18.36C100.949 17.084 101.763 16.369 102.709 16.369ZM107.586 17.898C107.586 17.073 108.059 16.369 108.906 16.369C109.863 16.369 110.215 16.985 110.215 17.755V21H111.095V17.623C111.095 16.479 110.479 15.577 109.214 15.577C108.521 15.577 107.905 15.907 107.564 16.523V15.731H106.706V21H107.586V17.898ZM115.57 18.228V17.458H112.633V18.228H115.57ZM119.423 16.369C120.369 16.369 120.798 17.018 120.941 17.579L121.733 17.238C121.513 16.402 120.776 15.577 119.423 15.577C117.938 15.577 116.816 16.721 116.816 18.36C116.816 19.966 117.916 21.154 119.434 21.154C120.787 21.154 121.524 20.296 121.777 19.515L121.007 19.174C120.853 19.658 120.435 20.362 119.434 20.362C118.499 20.362 117.696 19.625 117.696 18.36C117.696 17.084 118.499 16.369 119.423 16.369ZM123.914 17.854C123.914 17.04 124.398 16.369 125.234 16.369C126.191 16.369 126.543 16.985 126.543 17.755V21H127.423V17.623C127.423 16.479 126.807 15.577 125.542 15.577C124.86 15.577 124.255 15.885 123.914 16.435V13.047H123.034V21H123.914V17.854ZM128.697 19.603C128.697 20.406 129.346 21.154 130.435 21.154C131.381 21.154 131.953 20.637 132.184 20.208C132.184 20.615 132.228 20.879 132.25 21H133.108C133.075 20.835 133.042 20.56 133.042 20.12V17.458C133.042 16.435 132.415 15.577 130.919 15.577C129.786 15.577 128.906 16.259 128.796 17.26L129.632 17.458C129.709 16.787 130.171 16.325 130.941 16.325C131.766 16.325 132.162 16.776 132.162 17.37C132.162 17.601 132.074 17.766 131.689 17.821L130.27 18.03C129.346 18.162 128.697 18.679 128.697 19.603ZM130.545 20.406C129.94 20.406 129.577 19.988 129.577 19.559C129.577 19.042 129.94 18.756 130.446 18.679L132.162 18.426V18.778C132.162 19.9 131.458 20.406 130.545 20.406ZM135.58 21V15.731H134.7V21H135.58ZM134.48 13.652C134.48 14.015 134.777 14.312 135.14 14.312C135.503 14.312 135.8 14.015 135.8 13.652C135.8 13.289 135.503 12.992 135.14 12.992C134.777 12.992 134.48 13.289 134.48 13.652ZM138.179 17.898C138.179 17.073 138.652 16.369 139.499 16.369C140.456 16.369 140.808 16.985 140.808 17.755V21H141.688V17.623C141.688 16.479 141.072 15.577 139.807 15.577C139.114 15.577 138.498 15.907 138.157 16.523V15.731H137.299V21H138.179V17.898Z" fill="black"/>
+<defs>
+<linearGradient id="paint0_linear_1810_46" x1="33.5294" y1="7.20588" x2="47.888" y2="74.0171" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED1E79"/>
+<stop offset="1" stop-color="#522785"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1810_46" x1="44.7958" y1="13.6484" x2="62.2866" y2="31.4386" gradientUnits="userSpaceOnUse">
+<stop offset="0.21" stop-color="#F15A24"/>
+<stop offset="0.6841" stop-color="#FBB03B"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1810_46" x1="31.2044" y1="35.3515" x2="13.7136" y2="17.5614" gradientUnits="userSpaceOnUse">
+<stop offset="0.21" stop-color="#ED1E79"/>
+<stop offset="0.8929" stop-color="#522785"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/dfx/assets/project_templates/vue/src/__project_name___frontend/src/App.vue b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/src/App.vue
new file mode 100644
index 0000000000..72b5c2bb85
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/src/App.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { ref } from 'vue';
+import { {project_name}_backend } from 'declarations/{project_name}_backend/index';
+let greeting = ref('');
+
+async function handleSubmit(e) {
+  e.preventDefault();
+  const target = e.target;
+  const name = target.querySelector('#name').value;
+  await {project_name}_backend.greet(name).then((response) => {
+    greeting.value = response;
+  });
+}
+</script>
+
+<template>
+  <main>
+    <img src="/logo2.svg" alt="DFINITY logo" />
+    <br />
+    <br />
+    <form action="#" @submit="handleSubmit">
+      <label for="name">Enter your name: &nbsp;</label>
+      <input id="name" alt="Name" type="text" />
+      <button type="submit">Click Me!</button>
+    </form>
+    <section id="greeting">{{ greeting }}</section>
+  </main>
+</template>
diff --git a/src/dfx/assets/project_templates/vue/src/__project_name___frontend/src/index.scss b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/src/index.scss
new file mode 100644
index 0000000000..c1c320834c
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/src/index.scss
@@ -0,0 +1,37 @@
+body {
+  font-family: sans-serif;
+  font-size: 1.5rem;
+}
+
+img {
+  max-width: 50vw;
+  max-height: 25vw;
+  display: block;
+  margin: auto;
+}
+
+form {
+  display: flex;
+  justify-content: center;
+  gap: 0.5em;
+  flex-flow: row wrap;
+  max-width: 40vw;
+  margin: auto;
+  align-items: baseline;
+}
+
+button[type="submit"] {
+  padding: 5px 20px;
+  margin: 10px auto;
+  float: right;
+}
+
+#greeting {
+  margin: 10px auto;
+  padding: 10px 60px;
+  border: 1px solid #222;
+}
+
+#greeting:empty {
+  display: none;
+}
diff --git a/src/dfx/assets/project_templates/vue/src/__project_name___frontend/src/main.js b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/src/main.js
new file mode 100644
index 0000000000..e9655ff5f7
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/src/main.js
@@ -0,0 +1,6 @@
+import { createPinia } from 'pinia';
+import { createApp } from 'vue';
+import './index.scss';
+import App from './App.vue';
+
+createApp(App).use(createPinia()).mount('#app');
diff --git a/src/dfx/assets/project_templates/vue/src/__project_name___frontend/src/vite-env.d.ts b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/src/dfx/assets/project_templates/vue/src/__project_name___frontend/tsconfig.json b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/tsconfig.json
new file mode 100644
index 0000000000..6dc43ddca4
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}
diff --git a/src/dfx/assets/project_templates/vue/src/__project_name___frontend/vite.config.js b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/vite.config.js
new file mode 100644
index 0000000000..014c37999a
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue/src/__project_name___frontend/vite.config.js
@@ -0,0 +1,39 @@
+import { fileURLToPath, URL } from 'url';
+import { defineConfig } from 'vite';
+import environment from 'vite-plugin-environment';
+import vue from '@vitejs/plugin-vue';
+import dotenv from 'dotenv';
+
+dotenv.config({ path: '../../.env' });
+
+export default defineConfig({
+  build: {
+    emptyOutDir: true,
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      define: {
+        global: 'globalThis',
+      },
+    },
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:4943',
+        changeOrigin: true,
+      },
+    },
+  },
+  plugins: [
+    vue(),
+    environment('all', { prefix: 'CANISTER_' }),
+    environment('all', { prefix: 'DFX_' }),
+  ],
+  resolve: {
+    alias: [
+      { find: 'declarations', replacement: fileURLToPath(new URL('../declarations', import.meta.url)) },
+      { find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
+    ]
+  }
+});
diff --git a/src/dfx/assets/project_templates/vue_tests/src/__project_name___frontend/package.json-patch b/src/dfx/assets/project_templates/vue_tests/src/__project_name___frontend/package.json-patch
new file mode 100644
index 0000000000..897f6feefa
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue_tests/src/__project_name___frontend/package.json-patch
@@ -0,0 +1,32 @@
+[
+    {
+        "op": "add",
+        "path": "/devDependencies/@testing-library~1jest-dom",
+        "value": "^5.16.5"
+    },
+    {
+        "op": "add",
+        "path": "/devDependencies/@vue~1test-utils",
+        "value": "^2.4.1"
+    },
+    {
+        "op": "add",
+        "path": "/devDependencies/cross-fetch",
+        "value": "^3.1.6"
+    },
+    {
+        "op": "add",
+        "path": "/devDependencies/jsdom",
+        "value": "^22.1.0"
+    },
+    {
+        "op": "add",
+        "path": "/devDependencies/vitest",
+        "value": "^0.32.2"
+    },
+    {
+        "op": "add",
+        "path": "/scripts/test",
+        "value": "vitest run"
+    }
+]
diff --git a/src/dfx/assets/project_templates/vue_tests/src/__project_name___frontend/src/setupTests.js b/src/dfx/assets/project_templates/vue_tests/src/__project_name___frontend/src/setupTests.js
new file mode 100644
index 0000000000..c29162e04f
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue_tests/src/__project_name___frontend/src/setupTests.js
@@ -0,0 +1,5 @@
+import matchers from '@testing-library/jest-dom/matchers';
+import 'cross-fetch/polyfill';
+import { expect } from 'vitest';
+
+expect.extend(matchers);
diff --git a/src/dfx/assets/project_templates/vue_tests/src/__project_name___frontend/src/tests/App.test.js b/src/dfx/assets/project_templates/vue_tests/src/__project_name___frontend/src/tests/App.test.js
new file mode 100644
index 0000000000..539ec485b5
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue_tests/src/__project_name___frontend/src/tests/App.test.js
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+import App from '../App.vue';
+import { mount } from '@vue/test-utils';
+
+describe('App', () => {
+  it('renders as expected', () => {
+    const root = document.createElement('div');
+    root.id = 'root';
+    document.body.appendChild(root);
+    mount(App, { attachTo: root });
+
+    expect(root.querySelector('main')).toBeTruthy();
+  });
+});
diff --git a/src/dfx/assets/project_templates/vue_tests/src/__project_name___frontend/tsconfig.json-patch b/src/dfx/assets/project_templates/vue_tests/src/__project_name___frontend/tsconfig.json-patch
new file mode 100644
index 0000000000..b1501d3f56
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue_tests/src/__project_name___frontend/tsconfig.json-patch
@@ -0,0 +1,7 @@
+[
+    {
+        "op": "add",
+        "path": "/compilerOptions/types/-",
+        "value": "@testing-library/jest-dom"
+    }
+]
diff --git a/src/dfx/assets/project_templates/vue_tests/src/__project_name___frontend/vite.config.js.patch b/src/dfx/assets/project_templates/vue_tests/src/__project_name___frontend/vite.config.js.patch
new file mode 100644
index 0000000000..c2f6c8f6d3
--- /dev/null
+++ b/src/dfx/assets/project_templates/vue_tests/src/__project_name___frontend/vite.config.js.patch
@@ -0,0 +1,11 @@
+--- a/src/{project_name}_frontend/vite.config.js
++++ b/src/{project_name}_frontend/vite.config.js
+@@ -1,1 +1,2 @@
++/// <reference types="vitest" />
+ import { fileURLToPath, URL } from 'url';
+@@ -33,1 +33,5 @@
++  test: {
++    environment: 'jsdom',
++    setupFiles: 'src/setupTests.js',
++  },
+   resolve: {
diff --git a/src/dfx/src/commands/new.rs b/src/dfx/src/commands/new.rs
index 98569b85b2..4e1fbe04c8 100644
--- a/src/dfx/src/commands/new.rs
+++ b/src/dfx/src/commands/new.rs
@@ -1,22 +1,24 @@
 use crate::config::cache::DiskBasedCache;
 use crate::lib::environment::Environment;
 use crate::lib::error::{DfxError, DfxResult};
+use crate::lib::info::replica_rev;
 use crate::lib::manifest::{get_latest_version, is_upgrade_necessary};
 use crate::lib::program;
 use crate::util::assets;
 use crate::util::clap::parsers::project_name_parser;
 use anyhow::{anyhow, bail, ensure, Context};
-use clap::Parser;
+use clap::{Parser, ValueEnum};
 use console::{style, Style};
-use dfx_core::config::model::dfinity::CONFIG_FILE_NAME;
 use dfx_core::json::{load_json_file, save_json_file};
+use dialoguer::theme::ColorfulTheme;
+use dialoguer::{FuzzySelect, MultiSelect};
 use fn_error_context::context;
 use indicatif::HumanBytes;
 use semver::Version;
-use serde_json::Value;
 use slog::{info, warn, Logger};
 use std::collections::BTreeMap;
-use std::io::Read;
+use std::fmt::{self, Display, Formatter};
+use std::io::{self, IsTerminal, Read};
 use std::path::{Path, PathBuf};
 use std::process::{Command, Stdio};
 use std::time::Duration;
@@ -43,17 +45,17 @@ pub struct NewOpts {
     #[arg(value_parser = project_name_parser)]
     project_name: String,
 
-    /// Choose the type of canister in the starter project. Default to be motoko.
-    #[arg(long, value_parser = ["motoko", "rust"], default_value = "motoko")]
-    r#type: String,
+    /// Choose the type of canister in the starter project.
+    #[arg(long, value_enum)]
+    r#type: Option<BackendType>,
 
     /// Provides a preview the directories and files to be created without adding them to the file system.
     #[arg(long)]
     dry_run: bool,
 
-    /// Installs the frontend code example for the default canister. This defaults to true if Node is installed, or false if it isn't.
-    #[arg(long)]
-    frontend: bool,
+    /// Choose the type of frontend in the starter project. Defaults to vanilla.
+    #[arg(long, value_enum, default_missing_value = "vanilla")]
+    frontend: Option<FrontendType>,
 
     /// Skip installing the frontend code example.
     #[arg(long, conflicts_with = "frontend")]
@@ -63,6 +65,78 @@ pub struct NewOpts {
     /// NPM to decide.
     #[arg(long, requires("frontend"))]
     agent_version: Option<String>,
+
+    #[arg(long, value_enum)]
+    extras: Vec<Extra>,
+}
+
+#[derive(ValueEnum, Debug, Copy, Clone, PartialEq, Eq)]
+enum BackendType {
+    Motoko,
+    Rust,
+    Azle,
+    Kybra,
+}
+
+impl Display for BackendType {
+    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
+        match self {
+            Self::Motoko => "Motoko",
+            Self::Rust => "Rust",
+            Self::Azle => "TypeScript (Azle)",
+            Self::Kybra => "Python (Kybra)",
+        }
+        .fmt(f)
+    }
+}
+
+#[derive(ValueEnum, Debug, Copy, Clone, PartialEq, Eq)]
+enum FrontendType {
+    #[value(name = "sveltekit")]
+    SvelteKit,
+    Vanilla,
+    Vue,
+    React,
+    SimpleAssets,
+    None,
+}
+
+impl Display for FrontendType {
+    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
+        match self {
+            Self::SvelteKit => "SvelteKit",
+            Self::Vanilla => "Vanilla JS",
+            Self::Vue => "Vue",
+            Self::React => "React",
+            Self::SimpleAssets => "No JS template",
+            Self::None => "No frontend canister",
+        }
+        .fmt(f)
+    }
+}
+
+impl FrontendType {
+    fn has_js(&self) -> bool {
+        !matches!(self, Self::None | Self::SimpleAssets)
+    }
+}
+
+#[derive(ValueEnum, Debug, Copy, Clone, PartialEq, Eq)]
+enum Extra {
+    InternetIdentity,
+    Bitcoin,
+    FrontendTests,
+}
+
+impl Display for Extra {
+    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
+        match self {
+            Self::InternetIdentity => "Internet Identity",
+            Self::Bitcoin => "Bitcoin (Regtest)",
+            Self::FrontendTests => "Frontend tests",
+        }
+        .fmt(f)
+    }
 }
 
 enum Status<'a> {
@@ -250,6 +324,8 @@ fn npm_install(location: &Path) -> DfxResult<std::process::Child> {
         .arg("install")
         .arg("--quiet")
         .arg("--no-progress")
+        .arg("--workspaces")
+        .arg("--if-present")
         .stdout(Stdio::inherit())
         .stderr(Stdio::inherit())
         .current_dir(location)
@@ -262,8 +338,8 @@ fn scaffold_frontend_code(
     env: &dyn Environment,
     dry_run: bool,
     project_name: &Path,
-    arg_no_frontend: bool,
-    arg_frontend: bool,
+    frontend: FrontendType,
+    extras: &[Extra],
     agent_version: &Option<String>,
     variables: &BTreeMap<String, String>,
 ) -> DfxResult {
@@ -277,7 +353,7 @@ fn scaffold_frontend_code(
         .to_str()
         .ok_or_else(|| anyhow!("Invalid argument: project_name"))?;
 
-    if (node_installed && !arg_no_frontend) || arg_frontend {
+    if node_installed {
         // Check if node is available, and if it is create the files for the frontend build.
         let js_agent_version = if let Some(v) = agent_version {
             v.clone()
@@ -293,56 +369,37 @@ fn scaffold_frontend_code(
             project_name_str.to_uppercase(),
         );
 
-        let mut new_project_node_files = assets::new_project_node_files()?;
+        let mut new_project_files = match frontend {
+            FrontendType::Vanilla => assets::new_project_vanillajs_files(),
+            FrontendType::SvelteKit => assets::new_project_svelte_files(),
+            FrontendType::Vue => assets::new_project_vue_files(),
+            FrontendType::React => assets::new_project_react_files(),
+            FrontendType::SimpleAssets => assets::new_project_assets_files(),
+            FrontendType::None => unreachable!(),
+        }?;
         write_files_from_entries(
             log,
-            &mut new_project_node_files,
+            &mut new_project_files,
             project_name,
             dry_run,
             &variables,
         )?;
+        if extras.contains(&Extra::FrontendTests) {
+            let mut test_files = match frontend {
+                FrontendType::SvelteKit => assets::new_project_svelte_test_files(),
+                FrontendType::React => assets::new_project_react_test_files(),
+                FrontendType::Vue => assets::new_project_vue_test_files(),
+                FrontendType::Vanilla => assets::new_project_vanillajs_test_files(),
+                FrontendType::SimpleAssets => {
+                    bail!("Cannot add frontend tests to --frontend-type simple-assets")
+                }
+                FrontendType::None => bail!("Cannot add frontend tests to --no-frontend"),
+            }?;
+            write_files_from_entries(log, &mut test_files, project_name, dry_run, &variables)?;
+        }
 
-        let dfx_path = project_name.join(CONFIG_FILE_NAME);
-        let content =
-            std::fs::read(&dfx_path).with_context(|| format!("Failed to read {:?}.", &dfx_path))?;
-        let mut config_json: Value = serde_json::from_slice(&content)
-            .map_err(std::io::Error::from)
-            .with_context(|| format!("Failed to parse {}.", dfx_path.to_string_lossy()))?;
-
-        let frontend_value: serde_json::Map<String, Value> = [(
-            "entrypoint".to_string(),
-            ("src/".to_owned() + project_name_str + "_frontend/src/index.html").into(),
-        )]
-        .iter()
-        .cloned()
-        .collect();
-
-        // Only update the dfx.json and install node dependencies if we're not running in dry run.
-        if !dry_run {
-            let assets_canister_json = config_json
-                .pointer_mut(("/canisters/".to_owned() + project_name_str + "_frontend").as_str())
-                .unwrap();
-            assets_canister_json
-                .as_object_mut()
-                .unwrap()
-                .insert("frontend".to_string(), Value::from(frontend_value));
-
-            assets_canister_json
-                .as_object_mut()
-                .unwrap()
-                .get_mut("source")
-                .unwrap()
-                .as_array_mut()
-                .unwrap()
-                .push(Value::from(
-                    "dist/".to_owned() + project_name_str + "_frontend/",
-                ));
-
-            let pretty = serde_json::to_string_pretty(&config_json)
-                .context("Invalid data: Cannot serialize configuration file.")?;
-            std::fs::write(&dfx_path, pretty)
-                .with_context(|| format!("Failed to write to {}.", dfx_path.to_string_lossy()))?;
-
+        // Only install node dependencies if we're not running in dry run.
+        if !dry_run && frontend != FrontendType::SimpleAssets {
             // Install node modules. Error is not blocking, we just show a message instead.
             if node_installed {
                 let b = env.new_spinner("Installing node dependencies...".into());
@@ -357,7 +414,7 @@ fn scaffold_frontend_code(
             }
         }
     } else {
-        if !arg_frontend && !node_installed {
+        if !node_installed {
             warn!(
                 log,
                 "Node could not be found. Skipping installing the frontend example code."
@@ -369,7 +426,7 @@ fn scaffold_frontend_code(
         }
         write_files_from_entries(
             log,
-            &mut assets::new_project_no_frontend_files()?,
+            &mut assets::new_project_assets_files()?,
             project_name,
             dry_run,
             variables,
@@ -399,11 +456,21 @@ fn get_agent_js_version_from_npm(dist_tag: &str) -> DfxResult<String> {
         })
 }
 
-pub fn exec(env: &dyn Environment, opts: NewOpts) -> DfxResult {
+pub fn exec(env: &dyn Environment, mut opts: NewOpts) -> DfxResult {
+    use BackendType::*;
     let log = env.get_logger();
     let dry_run = opts.dry_run;
-    let project_name = Path::new(opts.project_name.as_str());
 
+    let r#type = if let Some(r#type) = opts.r#type {
+        r#type
+    } else if opts.frontend.is_none() && opts.extras.is_empty() && io::stdout().is_terminal() {
+        opts = get_opts_interactively(opts)?;
+        opts.r#type.unwrap()
+    } else {
+        Motoko
+    };
+
+    let project_name = Path::new(opts.project_name.as_str());
     if project_name.exists() {
         bail!("Cannot create a new project because the directory already exists.");
     }
@@ -441,6 +508,7 @@ pub fn exec(env: &dyn Environment, opts: NewOpts) -> DfxResult {
         ("project_name".to_string(), project_name_str.to_string()),
         ("dfx_version".to_string(), version_str.clone()),
         ("dot".to_string(), ".".to_string()),
+        ("ic_commit".to_string(), replica_rev().to_string()),
     ]
     .iter()
     .cloned()
@@ -454,11 +522,28 @@ pub fn exec(env: &dyn Environment, opts: NewOpts) -> DfxResult {
         &variables,
     )?;
 
+    let frontend = if opts.no_frontend {
+        FrontendType::None
+    } else {
+        opts.frontend.unwrap_or(FrontendType::Vanilla)
+    };
+
+    if r#type == Azle || frontend.has_js() {
+        write_files_from_entries(
+            log,
+            &mut assets::new_project_js_files().context("Failed to get JS config archive.")?,
+            project_name,
+            dry_run,
+            &variables,
+        )?;
+    }
+
     // Default to start with motoko
-    let mut new_project_files = match opts.r#type.as_str() {
-        "rust" => assets::new_project_rust_files().context("Failed to get rust archive.")?,
-        "motoko" => assets::new_project_motoko_files().context("Failed to get motoko archive.")?,
-        t => bail!("Unsupported canister type: {}", t),
+    let mut new_project_files = match r#type {
+        Rust => assets::new_project_rust_files().context("Failed to get rust archive.")?,
+        Motoko => assets::new_project_motoko_files().context("Failed to get motoko archive.")?,
+        Azle => assets::new_project_azle_files().context("Failed to get azle archive.")?,
+        Kybra => assets::new_project_kybra_files().context("Failed to get kybra archive.")?,
     };
     write_files_from_entries(
         log,
@@ -468,15 +553,35 @@ pub fn exec(env: &dyn Environment, opts: NewOpts) -> DfxResult {
         &variables,
     )?;
 
-    scaffold_frontend_code(
-        env,
-        dry_run,
-        project_name,
-        opts.no_frontend,
-        opts.frontend,
-        &opts.agent_version,
-        &variables,
-    )?;
+    if opts.extras.contains(&Extra::InternetIdentity) {
+        write_files_from_entries(
+            log,
+            &mut assets::new_project_internet_identity_files()?,
+            project_name,
+            dry_run,
+            &variables,
+        )?;
+    }
+    if opts.extras.contains(&Extra::Bitcoin) {
+        write_files_from_entries(
+            log,
+            &mut assets::new_project_bitcoin_files()?,
+            project_name,
+            dry_run,
+            &variables,
+        )?;
+    }
+    if frontend != FrontendType::None {
+        scaffold_frontend_code(
+            env,
+            dry_run,
+            project_name,
+            frontend,
+            &opts.extras,
+            &opts.agent_version,
+            &variables,
+        )?;
+    }
 
     if !dry_run {
         // If on mac, we should validate that XCode toolchain was installed.
@@ -508,7 +613,7 @@ pub fn exec(env: &dyn Environment, opts: NewOpts) -> DfxResult {
             init_git(log, project_name)?;
         }
 
-        if opts.r#type == "rust" {
+        if r#type == Rust {
             // dfx build will use --locked, so update the lockfile beforehand
             const MSG: &str = "You will need to run it yourself (or a similar command like `cargo vendor`), because `dfx build` will use the --locked flag with Cargo.";
             if let Ok(code) = Command::new("cargo")
@@ -545,6 +650,45 @@ pub fn exec(env: &dyn Environment, opts: NewOpts) -> DfxResult {
     Ok(())
 }
 
+fn get_opts_interactively(opts: NewOpts) -> DfxResult<NewOpts> {
+    use BackendType::*;
+    use Extra::*;
+    use FrontendType::*;
+    let theme = ColorfulTheme::default();
+    let backends_list = [Motoko, Rust, Azle, Kybra];
+    let backend = FuzzySelect::with_theme(&theme)
+        .items(&backends_list)
+        .default(0)
+        .with_prompt("Select a backend language:")
+        .interact()?;
+    let backend = backends_list[backend];
+    let frontends_list = [SvelteKit, React, Vue, Vanilla, SimpleAssets, None];
+    let frontend = FuzzySelect::with_theme(&theme)
+        .items(&frontends_list)
+        .default(0)
+        .with_prompt("Select a frontend framework:")
+        .interact()?;
+    let frontend = frontends_list[frontend];
+    let mut extras_list = vec![InternetIdentity, Bitcoin];
+    if frontend != None && frontend != SimpleAssets {
+        extras_list.push(FrontendTests);
+    }
+    let extras = MultiSelect::with_theme(&theme)
+        .items(&extras_list)
+        .with_prompt("Add extra features (space to select, enter to confirm)")
+        .interact()?;
+
+    let extras = extras.into_iter().map(|x| extras_list[x]).collect();
+
+    let opts = NewOpts {
+        extras,
+        frontend: Some(frontend),
+        r#type: Some(backend),
+        ..opts
+    };
+    Ok(opts)
+}
+
 fn warn_upgrade(log: &Logger, latest_version: Option<&Version>, current_version: &Version) {
     warn!(log, "You seem to be running an outdated version of dfx.");
 
diff --git a/src/dfx/src/lib/builders/assets.rs b/src/dfx/src/lib/builders/assets.rs
index eff29745ac..aab01faea8 100644
--- a/src/dfx/src/lib/builders/assets.rs
+++ b/src/dfx/src/lib/builders/assets.rs
@@ -27,6 +27,8 @@ struct AssetsBuilderExtra {
     /// the canister does not have a frontend or can be built using the default
     /// `npm run build` command.
     build: Vec<String>,
+    /// The NPM workspace that the project is located in.
+    workspace: Option<String>,
 }
 
 impl AssetsBuilderExtra {
@@ -45,10 +47,12 @@ impl AssetsBuilderExtra {
             .collect::<DfxResult<Vec<CanisterId>>>().with_context( || format!("Failed to collect dependencies (canister ids) of canister {}.", info.get_name()))?;
         let info = info.as_info::<AssetsCanisterInfo>()?;
         let build = info.get_build_tasks().to_owned();
+        let workspace = info.get_npm_workspace().map(str::to_owned);
 
         Ok(AssetsBuilderExtra {
             dependencies,
             build,
+            workspace,
         })
     }
 }
@@ -109,6 +113,7 @@ impl CanisterBuilder for AssetsBuilder {
         let AssetsBuilderExtra {
             build,
             dependencies,
+            workspace,
         } = AssetsBuilderExtra::try_from(info, pool)?;
 
         let vars = super::get_and_write_environment_variables(
@@ -125,6 +130,7 @@ impl CanisterBuilder for AssetsBuilder {
             &config.network_name,
             vars,
             &build,
+            workspace.as_deref(),
         )?;
 
         let assets_canister_info = info.as_info::<AssetsCanisterInfo>()?;
@@ -195,6 +201,7 @@ fn build_frontend(
     network_name: &str,
     vars: Vec<super::Env<'_>>,
     build: &[String],
+    workspace: Option<&str>,
 ) -> DfxResult {
     let custom_build_frontend = !build.is_empty();
     let build_frontend = project_root.join("package.json").exists();
@@ -228,6 +235,10 @@ fn build_frontend(
 
         cmd.arg("run").arg("build");
 
+        if let Some(workspace) = workspace {
+            cmd.arg("--workspace").arg(workspace);
+        }
+
         if NetworkDescriptor::is_ic(network_name, &vec![]) {
             cmd.env("NODE_ENV", "production");
         }
diff --git a/src/dfx/src/lib/canister_info.rs b/src/dfx/src/lib/canister_info.rs
index eec28cf406..0e1e4bf173 100644
--- a/src/dfx/src/lib/canister_info.rs
+++ b/src/dfx/src/lib/canister_info.rs
@@ -123,7 +123,7 @@ impl CanisterInfo {
         let declarations_config = CanisterDeclarationsConfig {
             output: declarations_config_pre
                 .output
-                .or_else(|| Some(PathBuf::from("src/declarations").join(name))),
+                .or_else(|| Some(workspace_root.join("src/declarations").join(name))),
             bindings: declarations_config_pre
                 .bindings
                 .or_else(|| Some(vec!["js".to_string(), "ts".to_string(), "did".to_string()])),
diff --git a/src/dfx/src/lib/canister_info/assets.rs b/src/dfx/src/lib/canister_info/assets.rs
index e00e675cbf..f66601ca15 100644
--- a/src/dfx/src/lib/canister_info/assets.rs
+++ b/src/dfx/src/lib/canister_info/assets.rs
@@ -12,6 +12,7 @@ pub struct AssetsCanisterInfo {
     output_wasm_path: PathBuf,
     output_idl_path: PathBuf,
     build: Vec<String>,
+    workspace: Option<String>,
 }
 
 impl AssetsCanisterInfo {
@@ -27,6 +28,9 @@ impl AssetsCanisterInfo {
     pub fn get_build_tasks(&self) -> &[String] {
         &self.build
     }
+    pub fn get_npm_workspace(&self) -> Option<&str> {
+        self.workspace.as_deref()
+    }
 
     #[context("Failed to assert source paths.")]
     pub fn assert_source_paths(&self) -> DfxResult<()> {
@@ -55,15 +59,19 @@ impl CanisterInfoFactory for AssetsCanisterInfo {
     fn create(info: &CanisterInfo) -> DfxResult<Self> {
         let input_root = info.get_workspace_root().to_path_buf();
         // If there are no "source" field, we just ignore this.
-        let (source_paths, build) =
-            if let CanisterTypeProperties::Assets { source, build } = info.type_specific.clone() {
-                (source, build.into_vec())
-            } else {
-                bail!(
-                    "Attempted to construct an assets canister from a type:{} canister config",
-                    info.type_specific.name()
-                )
-            };
+        let (source_paths, build, workspace) = if let CanisterTypeProperties::Assets {
+            source,
+            build,
+            workspace,
+        } = info.type_specific.clone()
+        {
+            (source, build.into_vec(), workspace)
+        } else {
+            bail!(
+                "Attempted to construct an assets canister from a type:{} canister config",
+                info.type_specific.name()
+            )
+        };
 
         let output_root = info.get_output_root();
 
@@ -76,6 +84,7 @@ impl CanisterInfoFactory for AssetsCanisterInfo {
             output_wasm_path,
             output_idl_path,
             build,
+            workspace,
         })
     }
 }