node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

ixcanul

Ixcanul (Code editor)

Ixcanul is an effort to open source the code editor used in the Volcanic platform to all the developers in the company. Ultimately the code editor is just JS + CSS so any developer (backend/frontend) in the company has the skills to assist in the development. Instead of keeping the code in the Volcanic source code and allowing only a few backend developers to edit the code, we believe that if we open it to all our developers we can achieve a really powerful tool in a much shorter time.

npm run watch

Watch the src files for changes and automatically regenerate the debug files.

npm run test

Runs the jest test runner on your tests.

npm run build

Create the debug and minified builds in the dist folder.

release-it

Automatically bump version, commit, tag, push, done.

Local development

Developing locally would be quite difficult without the Volcanic code source because we would need to release a new Ixcanul version each time we wanted to make a change, fix a bug, develop a new feature, etc. On top of this, once it's released we would have to test the change in the code to ensure it works as expected in any site editor as you cannot test it locally.

As releasing a new version each time we want to modify the code is not a workable solution, this library supports a watch script that regenerates the debug files /dist/ixcanul.js && /dist/ixcanul.css each time any file is changed. We can then use ngrok to securely expose our local files to the internet and pass a local_url param in any site editor to start using our local files.

How to develop locally?

First you have to install ruby and ngrok (instructions below).

Option 1 (good for debugging):

  • cd into the project's root directory and run npm run watch.
  • cd into the project's root directory and run ruby -run -e httpd . -p 8080.
  • cd into the project's root directory and run ngrok http 8080.
  • Then go to any site editor and pass a local_url param to use your local files. Ej: http://domain.com/admin/code_editor?local_url=[ngrok_url]

Option 2:

  • cd into the project's root directory and run npm run develop. ###### The develop script is a shorthand that run the option 1 commands for you.

  • Then go to any site editor and pass a local_url param to use your local files. Ej: http://domain.com/admin/code_editor?local_url=[ngrok_url]

To build the production project version "/dist" run the following command
  • npm run build
  • if you get errors on this command, try to fix with: npm install -g browserify and npm install -g uglify-js

Happy coding!

Installing ruby on OSX

brew install ruby

Start ruby server

You can quickly boot up a local webserver using ruby. cd into the project's root directory and run ruby -run -e httpd . -p [port number].

Installing ngrok on OSX

  1. Download ngrok
  2. Unzip it to your Applications directory
  3. Create a symlink (instructions below)

Creating a symlink to ngrok

Run the following two commands in Terminal to create the symlink.

# cd into your local bin directory 
cd /usr/local/bin
 
# create symlink 
ln -s /Applications/ngrok ngrok

This will allow you to run the ngrok command from any directory while in the terminal. Without the symlink, you would need to either cd into the Applications directory (or wherever you installed the executable) or reference ngrok with its full path every time (e.g. /Applications/ngrok 5000)

Using ngrok

The easiest way to use ngrok to tunnel into your localhost is if your local project is running on a specific port (e.g. not using named vhosts). You just run ngrok http [port number].