Using uibuilder with WebPack

Dashboard
1

Hi all,

Just letting you know that I have finally got round to testing uibuilder with webpack.

I've put together a quick outline of the best way I've come up with so far and added that to the WIKI.

I know that some folk have had some issues with uibuilder and webpack which is why I've been investigating. I can now say confidently that uibuilder does work just fine, at least with webpack v4.29+. If you are having issues, please try out the WIKI page first so that we can work out where the issue lies. The basics definitely work fine.

2 Likes
2

Hi Julian, i just following step to using webpack but i have errror in package.json.. can help me ? thanks

log
log.jpg910Ă—486 108 KB

3

Hi, looks like you have mismatched quote types on the "build" script line?

4

But i just copy and paste it.. and following step by step

Pada tanggal Sab, 11 Mei 2019 21:01, Julian Knight via Node-RED Forum nodered@discoursemail.com menulis:

5

Ah, OK. That is only a snippet from what should be a complete package.json file I'm afraid.

Assuming that nothing else is in the file other than the snippet you pasted from the WIKI, I would delete it and then, from a command line, change to the correct folder and issue the command npm init -y. This will create a new package.json file.

Then you can amend the script section of the resulting file adding the "build" line only. But pay attention to comma's. It is safest to use a decent code editor such as VScode if you aren't familiar with JSON files as they have to be exactly correct.

Here is an example from one of my test instances:

{
  "name": "uib-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.config.dev.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap-vue": "^2.0.0-rc.11",
    "vue": "^2.5.22",
    "vue-router": "^3.0.2"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "*",
    "node-red-contrib-uibuilder": "^1.0.12",
    "vue-loader": "^15.6.1",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  }
}

And for completeness, here is the matching webpack config file

// https://github.com/webpack-contrib/awesome-webpack

'use strict'

const { VueLoaderPlugin } = require('vue-loader')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: [
        './src/index.js',
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }, {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
        ]
    },
    // @see https://webpack.js.org/plugins/
    plugins: [
        new VueLoaderPlugin(),
        // Copies from wherever to the dist folder
        new CopyWebpackPlugin([
            {from: './src/index.html'},
            {from: './src/index.css'},
            {from: './src/manifest.json'},
        ]),
    ],
}
6

i miss node_modules file,i has installed it in uibuilder not in instance-url, i was fixed it, and that work. thanks for your help Julian.

1 Like
7

Great!

This will get a lot easier with v2.

You will be able to edit your package.json file from within the admin ui and run a defined build script from there as well.

The idea with v2 is that you shouldn't need to have access to the command line of the server.

I just need to find time to finish it off! And to stop adding changes to it :woozy_face: