# Using uibuilder with WebPack

**URL:** <https://discourse.nodered.org/t/using-uibuilder-with-webpack/7283>\
**Category:** Dashboard\
**Tags:** uibuilder\
**Created:** [26 January 2019 20:48 UTC](https://discourse.nodered.org/t/using-uibuilder-with-webpack/7283 "2019-01-26T20:48:32Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [26 January 2019 20:48 UTC](https://discourse.nodered.org/t/using-uibuilder-with-webpack/7283/1 "2019-01-26T20:48:32Z")

</div>

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.

> **[Using VueJS with Webpack · TotallyInformation/node-red-contrib-uibuilder Wiki](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Using-VueJS-with-Webpack)**
>
> Easily create data-driven web UI's for Node-RED using any (or no) front-end library. - Using VueJS with Webpack · TotallyInformation/node-red-contrib-uibuilder Wiki

---

<div class="post-metadata">

**Author:** ![yusuv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yusuv/32/7626_2.png) [@yusuv](https://discourse.nodered.org/u/yusuv)\
**Post date:** [11 May 2019 02:03 UTC](https://discourse.nodered.org/t/using-uibuilder-with-webpack/7283/2 "2019-05-11T02:03:44Z")

</div>

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

 ![log](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/ec8881c357c1e0437de138f21b28b855277a0c51.jpeg)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 May 2019 13:51 UTC](https://discourse.nodered.org/t/using-uibuilder-with-webpack/7283/3 "2019-05-11T13:51:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yusuv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yusuv/32/7626_2.png) [@yusuv](https://discourse.nodered.org/u/yusuv)\
**Post date:** [11 May 2019 14:51 UTC](https://discourse.nodered.org/t/using-uibuilder-with-webpack/7283/4 "2019-05-11T14:51:51Z")

</div>

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](mailto:nodered@discoursemail.com) menulis:

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 May 2019 19:01 UTC](https://discourse.nodered.org/t/using-uibuilder-with-webpack/7283/5 "2019-05-11T19:01:34Z")

</div>

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:

```json
{
  "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

```javascript
// 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'},
        ]),
    ],
}

```

---

<div class="post-metadata">

**Author:** ![yusuv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yusuv/32/7626_2.png) [@yusuv](https://discourse.nodered.org/u/yusuv)\
**Post date:** [13 May 2019 01:19 UTC](https://discourse.nodered.org/t/using-uibuilder-with-webpack/7283/6 "2019-05-13T01:19:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 May 2019 15:09 UTC](https://discourse.nodered.org/t/using-uibuilder-with-webpack/7283/7 "2019-05-13T15:09:46Z")

</div>

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 🥴