WIX Code editor development environment alternatives

Dear community and WIX developers,

Although the WIX Code editor is a fine product, many will agree that nothing beats your own set-up. Having the code on your local machine brings practical advantages such as (git) version control and unit tests. These become a must for bigger projects, in my opinion.

Right now, I am developing in WebStorm and when I want to try out or publish the changes, I have to manually copy over the code, file for file. Does anybody from the community or maybe a WIX developer have a better (automated) solution for this? In general, can you share your favourite WIX Code development environment tips and tricks?

PS: For those interested, my current set-up allows me to run automated unit tests with Mocha in WebStorm. If anyone else wants to do this, they will probably run into the same problem I did, which is handling the wix-* dependencies such as wix-users, wix-fetch, etc… We need to mock these somehow.

To do this, add a mocks folder to your project root and for each dependency (say wix-fetch) that you use, add a folder with a package.json file and an index.js file:

// ./mocks/wix-fetch/package.json
{
  "name": "wix-fetch",
  "version": "0.0.1",
  "dependencies": {
    
  }
}
// ./mocks/wix-fetch/index.js
module.exports = {fetch: require('node-fetch')};

In your root package.json, add this local dependency:

// ./package.json
// ...
"dependencies": {
  "node-fetch": "^2.1.1",
  "wix-fetch": "file:./mocks/wix-fetch"
},
// ...

In this case, we are lucky and there is a substitute for wix-fetch (namely node-fetch) and the functionality will be the same! But usually, as is more traditional with mocks, you could return static dummy data as well, or whatever the unit test needs. I hope this will be of help to anybody out there.

4 Likes

Hi bierlee,
excellent stuff.

we are working on a way to integrate an external IDE into the wix ecosystem.
no timelines yet…

we’d love to get more feedback on your expectations and likes/dislikes of wix-code…

@Ziv: How about just Git integration? That would be an enormous feature already, since if there’s Git there’s merging/branching.

@hbierlee: I’m forcing my team to have the same setup too. Since the Wix Editor has been really unstable these days due to the updates, I don’t want to lose our code.

We also have multiple Feature instances for branching, though merging is always a mess. Our rule of thumb is to merge from master as soon as possible, i.e. daily, so that we don’t have to handle the big conflicts at the end of the sprint.

One idea to automate the copy/paste new changes to Wix Editor is to use Selenium to run a Chrome instance, then specify a hotkey to trigger the copy/paste event. I’ve been trying that for a few days but it took too much RAM to perform (Chrome + the heavy Wix Editor + huge JS project).

@Luan: Selenium is a really good idea, can’t believe I didn’t think of that! But my macbook air probably won’t be able to handle that load either. If I can ask, what’s your team working on? And how do you coordinate Wix Code development with multiple developers? Does everybody have their own site for testing? How is your unit test set-up?

Since my project is open-source, you might want to take a look at the mocks I created and the rest of my current set-up. Maybe you can re-use some of them, although I didn’t spend too much time on it so it’s far from complete: GitHub - hbierlee/wix-paid-membership: Paid Membership with Wix Code

Git integration would be a big plus, but as with everything I’d like to manage that one on the local side as well.

As I discussed with a Wix product owner, my idea to make this work would be a wix-code-sdk NPM package which has the following features:

  1. A ‘deploy’ CLI tool script that can upload the code in your project to a Wix site, creating and overwriting the files and their contents on that site. It would also create and configure databases with a json file (which specifies the database schema and access rights). This should be secured behind an API key / username-password ,so you can only deploy code to sites that you own/are a collaborator on.

In my opinion, this single feature brings two huge benefits that would bring Wix Code to the next level.

Firstly, it would make each Wix Code project that installs the wix-code-sdk package easily shareable with the developer community. In my project, I wrote a 3000 words tutorial on how to install my project, which is of course a serious deterrent. From there on out, a Wix Code package manager (or just an integration with the Wix App market) could be developed where Wix Code projects could be installed by non-developers as well. This would also enable me to push out updates, which is now very difficult and puts a lot of responsibility with my users.

Secondly, making the deploy CLI tool a part of your dev workflow would eliminate all the copy-pasting of code: you could just auto-trigger the script to deploy your latest code changes to your test site on each save (and let it publish as well). You wouldn’t even need the Wix Code editor opened, just let your site auto-refresh. This would save on RAM.

  1. Mocks for each Wix Code dependency
  2. A create-wix-code-project CLI tool that sets up an initial project structure with sample code files and Backend/Public etc. folders

Anyway, in my view this would elevate Wix Code from being a scripting tool to an actual full fledged web-development framework. The Wix Code API is very powerful, so it’s a shame it can’t be put to a more serious use right now.

I have Tweeted one thing… I would really appreciate if every time you activate Wix Code is could ask you if you want to create a GitHub Repo protected and connect your GitHub Account. Then all code on your site would reside in GitHub meaning you could use any editor. That would be great!

I always copy and paste between Visual Studio Code and Wix Editor but I have been lucky to use Wix Editor in all projects without that much troubles at all so for me it works as it is but in larger projects and of course for teams it is a hassle. I just a one guy studio so it is easier for me.

@Andreas Kviby I like that too, do you mean that the code on (a branch of) your GitHub repo would be synced with your Wix Code project on your wix site? That would be a huge improvement too, you could have a separate wix-code-deploy branch that you would push your code too and then it’d be on your site! I’d like to point out that with a wix-code-sdk package with the aforementioned deploy CLI tool, you could add this yourself (at least to your git workflow using a git-hook or something else).

One problem I see: if you want your code to remain private (which I did, at least in the beginning stages), you would be forced to become a paying member of GitHub to create a private repo in order to use this sync feature.

I have developer mode enabled on my site, but I’ve never seen any kind of feature to import and export code. Where do I find that?

Is there any update on this? My team and I are just getting started with Wix, but we building some pretty significant integrations, and would like to be able to store them in Git easily.

Thanks!
Justin D.

Are there any updates? I mean this thread is old, wix code should be a bit more mature now, I think this is a must.