Table of contents

1. Description of the main concepts of single page applications
2. How to build your client with ReactJS and Browserify
3. How to build your REST API with ExpressJS, Americano and PouchDB
4. Share and deploy your web app with NPM

How to publish your Single Page App with NPM

Now it's time to talk about the fun part: the publishing! You built your bookmark manager. You enjoy using it. What would be better is that others use your app. You could publish it on the web and add user management and authentication. But you will be responsible of the data of others. You would have to ensure too that your server is always up and running. But it's boring and time consuming.

Another option is to publish your app on a registry. From there other people would be able to install it on their hardware (like on smartphone or desktop). Everyone would be in charge of his own deployement and his data.

At first we could wonder if that kind of registry exists. Fortunately it is and it's called NPM. The main function of NPM is to provide libraries for Node.js softwares. But it allows to publish CLI tool too. It's where it gets interesing.

But remember, every web app is a server that is started with the command line. Moreover, because of our embedded database it doesn't require another install for the database. So, it means you can also publish your web app on NPM!

Add binary file to run your app

To publish our app as a CLI tool, NPM requires we add a binary file. It's a script that will be used to run our server without mentioning Node in the shell command. Makin this binary file provide us with the opportunity to set a right working directory for the app (~/.cozy-bookrmarks). The PouchDB database will be stored here.

Let's name this script bin/my-bookmarks (you have to create a bin folder).

#!/usr/bin/env node

var path = require('path-extra');
var fs = require('fs');

var defaultDir = path.join(path.homedir(), '.my-bookmarks');
if(!fs.existsSync(defaultDir)) {
  fs.mkdirSync(defaultDir);
}
process.chdir(defaultDir);

require(path.join(__dirname, '..', 'server'));

Then we can update the manifest to mention where is located the binary file and give a name to our final binary. Add these two lines to your manifest:

  "bin": {
    "my-bookmarks": "bin/my-bookmarks"
  },

Publish your app

Once we're done our app is ready to be published on NPM. The first step will be to register to the NPM registry as user.

npm set init.author.name "Brent Ertz"
npm set init.author.email "brent.ertz@gmail.com"
npm set init.author.url "http://brentertz.com"

npm adduser

The second step will be to publish the application. Go into the folder of your application and type:

npm publish

Everytime you want to update your publication, upgrade the version of your app and publish it again:

npm version patch
npm publish

Done! Other NPM users can now install your app with a single command line!

Install your app

Now it's time to test that your app is properly installable. Run the following command to install your app as a global Node module:

sudo npm install my-bookmarks -g

Then run it with a single command:

my-bookmarks

And enjoy seeing your app running on the 9125 port!

Conclusion

Full tutorial code

During this tutorial we achieved many things. First, we built a full frontend in the browser based on ReactJS. Second, we built a lightweight API to handle the persistence of the data. Third, we made our app available to any Node.js users. To sum it up, we built a Single Page Application that can be deployed easily on small servers or on desktop/laptop computers.

If you want more advanced example of that kind of application. You can try the Cozy webmail app to see that full featured app can be done and shared that way:

npm install emails -g && emails

Emails Repository

We are reaching the end of this tutorial. I hope it delighted you and teach you new things about web development and Node.js. Feel free to share your feedback about this tutorial on the Cozy forum.