HTML / CSS / JS + Node.js + node-webkit = Cross-architecture applications
With the increasing popularity of node.js, it is becoming increasingly attractive for application development. At least I recently very often use this technology for the rapid development of these. And at the moment, technologically there are no obstacles for developing cross-platform applications in one language. And not only classic Web-based applications (client-server), but also desktop ones.
1. If you need a quick start, set express
npm install express 2. Create a server.js file of the following content:
var express = require('express'); var http = require('http'); var index = require('./routes/index.js'); var app = express(); // express` app.get('/', index.index); http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); });
3. Create an index.js file and put it in the routes folder
exports.index = function(req, res){ res.render('index', {}); };
4. Create index.ejs (I use ejs as a template engine) and put it in the view folder
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello world</title> </head> <body> <h1>Hello world!</> </body> </html>
Voila!
Run
node server.js
It remains to copy the files to the server, configure nginx to proxy requests to our service ... well, you know that. But you don’t always have the desire or the ability to mess with the server. And even if you run the project locally ... a lot of fuss. I want something out of the box. To click on the shortcut and the application started.
')
The project node-webkit , the announcement of which is available on Habré, is useful for building this.
The essence of the technology is that it was possible to embed api node.js into client javascript code. Those. You can connect to the database and the file system from the client code directly, without intermediaries. It sounds tempting, and by the way it works, but I do not really like such a mixture. It turns out only desktop application. I like the other option.
The application is executed in the classical style for web applications: client code and server. And I should be able to run it as if on a server, providing multi-user access and as a local (single-user) application.
Here is the prescription:
1. node-webkit should know about the starting html-page that it will display first.
append the following in package.json
"main": "nw-start.html"
2. nw-start.html will be as follows
<!DOCTYPE html> <html> <head> <script> function bodyOnLoad(){ require('./server.js'); window.location.assign('http://localhost:3000/'); } </script> </head> <body onload="bodyOnLoad()"> <h1> Loading... </h1> </body> </html>
3. We make the server.js code an immediate-function.
(function startServer(){ var express = require('express'); var app = express(); .... http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); }); })();
4. We pack the whole project in a zip archive nw-project.zip
5. Run
nw nw-project.zip
After a short pause during which the "server" part is loaded
The essence of what is happening is quite simple. node-webkit loads the start page. After that, the client function bodyOnLoad is executed. bodyOnLoad loads the server.js module (call node.js require). The call leads to the execution of code in server.js and, consequently, the launch of the http-server. It remains only to change the URL of the page, which is what window.location.assign ('http: // localhost: 3000 /') does.
Such an approach allows, without changing the architecture of a web application, to make its desktop version. The truth is that we have to pay for this simplicity with some performance ... after all, data exchange will take place not directly, but through network requests.
Have a great weekend ...
Source: https://habr.com/ru/post/181670/
All Articles