Rebecca Rumble

As part of my XD Plugin project I needed to use Node.js, npm and WebPack.js . I’m documenting this for my future reference.

Installing Node.js also installs a copy of npm. According to npm the copy of npm that Node.js installs is often out of date so I followed their instructions to install.

npm install npm@latest -g

Once that was installed I then installed Webpack.js using their instructions here : https://webpack.js.org/guides/installation/

Once I had finished that I went through the webpack basic tutorial in Terminal to get an idea what it was for.

The XD Plugin React tutorial I was following also uses Yarn so installed that as well. Yarn uses homebrew to install which I already have installed (it’s very useful).

The basic steps when creating a project that will be using a package library seems to be:

1. Create a Project folder (mkdir)
2. Navigate to above folder (cd)
3. Create a package.json file (init) without asking questions ( -y )
4. Install webpack locally and install webpack-cli this is used to run webpack on the command line

mkdir xdpluginreact
cd xdpluginreact
npm init -y
npm install webpack webpack-cli --save-dev

This creates the following files:

It is a good idea to seperate your plugin out into Dev and Distribution since we won’t need all the extra node_modules etc.

To create the initial plugin I followed the XD react tutorial: https://adobexdplatform.com/plugin-docs/tutorials/quick-start-react/

But when you finish that you end up with the main.js file located inside your development folder. You won’t want to copy the entire thing into Adobe XD because you don’t need all of it.

Adding a Distribution Folder

We want to end up with this instead:

The example-plugin folder in the dist (distribution) folder is the one that gets copied to Adobe XD.

$ mkdir dist
$ mkdir dist/example-plugin
$ mv manifest.json dist/example-plugin
$ rm main.js

This creates the dist folder
Then Creates the example-plugin folder inside the dist folder
Moves the manifest.json (a file which Adobe XD needs) to dist/example-plugin
Deletes the currently compiled main.js

Then we need to change a couple of things. Open package.json and change the following line :

"main": "dist/example-plugin/main.js",

Open webpack.config.js and change the following line in the output section:

filename: "dist/example-plugin/main.js",

If I run yarn now this will create the main.js in the desired location

$ yarn build