Skip to content

Using VueJS with Webpack

Jump to bottom Edit New page
Julian Knight edited this page Jan 26, 2019 · 11 revisions

WORK IN PROGRESS

Users of frameworks that normally use a build step to deploy code - such as WebPack - sometimes seem to struggle with using uibuilder. This page aims to explain a simple approach that works.

Setup

  1. Install the uibuilder node and the front-end framework you need. Here we will use VueJS as an example.
  2. Add an instance of the uibuilder node to your Node-RED flow along with any data you want to feed to it and any output processing. See the basic VueJS page of this WIKI for an example. Deploy the flow.
  3. You now have a folder containing the example source for your UI page. It is probably something like this:
~/.node-red/uibuilder
    uibuilder
        <instance-url>
            dist
            src
                index.css
                index.html
                index.js

Where <instance-url> matches the url you specified in the uibuilder node instance.

Install dependencies

On a command line, navigate to the <instance-url> folder then do the following@

npm init -y
npm --save install vue
npm install --save-dev webpack webpack-cli vue-loader vue-template-compiler vue-style-loader css-loader

If you want to, you can make vue a dev-dependency too since the version that is used by uibuilder is installed in your ~/.node-red userDir folder.

You may also wish to add other vue components such as vue-router and bootstrap-vue as desired.

Create a build script

Add the following to the package.json file that has been created for you in the <instance-url> folder:

  "scripts": {
    "build": "webpack --config ./webpack.config.dev.js"
  },

Create the webpack config file webpack.config.dev.js:

'use strict'
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  mode: 'development',
  entry: [
    './src/index.js'
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

Add your root VueJS App

In the src sub-folder, make sure you have the standard 3 index.(css|html|js) files and add another called App.vue

<template>
    <div>
        <h1>Hello World!</h1>
    </div>
</template>

Obviously, this is just a dummy. You will want to replace it with something meaningful.

This file will be included using your index.js file and webpack will translate it into JavaScript via the vue-loader plugin.

Change the index.html file

Alter the index.html file like this:

<body>
    <h1>OK Vue</h1>
    <div id="app"></div>

    <script src="/uibuilder/socket.io/socket.io.js"></script>
    <!-- Note no leading / -->
    <script src="./main.js" type="text/javascript"></script>

</body>

Keep the rest of the file the same.

Note that you are not including any of the "standard" JavaScript files now except for socket.io, they have all been packed into a single file. You can also include the Socket.IO client in your build if you like but there are some complexities.

Optimising

TBC

It isn't necessarily the best approach to have a single, very large js file with everything packed into it.

Final note

If the front-end libraries that you are using don't have any CSS or other assets that need to be loaded in your html page - such as images for example. Then you don't actually need to install the library into ~/node-red as the standard instructions say.

There is no real harm in installing them - other than using up some disk space and resources - but any code won't be used since you are using webpack to pack all of the code into your dist/main.js file.

Please feel free to add comments to the page (clearly mark with your initials & please add a commit msg so we know what has changed). You can contact me in the Discourse forum, or raise an issue here in GitHub! I will make sure all comments & suggestions are represented here.

Clone this wiki locally