Neutralino + Svelte

There are many ways to integrate Svelte with Neutralino, this template shows one of them

Table of contents

• How to use this template
• Manually integrate Svelte with Neutralino
• Running and Building
  • Running in dev mode
  • Building
• Using TypeScript
• Icon credits

How to use this template

1. Create a Neutralino app using this template by running:

   npx degit anotherempty/neutralino-svelte-template your-app

2. Open your app base folder and initialize the Neutralino binaries:

   neu update

3. Go inside the svelte folder and install its dependencies:

   npm install

4. Finally run in dev mode or build your app, see the Running and Building section on how to.

Manually integrate Svelte with Neutralino

1. Create a Neutralino project with

   neu create

2. Open the Neutralino base folder and add Svelte:

   npx degit sveltejs/template svelte

3. (Optional) Delete the README.md from the svelte folder

4. Copy the content of the Svelte .gitignore file inside the Neutralino .gitignore file then delete the Svelte .gitignore file

5. Copy the resources/js/neutralino.js file to svelte/public/

6. Import the neutralino.js file inside svelte/public/index.html:

   <script defer src="./build/bundle.js"></script>
   <script src="./neutralino.js"></script>

7. Copy the resources/icons/trayIcon.png file to svelte/public/

8. (Optional) Copy the contents of resources/js/main.js inside the script tag of svelte/src/App.svelte and change the trayIcon.png path inside the setTray() function.

   Then copy the contents of the body of resources/index.html inside svelte/src/App.svelte

9. Open neutralino.config.json and change documentRoot, modes.window.icon, modes.cloud.url (optional if you're building a window app), cli.resourcesPath, and cli.clientLibrary:

   {
     ...
     "documentRoot": "/svelte/public/",
     ...
     "modes": {
       "window": {
         "icon": "/svelte/public/favicon.png",
       }
       ...
       "cloud": {
         "url": "/svelte/public/#cloud",
       }
       ...
     }
     ...
     "cli": {
       "resourcesPath": "/svelte/public/",
       "clientLibrary": "/svelte/public/neutralino.js",
     }
   }

10. Finally, delete the resources folder

Running and Building

Running in dev mode

Open the svelte folder and install its dependencies ...

npm install

...then start Rollup...

npm run dev

...then open the base folder from another terminal and start Neutralino:

neu run

Building

Open the svelte folder and run the build command ...

npm run build

... then from the base folder, build the Neutralino app

neu build

Using TypeScript

Go inside the svelte folder and run :

node scripts/setupTypeScript.js

Icon credits

• trayIcon.png - Made by Freepik and downloaded from Flaticon