How to serve frontend and backoffice with a NodeJS application on Heroku? - node.js

I am using Nodejs with AngularJS for my backoffice application.
It stays on
http://localhost:3000/#!/
But what I need is, this url points to my frontend, and a subdomain like
http://backoffice.localhost:3000/#!/
opens my backoffice.
I tried some nodejs libraries like subomain, but I couldn't target the static files.
What is the best approach?

Related

How can I serve static html to the specific react-router route until it loads the actual dynamic content?

I want to serve a static html to my specific react-route page so it will be Static and SEO friendly until it loads actual dynamic data from the api.
Because My client don't want me to go for any static site generator package. So I need to make it by my own.
I'm using node.js, express and mongoDB as backend.
React.js, React-router as frontend.
Please let me know how can I implement this?

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.

Vuejs - SEO Prerendering

I have created a project using vue-cli and webpack (not webpack basic) and added pre-rendering using prerender-spa-plugin , since my application uses laravel API so i only pre-rendered some of the static pages like about us, contact us and not the login or signup page. so my question is that How will I serve (host) my application? two serves, one for crawler and one for users? or can i do that with the single serve?
NOTE: I dont want to use server side rendering.

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

Resources