? Editing: Post:21.body Save Delete Cancel
Content changed Sign & Publish new content

ZeroBlog

Demo for decentralized, self publishing blogging platform.

Follow in NewsfeedFollowing

Latest comments:

Add new post

Title

21 hours ago · 2 min read ·
3 comments
Body
Read more

Not found

ZeroNet site development tutorial #1

on Jun 22, 2015 · 2 min read

This tutorial demonstrates how to create a simple, multi-user, p2p chat ZeroNet application.

In this, first part we going to create a new site then add some simple html and javascript that interact to the ZeroNet client using the ZeroFrame API.

Creating a new site

  • Open a console in your ZeroNet directory
  • Execute zeronet.py siteCreate command (or ..\python\python.exe zeronet.py siteCreate if you using ZeroBundle package)
  • A new site will be created for you and the private key is displayed in the console window. Save it, you can only modify your site using this key.
  • Type: yes

That's it! Your site should be on the ZeroHello screen.

Now lets fill it with content...


Start ZeroNet in debug mode

This is optional, but recommended, because the tutorial (and all sample) code is written in CoffeeScript.
The debug mode features automatic coffeescript -> javascript conversion, so you don't have to do it manually.

  • Close ZeroNet
  • Start ZeroNet using zeronet.py --debug command

(note: the coffeescript compiler bundled for windows, if you are in different platform you have to install it using npm install -g coffee-script)

Edit index.html

Create a simple html structure to display the messages:

  • Navigate to data/[yoursiteaddress]
  • Edit index.html:
<html>
<body>
<input type="text" id="message"><input type="button" id="send" value="Send!"/>
<ul id="messages">
 <li>Welcome to ZeroChat!</li>
</ul>
</body>
</html>

The first ZeroFrame API calls

Note: To disable browser's caching keep the JavaScript console opened (F12)

The ZeroFrame API allows you to query server/site/user info, load or modify files using a WebSocket connection to your ZeroNet client.

Create js and a js/lib directories then download and copy ZeroFrame.coffee file to js/lib, this helps using the ZeroFrame API

  • Create js/ZeroChat.coffee file with following content:
class ZeroChat extends ZeroFrame
    init: ->
        @addLine "inited!"

    addLine: (line) ->
        messages = document.getElementById("messages")
        messages.innerHTML = "<li>#{line}</li>"+messages.innerHTML


    # Wrapper websocket connection ready
    onOpenWebsocket: (e) =>
        @cmd "serverInfo", {}, (server_info) =>
            @addLine "serverInfo response: <pre>" + JSON.stringify(server_info,null,2) + "</pre>"
        @cmd "siteInfo", {}, (site_info) =>
            @addLine "siteInfo response: <pre>" + JSON.stringify(site_info,null,2) + "</pre>"

window.Page = new ZeroChat()

This code will query all info about the site and the server (your ZeroNet client) right after websocket connection is ready, then add the result as json formatted text to messages html node.

  • Add <script type="text/javascript" src="js/all.js" async></script> line right before </body> in index.html file to automatically compile and merge all .coffee file within the js directory to a single all.js file.

  • If everything went well it should look like this:

Tutorial
And you should have the following directory structure:

data/[your site address]
├─ js/
│  ├─ lib/
│  │  └─ ZeroFrame.coffee
│  ├─ ZeroChat.coffee
│  └─ all.js
├── index.html
└── content.json
  • Every time you finish the modifications on your site you have to sign and publish the new content using the zeronet.py siteSign [yoursiteaddress] --publish command

53 Comments:

user_name1 day ago
Reply
Body
sirhypernova3 days ago
Reply

this is cool

jlxipon Oct 10, 2017
Reply

This is great! A bit deprecated, but anyway, thank you very much.

border0464fredon Dec 04, 2016
Reply

cnocg: Is it posible to develop a zeronet site avoiding using ZeroFrameAPI(i.e. ZeroFrame.coffee)? Is it capable to use more basical things, such as http request or http API?

yes it's completely possible if you do a static website.

border0464fredon Dec 04, 2016
Reply

INB4 Im sorry to leave a negative comment.

Coffeescript, file concatenation, and minification are oprimisation features.

Not requirements. The tutorial should be keep as simple as possible.

Optimisation should go in it's own section for people interested in optimisation/best practices tutorials.

Usualy I prefer submit patches then complain. But At this point the tutorial and documentation are so poorly written I just can't figure out how it should be working.

cnocgon Nov 03, 2016
Reply

Is it posible to develop a zeronet site avoiding using ZeroFrameAPI(i.e. ZeroFrame.coffee)? Is it capable to use more basical things, such as http request or http API?

andrewmon Aug 18, 2016
Reply

For anyone having trouble with the serverInfo appearing and have tried other options, make sure you have the --debug flag enabled when you're running ZeroNet, and that you've checked "This is my site" in the sidebar of your site. Also when refreshing the site use Ctrl-Shift-R to clear the cache.

If it's still not working, and you have a data_dir set in your zeronet.conf file, try # commenting that out, coffee-script has an issue with prepending that line to the filepath of your all.js file in the current zeronet build v1422.

zeronautaon Aug 09, 2016
Reply

zeronet.py siteSign [yoursiteaddress] --publish : Exception: Directory not exists: data/...... though it definitely exists (and yes, I filled in site address correctly)

Try to execute ./ZeroNet.sh siteSign [yoursiteaddress] --publish

if I just do : ZeroNet sitePublish it does something, but then when I visit the page: js error: ReferenceError: ZeroFrame is not defined > })(ZeroFrame);[I have zerofram.coffee in the js/lib folder]Do you need to update the tutorial?

zerofram.coffee ? ZeroFrame.coffee, I think the name matters because ZeroChat.coffee extends ZeroFrame

My problem is with /usr/bin/env node: no such file or directory

boton Aug 08, 2016
Reply

@34f... I've done this tutorial several times (last was about a week ago) so your error indicates something unique to your directory structure. Any spaces or unusual characters?

34f34f34f34fon Aug 08, 2016
Reply

this tutorial doesn't work. I get errors.

zeronet.py siteSign [yoursiteaddress] --publish : Exception: Directory not exists: data/...... though it definitely exists (and yes, I filled in site address correctly)

if I just do : ZeroNet sitePublish it does something, but then when I visit the page: js error: ReferenceError: ZeroFrame is not defined > })(ZeroFrame);
[I have zerofram.coffee in the js/lib folder]
Do you need to update the tutorial?

nerrawon Jul 31, 2016
Reply

1) for server-side type coffeescript/zeroframe, like allowing posts, do I have to leave my client open? or will those requests/posts be handled by peers? 2) is it very possible to just write javascript, or is coffee script required? 3) if peers do handle posts, like from 1, how is integrity checked, like to make sure they handled the post the right way?

border0464fredon Jul 30, 2016
Reply

gomzik: ES6 Version of ZeroFrame - https://gist.github.com/GomZik/02e85df5fb7a5eb819cd

thx Now this I can read it :D

magoon Jul 30, 2016
Reply

Tips to avoid CoffeScript's "indentation Hell":
Use an CoffeScript certified editor with ASCSI explicit file encoding support, my personal choice is pyCharm Professional (community has no CoffeScript support), then harmonize the Indent to "2 spaces" ACROSS THE WHOLE PROJECT (check ZeroFrame.coffe also).
those compiling .coffee from command line, ADD an BLANK LINE AT THE END OF EACH PROJECT FILE
since

