How to quickly start a single-page application with Node.js

A problem I experienced while starting coding with NodeJS environment and Express framework is that I had difficulties to quickly make a well structured app. I spent too much time on organizing my modules and writing helpers. Paradoxally with Express, I like the fact that I am free to do what I want and don’t encounter too much constraints due to the framework. At last, it was harder to design front end code than back end code.

To deal with that, I used two tools that fit with my requirements :

  • CompoundJS : a lightweight framework on top of express. It offers the structure and the vital functions I need to write a good  backend and configure express properly.
  • Brunch : an application assembler to organize and build cleanly my front-end code.
  • Edit: If you want to build a small single page-app, have a look at Americano a lightweight framework easy to learn (based on ExpressJS).

The bad thing with that choice is that there are no out of the box integration. So, in this article, I will give you a way to make them work together and obtain a well structured single page-app  in a minute (see the result here). I won’t cover in this article how code is organized, I can just tell you that it is a typical MVC structure for backend and a Backbone MVC for frontend. Look at their documentations for more.

1. Generate files

I assume you have already installed NodeJS. So install needed tools via npm, the node package manager :

npm install compound -g
npm install brunch -g

Then generate backend with railway:

compound init blog --coffee
cd blog
npm install # dependencies installation

With brunch generate frontend after removing frontend stuff from railway:

rm -rf public
brunch new client
cd client 
brunch build
cd ..

BackboneJS is the MVC framework configured by Brunch by default. If you want to work with AngularJS, you should run the project creation this way :

brunch new client --skeleton https://github.com/scotch/angular-brunch-seed

2. Plug Brunch on Railway

Then configure backend to handle brunch folder instead of old ones. In config/environment.coffee Replace this line :

app.use express.static(cwd + '/public', maxAge: 86400000)

with :

app.use express.static(cwd + '/client/public', maxAge: 86400000)

or for AngularJS case:

app.use express.static(cwd + '/client/_public', maxAge: 86400000)

In base template (index) app/views/layouts/application_layout.ejs , change stylesheet and javascript links :

<%- stylesheet_link_tag('bootstrap', 'style', 'bootstrap-responsive') %>

with

<%- stylesheet_link_tag('app') %>

and

<%- javascript_include_tag('http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', 'bootstrap', 'rails', 'application') %>

with :

<%- javascript_include_tag('vendor', 'app') %>

For AngularJS cas use these lines:

<%- stylesheet_link_tag('css/app') %>
<%- javascript_include_tag('js/vendor', 'js/app') %>

Then clear body to replace it by :

<body>            
        <%- body %>
</body>

3. Make entry point and set a route to it

Create a controller to generate an entry point in app/controllers/application_controller.coffee:

action 'index', ->
     render title: "my single page app"

Then create template file for entry point:

mkdir app/views/application 
vim app/views/application/index.ejs

fill it with:

<script>require('initialize');</script>

Then add a route to confige/routes.coffee file:

exports.routes = (map) ->     
    map.get "/", "application#index"

Check that everything is fine by starting server and opening http://localhost:3000/ in your browser (Brunch logo should be displayed):

compound s

4. Use

To make Brunch automatically rebuild you app after each modification, go into the client directory and type:

brunch watch

You can write all your UI code inside client directory. Brunch handles templates too, so don’t worry about writing your html code on client side. Another good thing is that Compound and Brunch offer generators to build your models and controllers faster. Finally, Compound is very efficient for writing REST API : sending and parsing JSON are easy. As you understand, now you have all the stuff you need to build an awesome single-page web application!

Feel free to comment this tutorial and share any thoughts about this.

Advertisements

4 ways to host your own Newebe

The blocking point to start using Newebe, the real distrbuted social network, is the fact that you need to host your instance on a server. To be honest, actually I haven’t found an easy way to deal with that, but I propose here the most straightforward solutions to that problem.

1. Host it on an online box

Rent an online box from a provider like Online.net, OVH, Rackspace… After you did that you will have your own dedicated server available from every where. For this server, chose an Ubuntu or Debian distribution and run the newebe installation script. Good news, you’re done ! Connect to your Newebe through your browser to : http://ipadressofyourbox:newebeport/

2. Host it on a plug computer at home

Most recommended choice but hardest to set up: buy a plug computer (like a Sheeva plug or a Dream plug) with a Debian or Ubuntu distribution and plug it to your local  network (use an ethernet wire to connect your plug to your provider box). Then connect to it through ssh. Run newebe installation script. Finally, routes the port you chosed for your newebe to a port of your box that you will make available everywhere. Done !

3. Host it on your local machine and make it available through pagekite

What is pagekite ? Pagekite is a simple solution that allows people to give access to a local server from everywhere just by running a pagekite software. So you don’t need specific hardware. If your OS is Ubuntu, simply run the Newebe installation script on your main computer. Choose default port for newebe (8000) then read Pagekite howto . When pagekite installation is complete your newebe will be accessible from a url like this one http://newebe.gelnior.pagekite.me/ .

4. Host it on your friend box

If all of that sounds too technical, simply ask to one of your friend to host your newebe. So you will try it. Once you will love it, the effort needed  to set up your own server will be worth the deal!

Newebe : a nice way to store interesting stuff from your contacts

What is annoying when you use social network like Facebook or Twitter, is that you don’t have nice way to save link or pictures that you contacts shared with you. Twitter allows you to mark interesting posts as favorite but that’s all. Fortunately, Newebe now solves this problem by allowing you to push microposts or pictures to a note you wrote before. So you can save quickly a good link or a nice picture to your notes. Moreover, because it’s in note application, you are able to organized all grabbed data efficiently.

Select micropost and click on “push to note” button.

Then a dialog box appears.  Select your note and click on “select”.

And find it inside your notes !

PrivacyCamp @ La Cantine

Last friday La Cantine and La CNIL organized a Privacy Camp @ La Cantine. It was my first one and I was glad to discover it. The principle is simple : peoples propose 1 hour workshops for each available rooms and other participates to it. That led us to an afternoon of 12 workshops about online identity, anonymity, smartphone data and of course distributed social networks.  Some privacy celebrities were there such as Jean Marc Manach, Trisan Nitot or Henry Story.

I am not sure that there was a lot of new things that came out from this kind of discutions but it helps people interested in the problem to connect each other, make their ideas clearer and validating that they share the same point of view. That’s why I decided to animate the distributed social network workshop. So I could share a lot of thoughts. Unfortunately, others are still sceptic about self hosting. Whatever, to promote Newebe it was definetely a great thing : a lot of people there didn’t know what I do and are now quite interested in it. By this way, I met Henry Story who has a solution about distributed identity, called WebID. That could fit well with Newebe : you take advantage of your own server and of common contacts to ensure trustability.

Finally I was a litte bit disapointed by the workshop hosted by la CNIL. They did not want to promote solutions to privacy problems like free softwares, privacy optimized Firefox, DSN… They prefer finding better ways to warn people about what happens when they suscribe to a website like Google or Facebook. That made me sad. Whatever this barcamp was great, thanks to them and I hope there will be another one soon !