Using Parcel to compile your code

Using Parcel is a relatively simple way to compile the code you are using in uibuilder, however you need to make some changes to your code. Following is a step-by-step guide. This guide will show you how to move to using Parcel to compile as well as designing your web apps as single file components. If you don't want to use single file components the migration path would be slightly different and isn't documented here.

I'm going to put it out there that I have written this from memory, so there may be an error or three. Please get back to me if you find any anomalies.

1. Install parcel from cmd

npm install -g parcel-bundler

2. Modifying your existing code

Once you have created your flow in node-red with uibuilder and imported your "old" uncompiled code in, you will need to do some things to make the code work.

a. Data in the index.js needs to be a function, like this: data: { }, // --- End of data --- //

b. Mounted is not a function, remove the function component. It should look like this:

` // Start-up mounted: function(){

} // --- End of mounted hook --- // `

c. You can not refer to your variables using the "app" prefixe.g.

app.[variable_name] will not work this.[variable_name] does work

d. If you want your design to use single file components, the structure of your files has to change Where you have 3x separate files index.css, index.html and index.js you now have to create a single .vue file and paste all there files into this file:

Your index.html data needs to wrapped in a template: <template> </template>

Your index.js data needs to be wrapped in a script: <script> </script>

Your index.css data needs to be wrapped in a style: <style> </style>

There are some other minor changes, as well. You will need to ... this will be filled in later

3. Compiling for the first time

Once you have your code modified, as above, you will need to open up cmd and make your way to your "src" folder. From the src folder, you will need to run this: parcel build index.html --public-url ./ --no-cache --out-dir ../dist/

Now you will need to restart the node-red server completely. @UnborN thinks this is because your uibuilder node needs to know that the data it is look for is in a new location. With my limited knowledge this makes sense to me i.e. This is so that Node-RED picks up the files in the "dist" folder rather than looking in the "src" folder

Now in the terminal window in Visual Studio Code run this command:

parcel watch index.html --public-url ./ --no-cache --out-dir ../dist/

By using "watch" rather than "index" only the file you are working on will be re-compiled (i think), either way it works way faster than running the "index" command which seems to do a complete rebuild each time.

If all has gone well, you will have no errors in the terminal window and no errors in the web page debug console. If you do have errors, time to debug. Give me a shout if the guide needs updating. Thanks!