Xdpm webpack plugin (live reload on build)

Built a webpack plugin that automatically syncs your code to the AdobeXD development folder (live reloads your built code). Under the hood its using XDPM, so now you can run weback --watch and you don’t need to copy anything, xdpm will automatically be called everytime webpack builds a new file.

9 Likes

So cool – it was just yesterday that I was looking for something like this :slight_smile::+1:

Really nice!

Now we just have to get XD to auto-reload plugins when they change underfoot. :wink:

1 Like

Nice! Is the code hosted somewhere? It would be nice to add some of the command line options as configuration!

https://github.com/tato123/xdpm-webpack-plugin :wink:

I didn’t see this until now (a bit late, eh?), but I just use

  "scripts": {
    "watch": "nodemon -w src -e js,jsx,json,css -w manifest.json -w webpack.config.js -w package.json -w .babelrc -x 'yarn build && xdpm validate -j && xdpm install -j -w p -o'",
    "build": "webpack --mode development",
    "release": "webpack --mode development && xdpm package"

},

in package.json, and it seems to work well. (First uses xdpm to validate, then to install in the prerelease with json output (to stop the blather).)

The important thing is to catch all the dependencies of source and build files.

Along with a set of appropriate .xdignore and .gitignore files.

The main difference with the plugin is that it can be used with webpack watch and allow publishing on file changes.

Since my scripts use xdpm when watching, they do the same: build and install on any source/config file change.

1 Like

Interesting, many different ways to slice the problem. That’s really good to know :slight_smile: