nodejs and static html on one domain and one port - node.js

I have static html website that sends AJAX requests to nodejs scripts. I don't want to send crossdomain requests, so I want static website and nodejs work on same port and same domain. How can I do that?
Now my nodejs works on localhost:1337 and my static website works on denwer localhost/mywebsite and AJAX requests don't work.

Depends on which framework you're using. With express, you can set up all the dynamic endpoints of your application and also:
app.use(express.static(__dirname + '/static'));
This will serve the /static directory of your nodejs project alongside the rest of the endpoints.
Note:
Other frameworks have similar setups. Google for nodejs <your framework> serving static files.
Doing it without a framework is non-trivial.

Related

Angular Universal Deployment

I would appreciate if someone could clarify if it is necessary for hosting server to have node.js support in order for Angular Universal to work. And will I need to upload both browser and server folder in dist to the hosting. If yes, any recommendations on hosting a which offer such support? Secondly is there another way apart from node.js to make server side rendering to work?
Before answering this question, lets understand some basics of SSR and CSR in a layman language.
CSR or Client-side rendered
When a web-application gets rendered on the browser (Client-side). Here browser downloads all the html css and js first. Than the JS(your-some-awesome-framework) runs on browser and decide how the final webpage will look and act.
SSR Server-side Rendering
When a web-application gets rendered on the server (Server-side). Here the JS(your-some-awesome-framework) does most of its work on server already. So on your browser you gets the webpage without any delay of your JS booting and binding and rendering.
Now there are two types of rendering -
Dynamic SSR and Static Pre-rendering SSR
Dynamic SSR
when a live server dynamically generate and serialize the application. When a user hit a URL of website , the server first generates the webpage and serve the content.
Static Pre-rendering SSR
when there is already a pre-rendered static files and the browser simple serve those files.
Now comes the answers to your question in regard to angular framework.
Is it necessary for hosting server to have node.js support in order for Angular Universal to work ?
For Static Pre-rendering SSR - NO, there is no such need.
For Dynamic SSR - technically Yes, see below
And will I need to upload both browser and server folder in dist to the hosting ?
For Static Pre-rendering SSR - browser folder on any server which can host files
For Dynamic SSR - server folder on a nodeJs support server.
is there another way apart from node.js to make server side rendering to work?
There are some ways to run node through ASP.NET
Core and other options too. But for dynamic ssr nodeJs will come the the way.

web-app using nginx and node - which is the web-server?

I have a web-application using nginx as a reverse-proxy and using the express framework as my backend in node.js. I am confused which is the web server. I use react, so the application features client side rendering, and nginx holds these files should it make a difference.
according to developer.mozilla.org
On the software side, a web server includes several parts that control how web users access hosted files, at minimum an HTTP server. An HTTP server is a piece of software that understands URLs (web addresses) and HTTP (the protocol your browser uses to view webpages). It can be accessed through the domain names (like mozilla.org) of websites it stores, and delivers their content to the end-user's device.
&
A web server first has to store the website's files, namely all HTML
documents and their related assets, including images, CSS stylesheets,
JavaScript files, fonts, and videos.
Taking this into consideration, I would say that Nginx is the web-server since it holds the html file. However, I really am not sure. Is it one of the two, both or is it a grey-zone?
Web servers provide web pages(HTML) with CSS, JS files that are required to render those pages. In your case, NGINX acts as a web server since it serves with HTML files.
NodeJS has a built-in HTTP module which supports to work with HTTP. We can use NodeJS to create Web servers since they use HTTP. But in this case, NodeJS acts as an API which exposes an HTTP interface to interact with it.

How to render some routes and serve a SPA from a CDN on another route with Express

I am using node.js and express to render some pages like home pages and some other SEO routes.
For a specific route I want to serve a react SPA which I host on a CDN.
on that page I load the main.js from the cdn, but it is trying to load the rest of the assets from the node server, not the CDN.
One solution is to serve the SPA from node, but I know serving assets from node on production is not the best practice.
So how do I render some routes locally with node, and proxy another to a SPA application?
Do I need a third server for reverse proxy?
Thank you!

Displaying many images with NodeJS and Express

I am creating a web application where I want to display hundreds of images. I am using NodeJS with the Express Framework.
How do I send images from server to client?
Edit: If I place all images in the public directory, are they automatically send to the browser if the page is rendered or are GET requests generated in time if those images are needed?
Are you required to use express? Usually, static files are better served using a proper web server (like nginx or apache) along with your node/express application or some kind of cdn. In the client you could configure how your images are requested to avoid loading all of them at the beginning, either only downloading on demand or doing non-blocking requests

Separating Express.js server and client projects

I'm a beginner in Node.js and I have implemented an express app with both client module and server module as a part of single project. I start server by calling
node server.js
I'm using express.static to refer to the client code and getting index.html of client.
app.use(express.static(__dirname + "/client"));
Now, what if I don't want client and server to be a part of same project? How should the express.static statement be written? Client's project can be located in some other directory and "__dirname" would not work in that case. How should client and server be made independent of each other's directory location?
In production it is standard to expose your client app with an http server which is better in serving static files, e.g. nginx.
All you're doing is serving files with express as though its a standard HTTP server. Its popular to serve these files with something like Nginx instead of relying on express to serve the files. Nginx scales better for this kind of thing. Its also possible to use a CDN to distribute your content to get it closer to your end user.
Either way, using express isn't horrible, but if you plan to scale its probably easier to scale the backend independent from the frontend because the backend is going to be a lot more resource hungry than a process serving static files.
If you are talking about relocating static files on your hdd but still serving them from express then you can use path module.
How should the express.static statement be written? Client's project can be located in some other directory and "__dirname" would not work in that case.
var path = require('path');
var pathToResources = path.join('/path/to/resources', 'client');
app.use(express.static(pathToResources));
But if you want to use different server (origin) to serve content then you don't need to specify this (just make sure to set up correctly cross-origin on the other server. In that case one server would serve as static content server and another as ```express`` backend api server.

Resources