Is there a way to create a NeutralinoJS project based on Svelte and Typescript?

user_3544980 0
Viewed 722

I need to create a neutralino+svelte+ts project, I've noted it was possible in old version (neutralino-cli@1.8.1) but nothing similar is described in newest version of neutralino. I've tried to run in latest neutralino version the same command described in version 1.8.1 (neu create myapp --template svelte) but I received the error:

neu: ERROR Unable to download resources from internet. Please check your internet connection and template URLs.

I've tried with different type of template (ts and js) and I had the same result.

I've tried also by running the command neu create myapp --template neutralinojs/neutralinojs-svelte (same error).

Any idea how to do it?

neutralinojs svelte typescript
1 Answers

You can do it without any dedicated template, it's quite simple and easy.

Basically, you need to create a Neutralino app and a Svelte app side by side in the same root folder, then a little config to make them work together.

Detailed step by step :

  1. Create a Neutralino app, following Neutralino documentation : https://neutralino.js.org/docs/getting-started/your-first-neutralinojs-app. Ensure you can run and build as in the tutorial.

  2. In the root folder of your Neutralino application, rename .gitignore to .gitignore-neu and readme.md to readme-neu.md

  3. In the Svelte REPL, download the zip file you want to start from, for example https://svelte.dev/repl/hello-world (click the download button on right side of the toolbar)

  4. Copy the content of the zip file in your Neutralino root folder, so that Svelte public folder is at the same level as Neutralino resources folder

  5. Run npm install to setup the Svelte application. Ensure it works ok on its own by running npm run dev and npm run build

Now you have two standalone applications side by side in the same root folder. Let’s make them work together.

  1. Merge Neutralino and Svelte .gitignore files by copying .gitignore-neu content into .gitignore

  2. Open the file /neutralino.config.json and change "documentRoot":"/resources/" to "documentRoot":"/public/" so that Neutralino can use the Svelte output

  3. Open two console windows : npm run dev for Svelte and neu run for Neutralino. You'll see a Neutralino native window displaying the Svelte home page.

You’re done !

Now you can code your Svelte web application in the /src folder as you would for any Svelte application, with hot-compiling by Svelte and hot-reloading by Neutralino.

When your app is ready, build it with npm run build (Svelte part) followed by neu build (Neutralino).

If you need to use Neutralino API from within your Svelte code :

  • Copy the file /resources/js/neutralino.js to the /public/ folder

  • add the line <script src="/neutralino.js"></script> to the <head> block of /public/index.html (right after the line <script defer src='/build/bundle.js'></script>)

  • Add Neutralino.init(); in Svelte main.js file (/src/main.js)

If you need Typescript, install a Neutralino Typescript app at step 1, and run Svelte Typescript setup script after the step 5.

user_186727310
Related