How do I create a local server in packaged chrome app which runs offline? - node.js

I want to create a Node.js server in chrome app so that I would be able to run node.js applications through it. The app would run offine therefore the server had to be local.

As I was not able to do my setup in Chrome app, I used node-webkit for making my project to work and setup my project as
General Information
Express Server is started on port no 3000.
EJS is used for HTML renderer for ExpressJS
PeerJS Server is started on port no 9000.
IndexedDB is used for database purposes.
PouchDB is used as wrapper for IndexedDB
blueimp-file-upload is used for FTP over express server.
AngularJS is used for creating modules for front-end.
LUMX is used as UI framework.
jQuery is used for DOM Manipulation.
Velocity is used for smoother animations.
Complete code can be found at my github pulic repo
https://github.com/sumitkumar1209/PQ-PinQuip-Messenger

Related

Is it possible to turn express server serving react frontend into desktop app using electron?

I have made a web app using express and react, and I want to bundle it into a desktop application, is this possible using electron?
I recommend the tutorial at: https://www.electronforge.io/guides/framework-integration/react
This isn't too hard actually, you can find all instructions you need in https://www.electronforge.io/
To accomplish this, either your app keeps hosting it with express locally and electrons connects to localhost, or even better, do it by not hosting any servers and just keeping your JSX and html files in your project.
If you're using TypeScript and ES6, also consider taking a look here for some examples: https://www.electronforge.io/templates/typescript-+-webpack-template

Should I build server-side of application inside nuxt.js server directory?

I want to build full-stack application with Nuxt.js. I am wondering where I should create my server-side inside Nuxt.js or maybe I should create separated project only for server stuff.
I am trying to set up my project but I do not know how I should do it. The application which I am building will have own front-end, back-end and also database (I will use MongoDB) but actually I do not know how I should start. I was reading a lot about SSR and Nuxt.js seems really good if am planing to use Vue.js on fronted. While creating nuxt app I can choose to use Express and then I can see server directory inside my directory structure does it mean that i should build all back-end inside this directory or maybe it is only for small stuff?
I have also another question what if I want to use Nest.js on back-end can i just use npm i -g #nestjs/cli and then nest new project-name inside my server directory ? I was looking also for this answer but almost all results in google for this type are about (comparison between Nuxt.js, Next.js and Nest.js).
It will be my first bigger full-stack project and I want to do it right but I am a really beginner in this so I am looking for answer from more experienced programmers.
You can run express or any node.js server you want inside Nuxt.js. When installing Nuxt.js with scaffolding tool create-nuxt-app, you can choose integrated server-side frameworks : Express, Koa, Hapi, Feathers, Micro, Fastify, Adonis (WIP). There isn't offical Nest.js integration, but you can easily find a starter kit on github.
With create-nuxt-app, if you choose to use any node.js server inside your nuxt app, you will see a server directory inside your directory structure, with the corresponding server-side pre-configured index.js file.
Here is my own feeling about it:
I think the inside solution make sense for a small SPA or Headless project (Ex: parse and serve files, a simple JWT Authentification, a small websocket server...), or for a front-end logic application that cannot fit in client browser and who are nothing to do with the database (like image or file computation).
But generally, this server run the database layer for your Nuxt application: a REST or GraphQL API. It can also run your business logic of your app, serve authentification, and more and more when project growth...
If you think about separation of concerns and microservices
architecture, do not use server inside Nuxt.js. Splitting both frontend and server will result more flexibility. You can host frontend and API in different servers.
So now, do nuxt.js really need a node.js server ?
Yes if you plan to use it in SSR mode, No if you plan to use it like a SPA or Static generated way. Docs here... .
In SSR mode, nuxt.js ask data to your API at the first rendering, and provide a complete SEO compatible page to the client browser or bots. It also provide all javascript that the browser need to navigate and fetch your API. For that, nuxt.js in SSR mode should run with node.js.
I assume you said "back-end" for your API and your business logic application, in this case, you should separate nuxt.js and your server. Two node.js instances to run both.

NG Live Development Server vs Traditional web server

