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.
Related
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.
I have existing app that runs on Heroku. It's a simple web app with no background jobs or database.
Basically it has three endpoints. One of them serves the HTML, the other is POST endpoint for communicating with backend and third is GET endpoint that renders error HTML content as well.
Now the frontend is not single page application and the goal is not to be one. It's just HTML page with a form and some links. The front end can be used without Javascript.
My questions are:
Can I re-use existing ExpressJS code? I was thinking about importing route callbacks and use them inside the "functions".
I know there is Firebase hosting that can serve static content. However, as I mentioned the server can respond with HTML content so I'd need traditional routing (such as /error url for rendering HTML error). In my ExpressJS app I use .ejs templating so I'd like to load the template and render it.
Can Firebase be set up so the "backend" (functions) can be placed on my own domain? I'd like to call relative URLs from my index file (like that POST endpoint) instead of using Google Firebase URL.
I'm really just trying to find out if my use case can fit the Firebase infrastructure. I think it's a good candidate since I need the web app to respond infrequently and it's not really demanding, not many people would use it. This is also my hobby project so I'm trying to minimize costs.
To answer your questions:
Yes you can, but keep in mind some things are limited. In my case, I had tried to use multer library for multipart forms but didn't work and had to resort to using busboy instead. To use an Express app for a function endpoint, you simply just pass your app as the onRequest function parameter like so: functions.https.onRequest(app).
Docs:
https://firebase.google.com/docs/functions/http-events#using_existing_express_apps
The hosting is for static files only. You can't use that with .ejs. Unless, you're thinking to use that as a proxy to your Express app..
Yes, you can set custom domains so you can use your domain(s) instead of default ones. Reference: https://firebase.google.com/docs/hosting/custom-domain
From your project's Hosting page, enter the wizard for connecting a custom domain:
If you have only one Hosting site, click Connect domain.
If you have more than one Hosting site, click View for the desired site, then click Connect domain.
Enter the custom domain name that you'd like to connect to your Hosting site.
(Optional) Check the box to redirect all requests on the custom domain
to a second specified domain (such that yourdomain.com and
www.yourdomain.com redirect to the same content).
Click Continue to initiate the validation process.
I'm new to web development and i want to ask that why some website have the "/"?
for example https://www.roblox.com/home, notice the "/home" what does that called
I have tried to search on google and i can't find the answer
And some website have like "/login.php", "/index.html" it can also be html?
These are URLs (https://en.wikipedia.org/wiki/URL) and they identify the resource you are trying to reach. I would suggest reading more about how web pages works to get a better general overview of things(e.g.: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
How these resources are actually interpreted depends on the server side implementation:
.php are usually processed by PHP web server
Other static files such as images (*.png , *.jpg, etc), html files, svgs, CSS, js, etc - Are usually located in the local server by the web server (httpd, tomcat, IIS, nodejs, and many many others) and the files as transmitted to the client 'as-is'
When using online tools to build websites, these complexities are usually abstracted away, and in the end URLs will just mean a resource identifier.
[domain]/[section]/[page(.html|.php)|resource(.js|.css)]
domain: the address of the website
section: a way to navigate inside the website itself
page: the user interface that might be rendered server side of client side hold the controls shown to user
resource: files that changes how the content in the pages looks and behaves like
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
So I understand the fundamentals of isomorphic rendering with React / Node, but I'm confused on how I would fit Apache or NGINX into my landscape.
Typically, with a client-side page I would just serve the static content from Apache or NGINX and the client-side page would make AJAX calls (which are reverse proxied through Apache or NGINX) to Node. Node would serve up the data and the page would change accordingly.
Looking at an isomorphic page with React, the page is initially rendered on the Node server and changes are served up to the client from the server. Can I still use Apache or NGINX to load balance and reverse proxy my requests?
As an example, I would have one Node instance serving my API and one Node instance for rendering React and serving it to the client. In this example, could I load balance, reverse proxy my calls, and serve my .js and .css bundles from Apache/NGINX? In this example the user would access www.example.com/ - that would first go to the Apache/NGINX which would reverse proxy the call to the Node server which would render the page and serve it up to the client. Then, on the page the client would click some button and access www.example.com/api/test and that would also go to Apache/NGINX and reverse proxy over to the second Node instance, which would server the data back to the client. Or should that button click go back to the first Node instance (where rendering takes place) and that Node instance calls the second Node instance to get the data, renders the new piece, and serves it back to the client?
Basically I want an isomorphic app with all the benefits of having Apache or NGINX in front of my Node servers. Is that possible and/or best practice? If not, what is the ideal landscape for an isomorphic app so that I can still maintain all the benefits of Apache or NGINX as my entry point to my webapp?
Yes, that should all work fine. The React/Node server just renders html, and is reverse-proxy-able like any other html backend.
And yes, using a reverse-proxy/loadbalancer in front of your servers is a great idea, if you're planning on running something at scale.