diff --git a/bobtemplates/plone/svelte_app.py b/bobtemplates/plone/svelte_app.py
index 9b72c742e..0d221fcc0 100644
--- a/bobtemplates/plone/svelte_app.py
+++ b/bobtemplates/plone/svelte_app.py
@@ -46,7 +46,7 @@ def _update_configure_zcml(configurator):
     match_str = "-*- extra stuff goes here -*-"
     insert_str = """
   <plone:static
-      directory="svelte_apps"
+      directory="apps"
       type="plone"
       name="{0}.svelte"
       />
@@ -73,13 +73,13 @@ def post_renderer(configurator):
     run_black(configurator)
     git_commit(
         configurator,
-        "Add Svelte app: in svelte_apps/{0}".format(
+        "Add Svelte app: in apps/{0}".format(
             configurator.variables["svelte_app_name"],
         ),
     )
     echo(
         "===================================================\n"
-        "=> Sucessfully added: {0} in svelte_apps/{1} \n"
+        "=> Sucessfully added: {0} in apps/{1} \n"
         "=> you might want to go into the dir and run:\n"
         "$ yarn\n"
         "and then:"
diff --git a/bobtemplates/plone/svelte_app/svelte_src/+svelte_app_name_dashed+/.gitignore b/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/.gitignore
similarity index 100%
rename from bobtemplates/plone/svelte_app/svelte_src/+svelte_app_name_dashed+/.gitignore
rename to bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/.gitignore
diff --git a/bobtemplates/plone/svelte_app/svelte_src/+svelte_app_name_dashed+/README.md.bob b/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/README.md.bob
similarity index 100%
rename from bobtemplates/plone/svelte_app/svelte_src/+svelte_app_name_dashed+/README.md.bob
rename to bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/README.md.bob
diff --git a/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/jsconfig.json b/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/jsconfig.json
new file mode 100644
index 000000000..5696a2de7
--- /dev/null
+++ b/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/jsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "target": "ESNext",
+    "module": "ESNext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/package.json.bob b/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/package.json.bob
new file mode 100644
index 000000000..d2538550d
--- /dev/null
+++ b/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/package.json.bob
@@ -0,0 +1,17 @@
+{
+  "name": "{{{ svelte_app_name }}}",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "watch": "vite build --watch",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "svelte": "^4.0.5",
+    "vite": "^4.4.5"
+  }
+}
diff --git a/bobtemplates/plone/svelte_app/svelte_src/+svelte_app_name_dashed+/scripts/setupTypeScript.js b/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/scripts/setupTypeScript.js
similarity index 100%
rename from bobtemplates/plone/svelte_app/svelte_src/+svelte_app_name_dashed+/scripts/setupTypeScript.js
rename to bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/scripts/setupTypeScript.js
diff --git a/bobtemplates/plone/svelte_app/svelte_src/+svelte_app_name_dashed+/src/App.svelte.bob b/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/src/App.svelte.bob
similarity index 100%
rename from bobtemplates/plone/svelte_app/svelte_src/+svelte_app_name_dashed+/src/App.svelte.bob
rename to bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/src/App.svelte.bob
diff --git a/bobtemplates/plone/svelte_app/svelte_src/+svelte_app_name_dashed+/src/main.js.bob b/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/src/main.js.bob
similarity index 100%
rename from bobtemplates/plone/svelte_app/svelte_src/+svelte_app_name_dashed+/src/main.js.bob
rename to bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/src/main.js.bob
diff --git a/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/svelte.config.js.bob b/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/svelte.config.js.bob
new file mode 100644
index 000000000..d6b72ed53
--- /dev/null
+++ b/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/svelte.config.js.bob
@@ -0,0 +1,10 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+  compilerOptions: {
+    css: "external",
+  },
+}
diff --git a/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/vite.config.js.bob b/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/vite.config.js.bob
new file mode 100644
index 000000000..6a0423e3c
--- /dev/null
+++ b/bobtemplates/plone/svelte_app/resources/+svelte_app_name_dashed+/vite.config.js.bob
@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    manifest: true,
+    rollupOptions: {
+      input: 'src/main.js',
+      output: {
+          entryFileNames: `assets/{{{ svelte_app_name_dashed }}}-[name].js`,
+          // chunkFileNames: `assets/[name].js`,
+          // assetFileNames: `assets/[name].[ext]`,
+          sourcemap: true,
+          format: 'iife',
+          name: '{{{ svelte_app_file_name }}}',
+          dir: '../../src/{{{ package.namespace }}}/{{{ package.name }}}/apps/{{{ svelte_app_name_dashed }}}/'
+      },
+    }
+  },
+  base: '../../src/{{{ package.namespace }}}/{{{ package.name }}}/apps/{{{ svelte_app_name_dashed }}}/',
+  plugins: [svelte()],
+})
diff --git a/bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/svelte_apps/+svelte_app_name_dashed+/README.md.bob b/bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/apps/+svelte_app_name_dashed+/README.md.bob
similarity index 100%
rename from bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/svelte_apps/+svelte_app_name_dashed+/README.md.bob
rename to bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/apps/+svelte_app_name_dashed+/README.md.bob
diff --git a/bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/svelte_apps/+svelte_app_name_dashed+/favicon.png b/bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/apps/+svelte_app_name_dashed+/favicon.png
similarity index 100%
rename from bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/svelte_apps/+svelte_app_name_dashed+/favicon.png
rename to bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/apps/+svelte_app_name_dashed+/favicon.png
diff --git a/bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/svelte_apps/+svelte_app_name_dashed+/global.css b/bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/apps/+svelte_app_name_dashed+/global.css
similarity index 100%
rename from bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/svelte_apps/+svelte_app_name_dashed+/global.css
rename to bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/apps/+svelte_app_name_dashed+/global.css
diff --git a/bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/svelte_apps/+svelte_app_name_dashed+/index.html.bob b/bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/apps/+svelte_app_name_dashed+/index.html.bob
similarity index 100%
rename from bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/svelte_apps/+svelte_app_name_dashed+/index.html.bob
rename to bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/apps/+svelte_app_name_dashed+/index.html.bob
diff --git a/bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/profiles/default/registry/+svelte_app_file_name+.xml.bob b/bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/profiles/default/registry/+svelte_app_file_name+.xml.bob
index 2c7a55b4f..d192ab996 100644
--- a/bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/profiles/default/registry/+svelte_app_file_name+.xml.bob
+++ b/bobtemplates/plone/svelte_app/src/+package.namespace+/+package.name+/profiles/default/registry/+svelte_app_file_name+.xml.bob
@@ -1,4 +1,4 @@
-<?xml version="1.0"?>
+t<?xml version="1.0"?>
 <registry
     xmlns:i18n="http://xml.zope.org/namespaces/i18n"
     i18n:domain="{{{ package.dottedname }}}">
@@ -8,8 +8,8 @@
     <value key="enabled">True</value>
     <value key="load_defer">True</value>
     <value key="compile">False</value>
-    <value key="jscompilation">++plone++{{{ package.dottedname }}}.svelte/{{{ svelte_app_name_dashed }}}/{{{ svelte_app_name_dashed }}}-bundle.js</value>
-    <value key="csscompilation">++plone++{{{ package.dottedname }}}.svelte/{{{ svelte_app_name_dashed }}}/{{{ svelte_app_name_dashed }}}-bundle.css</value>
+    <value key="jscompilation">++plone++{{{ package.dottedname }}}.svelte/{{{ svelte_app_name_dashed }}}/assets/{{{ svelte_app_name_dashed }}}-main.js</value>
+    <!-- <value key="csscompilation">++plone++{{{ package.dottedname }}}.svelte/{{{ svelte_app_name_dashed }}}/assets/{{{ svelte_app_name_dashed }}}-main.css</value> -->
     <value key="last_compilation">2020-10-29 22:00:00</value>
   </records>
 
@@ -25,8 +25,10 @@
     </value>
   </records>
 
-  <!-- <records interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema" prefix="plone">
+  <!--
+  <records interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema" prefix="plone">
     <value key="other_settings" purge="false">{"custom_elements": "{{{ svelte_app_name_dashed }}}"}</value>
-  </records> -->
+  </records>
+  -->
 
 </registry>
diff --git a/bobtemplates/plone/svelte_app/svelte_src/+svelte_app_name_dashed+/package.json b/bobtemplates/plone/svelte_app/svelte_src/+svelte_app_name_dashed+/package.json
deleted file mode 100644
index 6debef6a6..000000000
--- a/bobtemplates/plone/svelte_app/svelte_src/+svelte_app_name_dashed+/package.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "svelte-app",
-  "version": "1.0.0",
-  "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "start": "sirv public"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^14.0.0",
-    "@rollup/plugin-node-resolve": "^8.0.0",
-    "rollup": "^2.3.4",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^6.0.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "rollup-plugin-serve": "^1.1.0",
-    "svelte": "^3.0.0"
-  },
-  "dependencies": {
-    "sirv-cli": "^1.0.0"
-  }
-}
diff --git a/bobtemplates/plone/svelte_app/svelte_src/+svelte_app_name_dashed+/rollup.config.js.bob b/bobtemplates/plone/svelte_app/svelte_src/+svelte_app_name_dashed+/rollup.config.js.bob
deleted file mode 100644
index 57f2f6bc7..000000000
--- a/bobtemplates/plone/svelte_app/svelte_src/+svelte_app_name_dashed+/rollup.config.js.bob
+++ /dev/null
@@ -1,68 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs';
-import livereload from 'rollup-plugin-livereload';
-import resolve from '@rollup/plugin-node-resolve';
-import serve from 'rollup-plugin-serve'
-import svelte from 'rollup-plugin-svelte';
-import { terser } from 'rollup-plugin-terser';
-
-const production = !process.env.ROLLUP_WATCH;
-
-
-export default {
-    input: 'src/main.js',
-    output: {
-        sourcemap: true,
-        format: 'iife',
-        name: '{{{ svelte_app_file_name }}}',
-        file: '../../src/{{{ package.namespace }}}/{{{ package.name }}}/svelte_apps/{{{ svelte_app_name_dashed }}}/{{{ svelte_app_name_dashed }}}-bundle.js'
-    },
-    plugins: [
-        svelte({
-            /// enables compiling to native customElement (webcomponent):
-{{% if svelte_app_custom_element %}}
-            customElement: true,
-{{% else %}}
-            customElement: false,
-{{% endif %}}
-            // enable run-time checks when not in production
-            dev: !production,
-            // we'll extract any component CSS out into
-            // a separate file - better for performance
-            css: css => {
-                css.write('{{{ svelte_app_name_dashed }}}-bundle.css');
-            }
-        }),
-
-        // If you have external dependencies installed from
-        // npm, you'll most likely need these plugins. In
-        // some cases you'll need additional configuration -
-        // consult the documentation for details:
-        // https://github.com/rollup/plugins/tree/master/packages/commonjs
-        resolve({
-            browser: true,
-            dedupe: ['svelte']
-        }),
-        commonjs(),
-
-        // In dev mode, call `npm run start` once
-        // the bundle has been generated
-        !production && serve({
-          contentBase: '../../src/{{{ package.namespace }}}/{{{ package.name }}}/svelte_apps/{{{ svelte_app_name_dashed }}}',
-          open: true
-        }),
-
-        // Watch the `public` directory and refresh the
-        // browser on changes when not in production
-        !production && livereload({
-          verbose: false,
-          watch: '../../src/{{{ package.namespace }}}/{{{ package.name }}}/svelte_apps/{{{ svelte_app_name_dashed }}}'
-        }),
-
-        // If we're building for production (npm run build
-        // instead of npm run dev), minify
-        production && terser()
-    ],
-    watch: {
-        clearScreen: false
-    }
-};