How to port a static Web App to Cozy Cloud

Publié le par /

I wanted to try to install a static Web Application on my CozyBox. Unfortunately, Cozy is not able for now to serve static Web pages. So I wrote a tiny wrapper around my application. It proved to be very easy. Here’s the simple steps I took :

First, I created a npm package from my application, to reference it from the wrapper. It’s as easy as running npm init then npm publish inside your application repository. Then, the wrapper itself. Create a new directory, initialize the git repository and the package.json. Then dependencies to express.js and your application :

mkdir toto
cd toto
git init
npm init
npm install --save express
npm install --save myapp Your application should be in `node_modules/myapp`. All you have to do is use Express to serve this static directory :
var express = require('express');
var app  = express();
var port = process.env.PORT || 9250;
var host = process.env.HOST || "127.0.0.1";
// Serve static content
app.use(express.static(__dirname + '/node_modules/myapp'));
// Starts the server itself
http.createServer(app).listen(port, host, function() {
  console.log("Server listening to %s:%d within %s environment", host, port, app.get('env'));
});

Congrats, you’re done !

Now, publish the fruit of your efforts to Github, then go to the home of your CozyBox, and at the bottom the of application manager, just type the URL of the repository of your wrapper. Click install, wait a few seconds… Enjoy !

Bonus: Configure your application for Cozy

My application allows to synchronize data with a remoteStorage server. Good news, my CozyBox can host a remoteStorage server. So I’d like to let the application know the parameters to connect to this instance (in fact, all remoteStorage needs is a login).

So I hacked my application to use a default.js file with some default values. When building the application, I don’t concatenate it with others JavaScript files, so browser has to perform a specific query to fetch this file. Then, in the Express server, I just had to add a route to override this file with another one containing specific configuration values:

app.get('/js/default.js', function (req, res) {
  res.setHeader('Content-Type', 'text/javascript');
  res.sendFile('customConfig.js');
});

If you want to see the result of my week-end experiments, just take a look at the code of my Cozy Wrapper for Àlire, or try installing it inside your CozyBox

Bonus: Add an icon

In the package.json file of the wrapper, add the path of the icon of your application :

{
  "name": "cozy-myapp",
  "version": "0.0.1",
  "description": "CozyCloud wrapper for MyApp",
  "main": "server.js",
  "dependencies": {
    "myapp": ">= 0.0.1",
    "express": "^4.10.1"
  },
  "scripts": {
    "start": "node server.js"
  },
  "author": "Clochix",
  "license": "GPLv3",
  "icon-path": "myapp.png"
}
Pour réagir, n'hésitez-pas à m'écrire : clochix chez clochix.net ou à soumettre l'url de votre commentaire :
(Je traite les mentions à la main, elles peuvent mettre plusieurs jours avant d'apparaître)

Si vous avez un compte Github, vous pouvez me proposer des corrections en éditant ce billet

Fork me on GitHub