$ cat lib/*.coffee ZeroChat.coffee | coffee --compile --stdio > all.js

just concatenates the .coffee files before compile thus the first line at a .coffee file may appear to be a continuation from the last one on the previous one.

magoon Jul 30, 2016
Reply

Those on macOS read:
To run Zeronet, rename the file "ZeroNet.app" in the Zerobundle to "ZeroNet.sh" then run with

$ sh ZeroNet.sh

or

$ sh ZeroNet.sh --debug

gomzikon Jul 30, 2016
Reply

border0464fred: Any doc with javascript ? I don't want to learn this coffeeScript thing. And seem like I would not have to do it as it run in javascript in reality. (from What I understand)

ES6 Version of ZeroFrame - https://gist.github.com/GomZik/02e85df5fb7a5eb819cd

border0464fredon Jul 30, 2016
Reply

Any doc with javascript ? I don't want to learn this coffeeScript thing. And seem like I would not have to do it as it run in javascript in reality. (from What I understand)

magoon Jul 24, 2016
Reply

those on Ubuntu read:
to run the commands referenced by this tutorial on our platform, instead typing "python zeronet.py WhatEverCommand(s)..", we should use

.\ZeroNet.sh WhatEverCommand(s)...

Avoid the coffee-script/NodeJS dependencies hell, follow the following directions prior first call to ".\ZeroNet.sh --debug" (to compile zeronet's .coffee):

Unistall and clean NodeJS

sudo apt-get purge nodejs node npm #if you need npm for other taks, install it later, Google for help

Install Latest ESTABLE 4.X NodeJS:

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

Update the simlink from node to nodejs:

sudo rm /usr/bin/node
sudo ln -s "$(which nodejs)" /usr/bin/node

Then and only after the complete all the previous steps, you can install coffee-script but avoid npm, its problematic, instead use apt-get (an reliable coffee-script installer resides in the Universe Repo -enable this repo if you dont have enabled yet-)

sudo apt-get update #only if you just enabled the universe repo, otherwise not needed
sudo apt-get install coffeescript

reboot just to double down.

reboot

more, be careful on text encoding, coffee-script skips files not in ASCII encoding (as the ubiquitous utf-8), my suggestion is to use gedit as editor, it just work if you install this package "https://github.com/wavded/gedit-coffeescript" also highlights coffee-script syntax. my personal preference is pycharm but I only have pro license on my mac not on my linux system (which I use for minor tasks).

Now you can follow the tutorial.
\============================================================
Later I'll post a similar guide for macOS (p.k.a. OS/X).

PD. about the example, there is a minor typo at :

"<script type="text/javascript" src="js/all.js" async></script>"

instead async, you should use asyc (w/o 'n), just like this:

<script type="text/javascript" src="js/all.js" asyc></script>'

\============================================================

@bot:
I'm aware every .coffee when compiled get into javascript (this is what coffeescript does), my complaint is that JavaScript code should be the one with the comments and developer guides that will help them to understand ZeroNet.

boton Jul 24, 2016
Reply

@mago All coffeescripts are translated and collected with any javascripts into 'all.js' when we sign the site. We can use javascript exclusively in place of coffeescript as we please.
(see 'Start ZeroNet in debug mode' above)

magoon Jul 23, 2016
Reply

I just begin to develop a commissioned site for ZeroNet, I found serious issues for what ambitions to be an alternative to TOR and classic Internet:

1- Documentation Flaws everywhere, it's a shame, the instructions provided seems should work on Windows I don't know I'm on Ubuntu 16.04 and macOS elcapitan where I use to develop complex Ajax/JQuery/DJango sites and I found ZeroNet Documentation UN-WORKEABLE period.

a.e. when I ran: $> python zeronet.py siteCreate
I only get: import errors.

Also I have an Mac same issue the instructions provided don work on OSX, should one read comments to find a workaround, it's an shame.

2nd I love the way ZeroNet is implemented but I hate some its current code.
Excellent to use .json and torrent sync/distribution to sync/publish site/dynamic content, also using bitcoin address as ZeroNet Address/Site Keys it clever and polite, I love this design as its robust and moreles perfect. but stop here.

2a code accessibility: the samples, seems targeted only to long experienced Zeronet developers, some of the code I reviewed is deliberately or accidentally obscure, whatever is not accessible thats kick-aways casual developers only ones with commissioned works (as me) battle those things, you should re-write all your sample wit enough comments documentation on each section, and never consider the audience is expert on A or Be framework or IDE or OS.

2b CoffeeScript: I save you on your preference on CoffeeScript instead JQuery and just plain javascript, but also is not right, CoffeeScript has its exceptional advantages, is whatever you want but not an popular API, most colleagues hate it (repeat Hate It, being deserved or not is the reality). You should re-work your samples and some of the site code on community popular standard as JQuery or Just plain Java and make it more appealing (easy to read) to the developer masses, I can program using CoffeeScript but I prefer o avoid it on serious sites due the same issue, is not popular among developers and is a pain in the ass to find some one interested to maintain a CoffeeScript based site.

If you really want ZeroNet ro reach a big audience (as deserves, it's an excelent project with transcendental possibilities), you should solve these basic issues:

  • Client/Code/Samples portability (Linux/Mac/Windows version should work as indicated without workarounds or at least you should segregate detailed instructions for each operating system).

  • Obscure Sample Code: I'm fascinated how good are you guys, sometimes I read your code and I'm ashamed on what I do, its fantastic, your abilities are outside the common, but this is a double-edge sword: developers not as good as you cant easy learn with this code, the learning curve is too steep, you should follow the KISS philosophy approaching the coders, if you show them a sample, show one they can understand from first line of code, not assume people will go to desperately learn advanced CoffeeScript site development just to reads your samples, wont do will leave, so there is the need you have to re-write all those samples on more simple code. despite not the most efficient, efficiency is an advanced issue not a learning priority if you want ZeroNet sites to grown.

  • URGENT Improve Project Documentation and Linux/ macOS directions, if you don know ask the community dont force rookies to read all the comments as documentation last resource, rookies dont go deep, they leave period.

  • Adopt community popular programming std, CoffeeScript is not bad, but you should admit is not popular neither you can easy seduce the community to adopt it.

Optional: consider to move ZeroNet Client to Kivy and build for it some basic but minimal intuitive GUI and/or console.

Good news for you ZeroNet team: after deep reading the documentation I consider I could re-code some of the zeronet api to run inside django and create dynamic double-network sites (on classic http web and Zeronet) on the same site with same site basic code it's very possible.

My hope this critic being the most constructive possible, you have an project with awesome potential

I Give you my congratulations and Best Regards,
Mago

existbiton Jul 10, 2016
Reply

adding private key after address, it works.

existbiton Jul 10, 2016
Reply

When publishing, it seems to hang forever, is it ok?

../Python/python.exe zeronet.py siteSign 15RQhBMMiwfCk3t2bSzNPdDPoMC3U82UPP --publish

  • OpenSSL loaded, version: 01000201F
  • Signing site: 15RQhBMMiwfCk3t2bSzNPdDPoMC3U82UPP...
zeher1zeherison Jul 10, 2016
Reply

oh gosh.... i am still scratching my head to understand the ZeroFrame.coffee file. It works fine but i have no idea how this damn thing is working

ceritiumon Jun 11, 2016
Reply

This steps worked fine for me, I am working on Macos.

ceritiumon Jun 11, 2016
Reply

synczero: Someone should update the Docs?".. in index.html file to automatically compile and merge all .coffee file within the js directory to a single all.js file."It does NOT automatically compile and merge.
"GET http://127.0.0.1:43110/xxxxxx/js/all.js 404 (Not Found)"
Also .. compile by myself:cat ZeroChat.coffee lib/ZeroFrame.coffee | coffee --compile --stdio >./all.js"all.js:5 Uncaught TypeError: Cannot read property 'prototype' of undefined"
Did someone work on this site, or whats going on here?

Did you tried to install coffee script with: $ npm install -g coffee-script?

awakenon Jun 09, 2016
Reply

Whom have Debian should install npm install -g coffee-script, and every time restart zeronet.py, remember, in debug mode.

synczeroon Jun 04, 2016
Reply

Someone should update the Docs?
".. in index.html file to automatically compile and merge all .coffee file within the js directory to a single all.js file."
It does NOT automatically compile and merge.

"GET http://127.0.0.1:43110/xxxxxx/js/all.js 404 (Not Found)"

Also .. compile by myself:
cat ZeroChat.coffee lib/ZeroFrame.coffee | coffee --compile --stdio >./all.js
"all.js:5 Uncaught TypeError: Cannot read property 'prototype' of undefined"

Did someone work on this site, or whats going on here?

johnsonon Apr 20, 2016
Reply

has no all.js been generated? why, do I need compile them by myself?

iforgotmyusernamon Mar 18, 2016
Reply

You should probably remove the "(coming soon)" text at the bottom.

iforgotmyusernamon Mar 18, 2016
Reply

eventi: I had to install coffee-script (mac) and compile:
npm -g install coffee-scriptcd js/coffee --compile --join all.js -- lib/ZeroFrame.coffee ZeroChat.coffee

Thanks this helped!

bdodroidon Mar 17, 2016
Reply

Just if anyone is curious, you can sign and publish your site from inside your site. Just swipe that top right menu in and scroll to the bottom. Much nicer than the command line in windows.

tomasbondon Mar 11, 2016
Reply

Im having some problem to publish my site, when i try to put my private key, it says Private key is invalid...

rinpooon Mar 08, 2016
Reply

What is the best method to merge the .coffe files into the all.js? DO I have to include the ZeroFrame.coffee in the all.js file?

nofishon Mar 08, 2016
Reply

makevoid: how do I backup my ZeroID ? (sorry if it's not the right post to ask, thanks)

backup the data/users.json file

makevoidon Mar 08, 2016
Reply

how do I backup my ZeroID ? (sorry if it's not the right post to ask, thanks)

bittestuseron Mar 05, 2016
Reply

"I also had to disable the cache in the settings of the web inspector to make it work"

@ekaterina if you're using Chrome, once you open the console (F12) you can right click the refresh button and a context menu will appear with several refresh options, including "Empty Cache and Hard Reload" which I found is the only one that works every time.

evention Mar 05, 2016
Reply

ekaterina: If you start ZeroNet with --debug it should auto compile the CoffeeScript for you, for me it only works if I reload the site I'm working on with the web inspector opened. So open the site, right click somewhere on it, click "Inspect element", then reload the page and it should have compiled all files. I also had to disable the cache in the settings of the web inspector to make it work (click on the gear icon and search for something like "disable cache if inspector is open")

Thanks - I did eventually realize that I wasn't in debug mode - derp

ekaterinaon Mar 05, 2016
Reply

eventi: I had to install coffee-script (mac) and compile

If you start ZeroNet with --debug it should auto compile the CoffeeScript for you, for me it only works if I reload the site I'm working on with the web inspector opened. So open the site, right click somewhere on it, click "Inspect element", then reload the page and it should have compiled all files. I also had to disable the cache in the settings of the web inspector to make it work (click on the gear icon and search for something like "disable cache if inspector is open")

evention Mar 05, 2016
Reply

I had to install coffee-script (mac) and compile:

npm -g install coffee-script
cd js/
coffee --compile --join all.js -- lib/ZeroFrame.coffee ZeroChat.coffee

nofishon Feb 07, 2016
Reply

ekaterina: ZeroFrame.coffee file doesn't work anymore, I guess due to the recent changes made to the HelloZeroNet site, so I used a copy from a different site.

Thanks for reporting, fixed the link!

ekaterinaon Feb 06, 2016
Reply

Hi, the tutorial is really great, helped me a lot to get started. It's amazing how easy it is to create ZeroNet sites. Just wanted to say while going through the tutorial I noticed that the link to the ZeroFrame.coffee file doesn't work anymore, I guess due to the recent changes made to the HelloZeroNet site, so I used a copy from a different site.

rcastanoon Dec 23, 2015
Reply

Hi! I followed every step, and finally got it right. Just realized that I had to compile the 2 coffee files the ZeroFrame and the ZeroChat so I could join them in a file named all.js. Did I do anything wrong with coffee-script?

le0on Sep 09, 2015
Reply

le0: I just see a text input box, 'send!' button and "Welcome to ZeroChat!"all.js is not being created - help please?

Installing coffee script (OS X) worked
npm -g install coffee-script

le0on Sep 09, 2015
Reply

I just see a text input box, 'send!' button and "Welcome to ZeroChat!"
all.js is not being created - help please?

nofishon Sep 07, 2015
Reply

neb: Thank you so much! I just wish there was an easier way to save private key on windows, and not to physically type each part in.

To put it on the clipboard: Right click > Mark > Select the private key > Enter

But something more friendly is planned :)

nebon Sep 07, 2015
Reply

nofish: You have to execute ..\python\python.exe zeronet.py siteCreate where your zeronet.py file is.

Thank you so much! I just wish there was an easier way to save private key on windows, and not to physically type each part in.

nofishon Sep 07, 2015
Reply

petko: Hi, how to stop ZeroNet on Win 7? Kill the process or is there more gracious way?

Right click on the ZeroNet taskbar icon > Quit

petkoon Sep 07, 2015
Reply

petko: Hi, how to stop ZeroNet on Win 7? Kill the process or is there more gracious way?

Sorry, stupid question, it was in my taskbar

nofishon Sep 07, 2015
Reply

neb: I know that zeronet.py does exist, however, in my "ZeroNet" folder. I go into that folder and execute "zeronet.py siteCreate". All it does in this case it open zeronet.py, and nothing else.

You have to execute ..\python\python.exe zeronet.py siteCreate where your zeronet.py file is.

srdghmon Sep 07, 2015
Reply

could not create the site................

nebon Sep 06, 2015
Reply

Hey, I am having some issues. I don't seem to be able to even create a site. I am on windows, and I execute the bundle command. what I get in return is "The system cannot find the path specified."

So, I tried something else. I went into my Python folder and just executed "python.exe zeronet.py siteCreate". I get another error saying that zeronet.py does not exist.

I know that zeronet.py does exist, however, in my "ZeroNet" folder. I go into that folder and execute "zeronet.py siteCreate". All it does in this case it open zeronet.py, and nothing else.

Can anyone help?

nofishon Sep 05, 2015
Reply

lte678: Also, for the ZeroBundle package commas ("../python/python.exe") are required! On windows at least...

Commas only required if you use / in path ..\python\python.exe should work without them.

lte678on Sep 05, 2015
Reply

Also, for the ZeroBundle package commas ("../python/python.exe") are required! On windows at least...

lte678on Sep 05, 2015
Reply

This is great! This is one of the first really useful sites/blogs!

cybercriminalon Aug 06, 2015
Reply

Thanks man! Very helpful

This page is a snapshot of ZeroNet. Start your own ZeroNet for complete experience. Learn More