I am new to Angular2. I have stated learning through resources in Internet.
I am using Angular-Cli tools for building my test application.
When I issue command ng serve --open I got my example project running on a default port 4200 and console shows,
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Now I am very confused with NG Live Development Server.
I have the following concerns,
Being a Client Side Framework why angular needs an development server.
Where Live Server is physically Located in running machine
The Live Server
can serve only Javascript or any other language.
What is the
complexity in integrating Angular2 application with Server side
frameworks like Spring-MVC.
Could anyone please provide your thoughts on this? Please correct me if I have understood the concepts wrongly.
Tl;Dr the cli live server is only for local development. Not for production or any environment other than local dev.
To answer your specific questions:
Being a Client Side Framework why angular needs an development server.
Angular is an SPA framework. The compiled application code needs to be loaded into the browser from a web server.
Where Live Server is physically Located in running machine
The server is part of Webpack, which is a dependency of Angular-CLI. So it is in your node_modules folder.
The Live Server can serve only Javascript or any other language.
The development server is only for running your Angular code on your local development machine. If you have a API backend, you should look at proxying requests through the dev server to your dev API.
What is the complexity in integrating Angular2 application with Server side frameworks like Spring-MVC.
This is trivial. You will not host your Angular application in production on the live dev server. Instead you will run ng build --prod --aot to build the production bundles into the project dist folder. These are the build artefacts that will be deployed to your frontend webserver. Configure the frontend to run at the root contest i.e. www.foo.com/ and the the Spring API to run at the /api context www.foo.com/api/.
You may want to take a look at this:
Node live server
This clearly explains what exactly is a live server and also how it works:
Quoted from the link:
The server is a simple node app that serves the working directory and
its subdirectories. It also watches the files for changes and when
that happens, it sends a message through a web socket connection to
the browser instructing it to reload. In order for the client side to
support this, the server injects a small piece of JavaScript code to
each requested html file. This script establishes the web socket
connection and listens to the reload requests. CSS files can be
refreshed without a full page reload by finding the referenced
stylesheets from the DOM and tricking the browser to fetch and parse
them again.
If you go through the entire post, you would get the answer to almost all your questions.

How can I mount easyrtc on webserver?

I'm trying to develop a video chat web-application with webrtc using easyrtc. I have developed it on my local machine. It runs well with node.js server on my localhost. But how can I mount it on my web-server? That means, when a user visit my website, he will able to video chat by this.
Very simple..put your project on sever, open firewall that allows connection throws in and out. Then integrate with your authentication system..
Done
If you have developed the application on node.js, you only have to follow the deploying procedure for an node.js app. In case that you have an app (php, ruby, python or others) that uses easyrtc as an signaling server, you can deploy your easyrtc and app to the same server or separately.
On the secon case you should use easyrtc.setSocketUrl("//mydomain.com:8080"); to avoid connection issues related to socket.io. For more info on this see:
https://easyrtc.com/docs/easyrtc_with_other_servers.php
Also remember that you application needs to work with https to work correctly in Chrome. See this:
https://developers.google.com/web/updates/2015/10/chrome-47-webrtc

Integrate Node with Phonegap app

I want to develop an hybrid cross platform app that creates a socket connection to given Ip.
I have achieved it using webTCP module in node.js by running node from cmd to start the server.
Now I want to pack this in to an app using Phonegap. But my question is how do I run node(to start server) in mobile through the app created using phonegap.
Do we need to install node in mobile. If so how can I do that?
Thanx in advance.
nodejs isn't done (yet) to run on Android. NodeJs is a server thing so it should run on your server to run tour backend.
In order to do what you want to do you will have to redesign your architecture.
Indeed, Cordova/PhoneGap is a little server (actually it's is a WebView but you can approximate it to a static content delevery server). So you will have to made your cordova app talk to your node-server.
1. CORS
Cordova-app <- INTERNET -> Node-server
The first thing to do is to enable CORS, for nodejs and whitelist the adress of your node-server in cordova
2. let's talk
Now you can start talking to your server with your cordova app, there is many ways to do that :
xhr/Ajax request
Pur WebSocket (you will need to enable JAVA-WebSocket)
Socketio
3. being more powerful
You will need more powerful feature between your app and your server side. In order to do that, you could need some WebApp framework. Indeed, they automate for you the connection between the server and your application and offer you a cool and easy environment to do great apps. If you want to know more about it, you could look at
BackBone
Marionette
AngularJs
Hope that help.

Resources