Using Parcel to compile your code

Using Parcel is a relatively simple way to compile the code you are using in uibuilder. This guide will show you how to move to using Parcel to compile your code 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. Also, thank you to @unborn (Andy) from the Node-RED discourse forum for spending the time to help me through the migration process!

---

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.

1. Data in the index.js needs to be a function, like this:

   data: { }

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

   mounted: function(){ }

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

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

4. 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:

   1. Your index.html data needs to be wrapped in a template:

      <template> </template>

   2. Your index.js data needs to be wrapped in a script:

      <script> </script>

   3. Your index.css data needs to be wrapped in a style:

      <style> </style>

   4. 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 here: https://github.com/amilanov75/floorplan-uncompiled/blob/master/parcel/app.js

   5. You will need a new index.html file. In this example I have created a free account to access all the font-awesome icons, this is optional ie. delete the code if you don't want to us FA icons.

   Grab the index.html file from here: https://github.com/amilanov75/floorplan-uncompiled/blob/master/parcel/index.html

   6. 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 here: https://github.com/amilanov75/floorplan-uncompiled/blob/master/parcel/router.js

So in your project you will need the following files - thanks to @unborn for adding updates to clarify this:

a) [x].vue file - this is your single file component (this contains your original 3x uibuilder files, merged into 1x)

b) app.js - this renders App.vue

c) index.html - this loads app.js

d) router.js - this is the router file so you can point / create paths to multiple web pages / components

File (a) will need to sit in a new folder call "components", this will need to sit in the "src" folder -- thankyou to @unborn (from the node-red discourse forum) for pointing this out!

Files (b-d) will all sit in the "src" folder.

---

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 (from the looks of it), 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!