CocoonJS CLI now with live reload

At Ludei coding never stops, and today, we’d like to introduce to you the new feature we’ve added to our CocoonJS Command Line Interface: live reload.

We are javascript developers too and we’re aware of the need of being productive. We realized we needed a faster way to iterate over our JS code, so why not include the live reload capability to our CLI?

For those who don’t know what live reload is, this feature reloads automatically the code of your app inside the connected browsers each time you save your changes. This way you forget about saving, going to the launcher, and refreshing the content to see the changes every time.

How do I benefit from this new feature?

First of all you must update your cocoonjs-cli version. You can find more information about our CLI here.
sudo npm install -g cocoonjs
Then, you can create a new project, as always:
$ cocoonjs create MyProject com.ludei.test LudeiTest
$ cd MyProject
$ cocoonjs platform add android
$ cocoonjs serve

You’ll read a message like this one:

[CocoonJS] Executing command 'serve'
[CocoonJS] A 'cordova prepare' is needed before executing 'cordova serve'.
[CocoonJS] Command 'cordova prepare' executed correctly.


[CocoonJS] Static file server running on port 8070 (i.e. http://192.168.0.43:8070)
[CocoonJS] Path: /Volumes/data/hello-world
[CocoonJS] CTRL + C to shut down

Now, open a launcher an point to that web address. In our case http://172.16.100.43:8070. You’ll find the default main page. Also, if you are working in the same machine where the command was executed, you can point to the loopback/localhost interface (127.0.0.1).

Open the contents of the www folder with your code editor, and edit them. Each time you save the code, the launcher will refresh with the new content!

The video below is a good demo.

We hope you’ll love it!

8 Comments CocoonJS CLI now with live reload

  1. avatarMathias

    Doesn’t work for me. I have a fresh install, I managed to serve my files, but when I edit these files, nothing happens.

    Reply
    1. avatarAbdul Martínez

      Hi Mathias,

      It’s a big fail in our side. Please, update de CocoonJS CLI (sudo npm install -g cocoonjs) to the latest version just published, and test again.

      There is a know issue when using webview+ with cordova 3.6. We are working on it. Please, if it is possible, use cordova 3.5.

      Thanks for your feedback!

      Reply
  2. avatarzoomclub

    This looks great! What is involved in setting this up in Webstorm 9 with a preexisting SPA project? The cmds listed above seem to indicate that I need to create a whole new opinionated project structure?

    Or can I just CD into my existing project and run:

    $ cocoonjs platform add android
    $ cocoonjs serve

    It would be helpful to see a step by step tutorial. Right now I’m still using Gulp, bundling with Webpack then zipping everything up and dragging it into the Launcher 🙂

    Reply
    1. avatarTxus Ordorika

      @Alec check you’ve the latest cocoonjs-cli version installed. If you’ve any other issues, please post in the github of the project.

      Reply
  3. avatarDan

    I followed the example on this page, created a new project, and can’t get this to work with Canvas+ on ipad.

    I don’t think it’s even pointing to the right file, it won’t refresh, and i can’t find where the file is to edit.

    Everything is up to date.

    Terminal shows me this:
    [CocoonJS] Static file server running on port 8070 (i.e. http://192.168.0.100:8070)
    [CocoonJS] Path: /Applications/MAMP/htdocs/bowertest/MyProject/www
    [CocoonJS] CTRL + C to shut down
    [CocoonJS] Serving file /

    Then in Canvas+ it only shows me a black screen with the Ludei logo in the top left corner.

    Using the same address and port on Webview shows a black screen, ludei logo, and text with:
    Project Information:
    Available Information:
    ios
    Missing platforms? run $ cocoonjs platform add

    And the same,

    Reply
    1. avatarDan

      Just incase MAMP was having any effect on it, i shut it down and created a new project on my desktop. Still getting the same results.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *