Creating a single page web app as part of a website - javascript

I am working on a project which allows users to monitor energy consumption. The main dashboard page is a web app which is pretty neat and makes extensive use of javascript and ajax. The server currently runs apache and uses php; however, I am planning on installing node.js and updating the server side scripts in order to support websockets (and I also like the idea of using javascript on the server and client side).
I have followed several online introductions but I am struggling to find answers to specific questions, one of which is outlined below.
All guides to node seem to only support single page web apps. This is an issue as there are a number of different pages which require files to be served. How can I support file serving but enable one of the pages to use websockets. Does this functionality, which is only required for one page, need to be coded into the main server script on the site or is there a way of separating this so that the server goes to server the dashboard html file and then discovers that the file requires specific websocket dependencies?
Thank you very much for taking the time to read my questions. If you can answer any of them, or even provide any general advice, it would be greatly appreciated.

1: The only reason the guides do single page web apps is because that's node's forte. Node.js serves static files and rendered templates just fine. Just include the JS for the websockets only in the pages that need it.
2: It's not quite as simple as with php, but take a look at express.js
3: Yes, and really you shouldn't even need different ports, you can write a proxy in node in one line.
4: CentOS is fine, node is platform agnostic. All the linuxes have top support followed by osx, solaris and windows.

Related

Do web applications made with Express.js need to be bundled for distribution? And what is the purpose for a distribution version of an app?

I hope the question is clear enough, I'll to to explain more in depth, but before that, I want to first say I'm new/fresh to web development.
I have been developing some apps on my own and have also followed some udemy courses and what I have had difficulty understanding is what is the purpose for a distribution version of the web app you are developing.
I first started a course that had some intro to PHP, MySQL, Wordpress, with a larger emphasis on HTLM/CSS and Javascript. The last project in this course was a single page website that used Webpack to bundle the project and create a distribution version of the project.
After this I followed a course which main project was a multi page app that used Express.js with .ejs , Node.js, Bootstrap and PostgreSQL, but I did notice there was no bundling for a distribution version of the app.
Last, but not least, I did another course that used React for the client side, and in the end there was a script for generating a bundle for distribution.
As I started moving my projects to a static server and getting them up and running forever with PM2, I stopped for a bit and was wondering why is there even a need for a distribution version of a project even needed if the websites look the same, but I assume the reason is so it runs more smoothly on a browser.
I'm just making assumptions here, but I assume the javascript from all the dependencies are put together on a single .js file or a small set of files to make it easier on the browser to process the website? Also for version control?
But if creating a distribution version of your app optimizes it for a browser, then how come Express.js doesn't offer this?
Maybe this is a very stupid question, I'm still confused by a lot of this stuff.
Maybe because they can do similar stuff, like webpack can throw up a server so you can see your app running, like React, but to access a database, you need to make an api call to a backend program like Express.js through axios or fetch. But Express.js is a server that can make query calls to a database and lets you see your app through views/.ejs.
Again, sorry if this sounds all really dumb, I just don't know anyone who I can ask these questions.

Do I use Node.js to build a whole website? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
The last couple of days I began to teach myself how to create a Website from scratch.
I bought a webspace and fooled around with html, css and javascript and when I wanted to build a online chess game I learned about Node.js
But I don't understand what Node.js is used for because the documentation shows how to install and create a fresh server(!) with Node.js and handle requests.
Do I don't have to use a apache installation on my server anymore?
Do I create the whole website and all it's pages with Node.js like the index or about page?
If I use Node.js just for a web application, how can I add the web app to an already existing Apache website's page?
I think I really got confused and need some help to understand Node.js better since so many are using it.
Do I don't have to use a apache installation on my server anymore?
Correct. You create your whole web server in node.js. You generally don't use or need Apache with it.
Do I create the whole website and all it's pages with Node.js like the index or about page?
Yes, you create the whole web server in node.js and use it to serve all your web pages. Typically one might use a number of libraries with node.js such as Express for mapping all the routes in your web app and your favorite template engine to help with filling in data in HTML pages before serving them to the client. At very high scale, one might consider using some other infrastructure (like nginx) to offload static resources from your node.js server to increase scalability, but that is not necessary at small or medium scale as node.js scales really well.
If I use Node.js just for a web application, how can I add the web app to an already existing Apache website's page?
You can run one of the two web servers on a different port and have two web servers that are part of your web-site liking to each as needed. But, typically you would move everything you currently have in Apache over to your node.js app. You don't have to do that, but most people wouldn't start out with an objective to build a web-site out of both node.js and Apache.
One thing to keep in mind is that node.js/Express are conceptually a bit different from Apache in how you build a simple web-site. A node.js/Express web server serves NO content at all by default. So, you don't just drop a directory hierarchy of web pages on your node.js server and expect it to serve those pages by default. You can do that pretty easily with express.static() (a feature of the Express library) if that's part of your site design, but you have to consciously configure that in node.js (it takes just two lines of code to do so).
If you want to write a "simple" chess game, you're best bet is to start learning Canvas. This tutorial by the Mozilla Foundation is one I personally used and enjoyed a lot. If you want the computer to play as CPU opponent, then you would likely need to use a server(node.js!).
You can use Node.js to build a simple website, but that would be like using a screwdriver as a hammer. Node.js is used for making desktop apps and for programming servers. Servers(backend) analyze user inputs and provide some sort of feedback. Let's use StackOverflow as an example. The frontend(HTML, CSS, Javascript) is what you see. All of that is done in the browser. The way you get that code to someone's computer so they can render your website is via a server. Servers do other cool things. When you do a search on a website or save a post, the server is dealing with storing that data or finding you the right results. If you want to build an API, like the one used for Google maps, or for Yahoo Finance, you'd use a server.
If you want to make your own server using Node.js, I'd recommend using Digital Ocean or Heroku. They are beginner-friendly and are respected in the industry. Heroku is free and owned by Salesforce if that makes a difference. However, this is unnecessary, for beginners. I recommend using a free or low-cost hosting platform that deals with that for you.
The thing about Node.js is you can use it to create websites via template engines, but I wouldn't recommend that. You are essentially writing server-side javascript to create HTML. That's foolish most of the time when you can just write the HTML itself. Just have node.js deploy it.

