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: { }

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

mounted: function(){ }

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 for uibuidler index.css, index.html and index.js, you now have to create a single .vue file and paste the data from all three files into this file:

Your index.html data needs to be 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>

You will need a new .js file which is called "app.js" in this example. You can see from the example that a few things are being loaded:

• Vue itself
• the floorplan.vue file which is the single file component in this example
• the Router
• uibuilder
• bootstrap-vue
• fontawesome icons (optional) --- grab the app.js file from the code section in the folder called "Using Parcel"

you will need a new index.html file. In this example I have created a free account to access all the font-awesome icons --- grab the index.html file from the code section in the folder called "Using Parcel"

You will also need to create your own router.js file which you can expand on later with more projects: --- grab the router.js file from the code section in the folder called "Using Parcel"

There are some other minor changes you will need to do to your single file component which I will document later, but if you have some prior experience you should be able to figure it out yourself anwyay.

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!