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)

`import Vue from 'vue' import App from './components/Floorplan.vue' import router from './router'

import uibuilder from './../../../node_modules/node-red-contrib-uibuilder/nodes/src/uibuilderfe.js' //import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' import { BootstrapVue } from 'bootstrap-vue' // Install BootstrapVue Vue.use(BootstrapVue) // Optionally install the BootstrapVue icon components plugin //Vue.use(IconsPlugin)

import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css'

import "@fortawesome/fontawesome-free/css/fontawesome.css"; import "@fortawesome/fontawesome-free/css/regular.css"; import "@fortawesome/fontawesome-free/css/solid.css";

// Vue.use(uibuilder) window.uibuilder = uibuilder;

var app = new Vue({ el: '#app', // runtimerCompiler: true, router, // store, render: h => h(App) }) `

you will need a new index.html file. In this example I have created a free account to access all the font-awesome icons

`

<title>Uibuilder BMS</title>

<script src="./app.js"></script>

<!-- load ALL fa.x icons using developer account with unique code at end of src below "/c..." -->
<script src="https://kit.fontawesome.com/[paste your own unique code here - or just delete this line].js"></script>

<!--<script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js"></script>-->

`

You will also need to create your own router.js file which you can expand on later with more projects: `import Vue from "vue"; import VueRouter from "vue-router"; import Home from "./components/Home"; import Floorplan from "./components/Floorplan";

Vue.use(VueRouter);

const router = new VueRouter({ mode: "history", base: "test", linkActiveClass: "active", routes: [ { path: "/", component: Home, }, { path: "/floorplan", component: Floorplan, }, { path: "*", redirect: "/", }, ], });

export default router; `

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!