Can I use node to power a web application on a separate server?

I asked this (voted to be too broad) Question while working my way through a starter book on node. Reading this book, I'm sure I'll learn the answer to this later, but I'd be more comfortable if I knew this up front:
My Question: Can I (efficiently) continue using a usual webhost such as iPage or GoDaddy to host my web application, building and hosting the front end in a simple, traditional manner through an Apache web server, and communicate with a separate Node.js server (my application back-end) via AJAX for queries and other things that I can more efficiently process via Node?
More specifically, would this be a bad programming practice in terms of efficiency and organization? In other words, would it be likely that a large scale commercial application would ever be handled via this method?
Yes, you can separate the front-end of your web application and the APIs that power it. In fact, this is a very common configuration, especially for "large scale commercial applications".
Where you draw the separation line between the two specifically depends on what you are doing, how you're doing it, and what your needs are. Also, in terms of hosting, remember that if you're accessing something server-side across the internet, you're adding extra latency to everything. Consider getting off Go Daddy and using another host that gives you more flexibility, such as a VPS provider.
It's ok. Actually, this is how things shoud be done. You have a backend API on a separate server and lots of apps which are using the API. Just go with Nginx server, check this Apache vs Nginx.
Yes you can use node js as a part of some big application. It depends on wich type of interaction you would like to get. Is it comfortable to you to mix technologies? Then node is pretty good thing to work over web. I've finished a part of big nodejs-ruby-php-c-flash application (my part was nodejs) for very large data mounts. This application have different levels of interaction. Sometimes I use 2 languages at one time to create each part of my application the best for task I'm working on. There is applications that initiate, run and destroy mutiple OS instances. So using of multi environmental application not so hard.

Running Page Specific Javascript in node.js

I am working on a project which allows users to monitor energy consumption. The main dashboard page is a web app which is pretty neat and makes extensive use of javascript and ajax. The server currently runs apache and uses php; however, I am planning on installing node.js and updating the server side scripts in order to support websockets (and I also like the idea of using javascript on the server and client side).
I have followed several online introductions but I am struggling to find answers to specific questions which I need to get my head round before I can start, one of which is outlined below.
Is there a simple way to run page-specific javascript on the pages of the website in the same way you would with PHP? I have come across templating (for example using mustache), but I don't understand whether it is possible to run specific modules of javascript on the server when a specific file is about to be served.
Thank you very much for taking the time to read my questions. If you can answer any of them, or even provide any general advice, it would be greatly appreciated.
You should be looking into web frameworks for Node.js that help you with this kind of thing. My favorite is express.
Express will allow you to map a "route" to a handler, and that handler can be in any file you want. E.g.,
app.get('/energy/page-x', require('./routes/page-x-handler'));
Where ./routes/page-x-handler.js is something like:
module.exports = function (req, res, next) {
res.render('template-name');
}
If you use a framework like Express you can 'intercept' (or 'route', as it's called) requests for specific URL's and run server side JS to handle that URL (including, at the end of processing, render and return a template).
One of the differences with PHP is that PHP often mixes templates and code into one file, whereas with Node, those two are usually separated (so you have a clear separation between code and layout).

How to pass data from C++ application to Javascript

I'm developing a jQuery-based pivot table.
The goal is not a web app but a desktop-based application (C++). In my idea, data is retrieved by the application from the database, then passed to a html page and then showed through the pivot-table plugin.
There is no web server and the web page containing the plugin cannot access to the database.
So, how to pass data in an efficient way? I've seen other questions here on SO around this matter, but I think we're in a different scenario. Of course I can write the data in a txt/xml/js file, but I've experienced that for huge amounts of data, writing down files is costing a lot.
If you don't want to add support for the http protocol to your application, and you don't want to write to additional files, then IMO your best bet is to create a wrapping http server for your application. Then the javascript page can access the running wrapper which can talk to your "real" application.
You could create such a server relatively easily in python using the twisted framework, ruby using rails and the bundled webrick server, or the v8 Javascript engine node.js. (I'm sure there's dozens of other options out there too)
Which of there would be best for you will depend a lot on which languages you have experience with and what your deployment requirements are (supported OSes, existing installed applications, installation size, license terms on your software etc.)
Do you have a specific framework for your desktop app ? If you use Qt for the GUI, you can also integrate javascript quite easily.
http://efforts.embedded.ufcg.edu.br/qt/?p=84
You might be able to use named pipes to pass data to a static page.
It might also be better to just make your c++ program into a simple web server which opens a port, and have it generate the web page when the user goes to http://localhost:8080.

Categories

Resources