# Fun with Svelte and uibuilder
**URL:** https://discourse.nodered.org/t/fun-with-svelte-and-uibuilder/41370
**Category:** Share Your Projects
**Created:** [21 February 2021 01:17 UTC](https://discourse.nodered.org/t/fun-with-svelte-and-uibuilder/41370 "2021-02-21T01:17:45Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [21 February 2021 01:17 UTC](https://discourse.nodered.org/t/fun-with-svelte-and-uibuilder/41370/1 "2021-02-21T01:17:46Z")
After a recent announcement about the use of Svelte, it looked interesting enough to see how easy it might be to use with uibuilder.
As it happens - pretty easy 😁
1. Create a new uibuilder instance and change the url to `svelte` (or whatever you want). Click on Deploy.
2. Install the default svelte template to `~/.node-red/uibuilder/svelte` with the command `npx degit sveltejs/template ~/.node-red/uibuilder/svelte`
3. Make some very minor changes to the rollup config: Just change lines 42 and 72 to point to the `dist` folder instead of `public`.
4. Rename the `public` folder to `dist` and remove the `build` sub-folder (it gets recreated).
Note that you will need to restart node-red at some point now - sorry about that, it is the way that uibuilder currently decides whether to serve up the `src` or `dist` folder. I'll fix that in the future.
1. Change the `build/index.html` - noting the leading `.` or `..` added to the various resources:
```auto
Svelte app
```
And in `App.svelte`:
```auto
Svelte + uibuilder
{myGreeting}
{nrMsg}
```
1. `cd ~/.node-red/uibuilder/svelte && npm install && npm run dev`
2. Now load the uibuilder page with `http://127.0.0.1:1880/svelte/` (or wherever yours ends up)
* * *
OK, so not the most amazing thing. But lets note a couple of important points.
- Make a change to the text in the `App.svelte` page and save it - notice anything on your web page?
- Attach a debug node to the output of your uibuilder node. Make sure it is set to show the whole msg object. Now click on the button on your page. Notice that you get a message just by clicking the button, no code required (other than the HTML for the button itself).
- Send a msg to the uibuilder node and note how the payload appears on the page
19 lines of actual code for a simple, data-driven web page. Not too bad I think.
* * *
When I get a chance, I will create a GitHub repository with a uibuilder-specific Svelte template to get rid of some of the above steps.
I will also be adding some features to uibuilder in a future release that will make installing your own (or anyone elses) templates to a uibuilder instance. Also, there will be an `install` and a `build` button. So that most of the above steps will be reduced to a couple of clicks. These changes will help anyone who needs a build step for their web app, not just for Svelte users.
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [20 March 2021 14:13 UTC](https://discourse.nodered.org/t/fun-with-svelte-and-uibuilder/41370/2 "2021-03-20T14:13:06Z")
> [@TotallyInformation](#):
>
> Make some very minor changes to the rollup config: Just change lines 42 and 72 to point to the `dist` folder instead of `public`
Hi Julian, I am pretty much interested in testing uibuilder + Svelte, so this was the post of my dreams. Thank you so much for finding the time to share.
The greeting screenshot shows it is working.
I just had to adapt the target folders since I am using projects in Node-RED.
I briefly describe what else I did differently as it migth be useful for more people.
Step #3, about changing the config of `/uibuilder/svelte/rollup.config` file
Line numbers were not the same, so I share a screenshot of the lines to be changed
As instructed I changed `public` to `dist`
Step #5, about changing `/build/index.html`. Well, the sub-folder /build folder was deleted in step #4, so I assumed that the goal was to change instead `/dist/index.html`
Just this couple of small changes and voila ! I can now learn Svelte and practice with uibuilder.
---
### Author:  [@j2l](https://discourse.nodered.org/u/j2l)
#### Post date: [12 April 2021 15:23 UTC](https://discourse.nodered.org/t/fun-with-svelte-and-uibuilder/41370/3 "2021-04-12T15:23:09Z")
Hello Justin and Andrei,
@Andrei do you also use NR on a docker container by any chance?
Because when I try Svelte, I get very weird results:
```auto
192.168.1.236/:1 Refused to apply style from 'http://192.168.1.236:1880/svelte/build/bundle.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
App.svelte:15 was created with unknown prop 'name'
(anonymous) @ App.svelte:15
instance @ App.svelte:15
init @ index.mjs:1473
App @ App.svelte:15
(anonymous) @ main.js:3
(anonymous) @ main.js:8
bundle.js:2 GET http://192.168.1.236:35729/livereload.js?snipver=1 net::ERR_CONNECTION_REFUSED
(anonymous) @ bundle.js:2
(anonymous) @ bundle.js:2
```
Button is not working of course
And the uibuilder folder menu can see (edit?) all node\_modules:
BTW, for future readers who might get stuck with NR in a container:
`/data/uibuilder` replaces `~/.node-red/uibuilder`
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [12 April 2021 17:04 UTC](https://discourse.nodered.org/t/fun-with-svelte-and-uibuilder/41370/4 "2021-04-12T17:04:43Z")
The mime-type issue is usually because you've been a bit slack with the specification of your CSS links. Check the default template index.html file for the exact syntax. This is because uibuilder applies the "no-sniff" setting for security best practice.