Better Package Manager for Wix CLI Sites

Show and tell
, , , ,
1

If you ever used, or actively using Wix CLI for your Wix websites (not headless) you know there is a CLI command wix install and wix uninstall to install and remove npm packages.

The worst part of this command is that it’s not possible to install or uninstall multiple packages at once. Which is actually supported by npm. For example;

:cross_mark: This one doesn’t work;

wix install axios lodash @wix/stores

:white_check_mark: Instead we have to do this way;

wix install axios
wix install lodash
wix install @wix/stores

And for some reason installs takes longer than classic npm install commands probably due to something extra changes in Wix based config files, or maybe something else I don’t know. :man_shrugging:

There is no way to fix this speed since wix install is required to apply changes to live site.

Say hi to wixn

I built an npm package to fix this and make things a bit easier for devs.

wixn allows you to install and uninstall packages with alias as well as install/uninstall multiple packages with single command.

:white_check_mark: Example for install;

npx wixn i axios lodash @wix/stores

You can use i, install or add aliases for installing packages followed by the packages names.

:white_check_mark: Example for uninstall;

npx wixn rm axios lodash

You can use rm, remove, uninstall aliases for uninstalling packages followed by the packages names.

:white_check_mark: Example with --nx flag;

npx wixn i axios lodash @wix/stores --nx

This will skip the wix install part, to make packages available in the editor quickly.

How it works?

wixn runs install or uninstall commands in parallel and while doing the job it shows you which packages are installed or uninstalled.

To make it faster you can use the --nx flag this will skip wix install part at the end which is enabled by default to apply changes to Wix after installing packages.

When you want to preview things or deploy changes run classic wix install to install all packages in package.json file this will handle everything needed on Wix side, otherwise running npm install only won’t install packages into site.

Things I plan to publish publicly when they are ready;

  • TypeSafe @wix/data package with auto complete and type check features.
  • TypeScript integration for Wix.
  • React integration for Wix with custom elements.

Let me know about your DX with Wix, maybe I build another tool for your pain :smiley:

3 Likes