JZedit is a text/code editor/IDE for JavaScript, CSS, HTML and Node.JS development.

More guides/articles are available in the documentation/ folder (or https://webide.se/about/about.htm)

webide.se ?

https://webide.se/ is the jzedit editor running as a cloud editor. In this readme you will find instructions on how to run the editor locally on your computer, or host it on your own server.

Install instructions

The editor can be download from here: https://www.webtigerteam.com/jzedit/download/

If you only want the server/cloud version, download it from the link above. The easiest way to install the desktop version is via npm:

npm install --global jzedit

Then type npm start to start the editor. Or (if you installed globally) jzedit [path to file]

Making a desktop icon and manually installing

See instructions for your operating system.

Linux:

Open a terminal ...
Install nodejs from nodesource:

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get update
sudo apt-get install -y nodejs

Navigate to the folder where you put jzedit: cd jzedit
Install "node_modules" packages: npm install
Make linux_launcher.desktop and linux_start.sh executable: Via terminal: chmod +x linux_launcher.desktop linux_start.sh Via GUI: Right click, Properties, Permissions tab, Allow executing file as program. Then double click on the icon.
Add desktop shortcut (Unity/GNOME): Unity: Double click on linux_launcher.desktop to start the editor. Then right click on the JZedit icon on the Launcher (left side menu), and select "Lock to Launcher"

Gnome: Run ./linux_create_desktop_shortcut.sh

Or manually run the editor via ./linux_start.sh

Windows

(If you downloaded the .zip package: Right-click on the zip-file, and click "Properties". At the bottom, next to "Security: This file came from another computer" click "Unblock" and then "Apply" otherwise you will get a "this file comes from another computer" warning every time you run the editor)

Download and install nodejs from https://nodejs.org/ (It should come with a packet manager called npm.)
Open a command prompt (Click on start menu => run, then type "cmd.exe")
Navigate to the folder this file is located in via the command prompt: cd path\to\jzedit
Install the dependencies by typing npm install and hit enter in the command prompt.

4.5. If the npm install fails you probably need to install build dependencies for Windows! Easiest method is to open a command prompt (Click on start menu => run, then type "cmd.exe") but right click on "cmd.exe" and select "Run as administrator". Then type: npm install --global --production windows-build-tools (try again if it hangs) After nodejs and all dependencies are installed, double click (run) start.bat

Add a desktop shortcut: Double click (run) windows_create_desktop_shortcut.vbs

Mac OS X

Download and install nodejs from https://nodejs.org/ (It should come with a packet manager called npm.)
Open a terminal: cmd + Space, and type terminal
Navigate to the folder this file is located in via the terminal: cd path/to/jzedit
Install the dependencies by typing npm install and hit enter in the terminal.
After nodejs and all dependencies are installed, type this in the terminal: node server/server.js --port=8080 --user=admin --pw=admin -nochroot
Navigate to the following address in your favorite web browser: http://127.0.0.1:8080/

Chromebook

Go to the chrome web store and search for jzedit. It's named "JavaScript & Node JS & HTML CSS editor / IDE" and has an pink/rainbow promo image.

That will use the hosted version on webide.se

We tried to make a pure Chrome app, but that turned out to be too much work.

If you root the device you might be able to install nodejs. And then:

npm install -g jzedit
npm start

Android

We recommend installing the editor on a server. A small VPS will do. Then open the app in a web browser (Chrome) and you will get a "add to desktop" request.

But if you however want to run the editor locally on your phone, you can do this:

Download and run the "Termux" app from the Play store.
Within the Termux app, type "apt update" (without the quotes) and press Enter
Then type "apt install nodejs" and press Enter
Type "Y" and press Enter to confirm you want to install nodejs ...
Type "npm install jzedit" (without the quotes) and press Enter
Type "cd node_modules/jzedit/server" (without the quotes) and press Enter
Type "node server.js --user=admin --pw=admin -nochroot" (without the quotes) and press Enter
Start Chrome and go to url: http://127.0.0.1:8099
You will probably get a dialog about adding JZedit to your home screen. It is recommended that you do so, as it will allow running the editor without browser bars. (note: Add-to-home-screen might not work on some Android versions)
If you added JZedit to your home screen you can now close Chrome and click on JZedit on your home screen.

Note that while you can start the client and connect to another server, in order to run the server on your Android device you have to start Termux and repeat step 6-7 above every time, so you might want to automate it, for example adding it to your .bashrc so that the server starts every time you start the Termux app. And/or use Tasker or other app to make the both the server and the client start at the same time, in one click.

Able to type jzedit via "unix" terminal without installing via npm --global

In a unix like environment it's possible to open files and even pipe to bin/jzedit, in order to send streams of text to the editor. Just add the bin folder to your PATH environment variable:

export PATH="$PATH:/path/to/node_modules/jzedit/bin"

Put it in ~/.bashrc to make the PATH update permanent.

Able to type jzedit in Windows command prompt without installing via npm --global

Add the jzedit/bin folder to the Path environment variable: (Windows 10) Start > Settings > System > About > System info > Advanced system settings > Environment variables ... Select: Path, then click Edit, then New, and write:

C:\path\to\where\you\installed\node_modules\jzedit\bin\

(tip: Use the file explorer to navigate to the jzedit\bin folder, then copy the path/address) Click OK > OK > OK You have to open a new Command Prompt for the change to take effect.

Permission issues when installing via npm using --global flag

When installing globally npm wants to put packages in places that might require root/administrator privileges. To fix this on a unix-like system such as Linux you can create a special folder for npm to put global files in:

mkdir ~/.npm-packages

cat <<EOT >> .bashrc
# Install global NPM packages in home dir
NPM_PACKAGES="~/.npm-packages"
export PATH="$NPM_PACKAGES/bin:$PATH"
EOT

npm config set prefix=$HOME/.npm-packages
npm install --global jzedit

Missing npm build dependencies

All native module dependences are optional, but they are nice to have! Typical sign of missing build dependencies is that you get a bunch of errors when installing via npm. Installing the following packages should satisfy the build scripts: node-gyp python2 make gcc g++

On Windows the following npm package will install the build dependencies:

npm install --global --production windows-build-tools

NPM Error: Failed to replace env in config: ${APPDATA} on Windows

Edit file as Administrator: C:\Program Files\nodejs\node_modules\npm\npmrc Replace "prefix=${APPDATA}\npm" with "prefix=C:\Program Files\nodejs\node_modules\npm"

Using Git repositories with Mercurial on Windows

You need to install "hggit" which is a Python module for Mercurial. It is however very tricky to get it to work ...

If you are brave:

Install Python, Mercurial and TortoiseHg if it's not already installed
Install hggit: (see https://hg-git.github.io/)
Generate SSH key and edit mercurial.ini

Running the editor in Google Cloud Shell

Try this link: https://console.cloud.google.com/cloudshell/editor?shellonly=true Or go to https://console.cloud.google.com/ Login with your Google account.
If the shell terminal didn't open by itself, click on the icon in the top right that looks like >_ and says "Activate Google Cloud Shell" It will bring up a virtual pseudo-terminal at the bottom. Click on it to start typing ... curl https://www.webtigerteam.com/jzedit/download/
Take notice of the latest server release for jzedit. Then type: wget https://www.webtigerteam.com/jzedit/download/jzedit-v1_alpha-3397-server.tar.gz (replace the number 3397 with the latest jzedit server relase!) This will download the gzipped tar archive.

(tip: Pressing tab in the terminal will auto-complete file paths)

Then unpack the tarball: tar xf jzedit-v1_alpha-3397-server.tar.gz
And go into it's folder: cd jzedit-v1_alpha-3397-server
Install dependencies: npm install
cd into the server directory: cd server
Start the nodejs server node server.js --username=yourname --password=changeme --port=8080 --ip=127.0.0.1 -nochroot

The server should now be listening to http port 8080 and ip 127.0.0.1

If this was a normal shell you should have made it listen on the public IP instead of 127.0.0.1 and open http://public-ip:8080/ in a browser. But in Google Cloud shell we have to run it via a proxy ...

We want to "preview" the "app" ... (Click on any link in the Cloud API menu ... Clicking on any link will make some new icons pop up to the right top side of the terminal.) Click on the icon that looks like <> and say "Web preview". And select "Preview on port 8080" This will open a new browser tab, that will hopefully load the editor!

Note that some things will be a bit slow as the Google proxy does not support websockets.

How to update

If you installed using npm: npm update -g jzedit

The service worker might have cached and old version of the editor client, so if anything looks weird, try reloading the page. If it still looks weird, hit Ctrl+Shift+I in to start your browser's developer tools, then find the Application tab, click on service worker, then force the service worker to (un)register/update.

Reporting bugs

Open a new file, and write down instructions on how to repeat the bug. Save the file with "bugreport" in the file name (without the quotes) Then hit Ctrl + Shift + S to post it. (There will be a confirmation box).

Editing files on remote computers

The editor opens TCP port 8080 (configured via remote-file-port) for receiving remote files. You can install bin/jzeditr on the remote computer, and then use jzeditr as an editor replacement. The files will be opened on your your local developer machine that is running JZedit.

installing jzeditr on a remote computer (it also need to have nodejs installed!):

wget https://www.webtigerteam.com/jzedit/download/jzeditr
chmod +x jzeditr
sudo mv jzeditr /usr/local/bin

You might also have to configure the firewall to allow incoming connections to your developer machine. And also allow the remote computer to connect to your developer machine.

Font settings and styling

The editor only works with mono-space font's (because of the "grid").

Make style changes in settings_overload.js instead of EDITOR.js

For the optimal text experience, try different system/OS font settings like hinting etc.

Example: Turn off anti-alias in Windows: Control Panel > Performance Options Visual Effects. Uncheck "Smooth edges of screen fonts"

You can find 'DejaVu Sans Mono' and 'Liberation Mono' in gfx/font, which should look good both with and without anti-alias. (You might need to install them to your system for them to work in the editor!)

"LCD Text" / sub-pixel-antialas

If you take a screen-shot and zoom in, you will notice the text edges has red, green or blue colors! This creates an "anti-alias" effect because each pixel on LCD monitors has a red, green and blue line!

"LCD Text" is the default on most operating systems. But some people might see "rainbows". "LCD Text" is unnecessary with a high-resolution monitor.

Turn off "LCD Text" / sub-pixel-antialas

Set "EDITOR.settings.sub_pixel_antialias = false" in settings_overload.js

To turn off LCD text for the whole browser (and not just the editor's text area) you need to edit linux_start.sh or start.js and add --disable-lcd-text to the browser arguments.

Or turn it off in your operating system! (It's already turned off if you have a Mac with "Retina" display)

Re-compiling dependencies for other version of Node.JS

node-gyp rebuild --target=1.2.3

Misc

How to hide the annoying menu in Android that covers the virtual keyboard

Go into settings... Look for browser bar (General settings: Toolbar).. Select to turn it off.

Running as a cloud editor

You can use the editor "natively" running on your desktop via nw.js or in the browser. But it's also possible to use the editor as a "cloud" editor, running on a server, and access it via a web browser.

It's recommended to use ZFS (file system) on the server, so each user can have their own file-system and be able to take snapshots etc.

Running the cloud server on Windows

It is not recommended to run the cloud server on Windows due to lack of Apparmor, and no POSIX commands like chroot and setuid, meaning that all users will have the same access rights as the user running the server (DO NOT run the server with a Admin account!)

For the cloud server to run on Windows, first install Node.JS build dependencies and Mercurial. And run npm install. Then you manually have to activate each user by creating a .jzeditpw file in their user directory, with the hash generated from node hashPw.js

To start the server:

node server/server.js -p 80 -nochroot -virtualroot -noguest -h C:\Users\

The following text assumes you are on a Unix/Linux like operating system ...

Installing/upgrading Nodejs

Uninstall nodejs if it's already installed, then install it foromnodesource. See https://github.com/nodesource/distributions

sudo apt remove nodejs && sudo apt remove npm

Using Ubuntu:

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt update && sudo apt install -y nodejs

Note: nodesource will use /usr/bin/node, not /usr/bin/nodejs (which is used by Ubuntu) !

Installing certbot (letsencrypt)

sudo apt-get update
sudo apt-get install software-properties-common
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python-certbot-nginx

Automatically set up the server for running jzedit as a cloud-IDE:

If you have a Linux (Ubuntu) server you can run this install script: node cloudide_install.js --domain=yourdomain.com

The editor will be installed as a SystemD daemon.

Start the jzedit server: sudo systemctl start jzedit

Edit /etc/nginx/sites-available/yourdomain.com.nginx

To check for Nginx config problems: nginx -T

Installing vnc dependencies

sudo apt update
sudo apt install xvfb x11vnc chromium-browser

Adding and removing jzedit users

Use the following script to add users to the cloud ide: ./adduser.js username password

To remove a user: ./removeuser username

Error: Command failed: umount "target is busy"

ps -aux | grep node
kill -s 2 810460 
sudo -u username kill 810460

You might have to reboot in order to unmount all directories.

mySQL setup

ref: https://dev.mysql.com/doc/mysql-secure-deployment-guide/5.7/en/secure-deployment-configure-authentication.html

Add these options under the [mysqld] option group in the MySQL configuration file (/etc/my.cnf):

[mysqld] plugin-load-add=auth_socket.so auth_socket=FORCE_PLUS_PERMANENT

You might have to run the following query (logged in as root to the mysql console): install plugin auth_socket SONAME 'auth_socket.so';

Then run: service mysql restart

Login to mysql again to make sure auth_socket is activated: SELECT PLUGIN_NAME, PLUGIN_STATUS FROM INFORMATION_SCHEMA.PLUGINS WHERE PLUGIN_NAME LIKE '%socket%';

Try creating a user: CREATE USER somelocaluser@localhost IDENTIFIED WITH auth_socket; DROP USER somelocaluser@localhost;

Make it so root can login without a password: ALTER USER 'root'@'localhost' IDENTIFIED WITH auth_socket;

PS. You might then only be able to login to mySQL using the system root user and via the unix socket! sudo -u root mysql --socket /var/run/mysqld/mysqld.sock

Delete iconv-lite in mysql2 Node.JS module: iconv-lite lazy loads some files, which will not work once the editor have chrooted and changed user id, so we need to use the editors patched version of iconv-lite. Simply delete node_modules/mysql2/node_modules/iconv-lite (you might have to do this every time you have run npm, awaiting a better fix)

Apparmor debugging

sudo apt install apparmor-utils
sudo service apparmor reload

Add missing rules in profile: sudo aa-genprof /usr/bin/nodejs_test123

Sometimes aa-genprof doesn't find everyting sudo aa-logprof

See what's going on: tail -f /var/log/kern.log

example problem: profile transition not found

is the profile active ? sudo apparmor_status | grep nodejs

does it exist ? ls /etc/apparmor.d/ | grep nodejs

is it disabled ? ls /etc/apparmor.d/disable/

Temporary stopping apparmor

sudo service apparmor stop
sudo service apparmor teardown

Complain to allow everything but show logs sudo aa-complain /home/demo/usr/bin/hg

Put a profile back into enforce sudo aa-enforce /home/demo/usr/bin/hg

See systemd logs: sudo journalctl -x

Try running the command inside/outside the chroot: sudo chroot --userspec=ltest1:ltest1 /home/ltest1/ bash

Also see: http://manpages.ubuntu.com/manpages/bionic/man5/apparmor.d.5.html

Job for apparmor.service failed because the control process exited with error code & Reload failed for AppArmor initialization. service apparmor status will show the error message and what line the parser error is on

Installing more programs to the users folder (chroot)

Where is the program ? which python

Edit server.js and add the program and dependencies to be mounted when a user logs in

What libs are used ? ldd /usr/bin/python Make sure they are mounted in the user's home dir. See server/server.js function checkMounts

Try to run it in chroot chroot --userspec=ltest1:ltest1 /home/ltest1/ /usr/bin/python -c 'print "hi"'

Find all other dependencies and mount or copy them into the chroot (users home dir) See: https://unix.stackexchange.com/questions/18844/list-the-files-accessed-by-a-program

wget https://gitlab.com/ole.tange/tangetools/raw/master/tracefile/tracefile
sudo chmod +x tracefile
sudo apt install strace
./tracefile python

Outside the chroot (where it works): ./tracefile -deu node pty.js Then also run it inside the chroot, and compare the output

Create an apparmor profile !

Debugging Error: spawn EACCES

Figure out where the spawning error is by console.log spawn exe and arg at every spawn
Try running the command in a chroot, for example: sudo chroot /home/ltest4/ node -v
Try running the command as that user: sudo -u ltest4 node -v

Debugging Error: spawn ENOENT

It's possible that the error is an Apparmor EACCESS in disguise. So try disabling apparmor
If the process starts, but tries to find a file and exits with an ENOENT. Try running in chroot. The error might be related to the PATH env variable. So make sure PATH env exist var opt = {env: {PATH: "/bin/:/usr/bin"}}
It might be because of spawn's cwd option not being a directory or not found

Moving user to another server using ZFS

Run this command from the server you want to move the user TO: ssh root@whereuserat 'zfs snapshot fromvol/home/nameofuser@backup && zfs send fromvol/home/nameofuser@backup' | sudo zfs receive tovol/home/nameofuser

(The same method can be used to make backups, see backup.sh)

Enable the user on the new server by adding a new system account: sudo useradd -r -s /bin/false nameofuser

Take a snapshot before upgrading the server

It's a good idea to take a system snapshot before making system updates, so that you can roll back in case something goes wrong.

sudo zfs list -t snapshot
sudo zfs snapshot ben/ROOT/ubuntu@upgrade
sudo apt update && sudo apt upgrade

cannot create snapshot 'ben/ROOT/ubuntu@upgrade': dataset already exists

sudo zfs destroy ben/ROOT/ubuntu@upgrade
sudo zfs snapshot ben/ROOT/ubuntu@upgrade

optional: To prevent running out of disk space, remove packages no longer needed sudo apt autoremove

Always reboot after a system upgrade to check if the system boots with the new upgrades You don't want the system to be stuck at boot during a unplanned reboot (for example automatic start after power failure)

Regularly run zpool scrub

You want to check the hard drives from time to time: sudo zpool scrub tank

Also install smartctl to monitor hdd errors: sudo apt-get install smartmontools

See disk info:

ls /dev/disk/by-id/
sudo smartctl -x /dev/disk/by-id/ata-TOSHIBA_DT01ACA300_Z7I4AR5AS

Problems cloning from Github

Make sure the server has hggit installed! python -c "import hggit" (should not give an error if it's installed) How to install:

sudo apt-get install python-pip
sudo pip install hg-git

Make sure hg-git and dulwich is installed in /usr/local/lib/ and not /home If hggit doesn't work in chroot, try:

sudo su
pip install dulwich
pip install hg-git

You might need to reboot the server to clear mounted libs

Problems running apt

You might get an error like this: unable to make backup link of './usr/bin/python2.7' before installing new version: Invalid cross-device link

This is because the program is mounted in user dir's. Stop jzedit and then reboot the server to release all mountpoints.

Testing in Opera Mobile

Download Opera Classic Mobile Emulator: https://www.opera.com/developer/mobile-emulator Mac: brew cask install opera-mobile-emulator

Download Opera Browser version 12 (we need the debugger, aka. Opera Dragonfly) https://get.geo.opera.com/pub/opera/linux/1216/

Goto any web page in Opera 12 - right click and select "Inspect Element". This will start the debugger

In the Opera 12 Debugger, top right corner there is an icon that looks like |))) it says "Remote Debug Configuration" Click the "Remote Debug Configuration" icon, and then click on the Apply button next to the port number.

Now start Opera Classic Mobile Emulator. Enter opera:debug in the URL field. Enter the IP for the machine Opera 12 is running on. Then enter the port nr (default 7001). Click Connect.

Note: This also work on the Opera Mobile app

Once Opera Mobile is connected to the Debugger, you can control it from the debugger.

If you have not done it alredy, start up a node JZedit server: sudo node server/server.js -p 8080 -ip 192.168.0.1 (change IP to the machine's IP)

Click "Console" in the Opera 12 debugger Type: document.location="http://192.168.0.1:8080/"; And click Enter. This should make Opera Mobile to navigate to that page. And you will see all console.log's etc in the debugger!

If the connection is lost you must restart Opera Mobile.

jzedit