So I'm currently investigating what technologies/libraries etc to adopt for a new, rather large scale project...
Given my teams knowledge of NodeJS, JavaScript, Express and Jade (now Pug) I/WE would ideally like to adopt these for the new project.
However, the current sticking point is the way in which HTML is being served under Express using route middleware.
We all know that Node/Express does a pretty bad job of serving up static files, which is where Nginx comes in. I can understand and even implement an Nginx config that handles the serving of img/js/css static files but what I'm trying to find out is this...
Can the serving of HTML (generated by Jade/Pug), using Express routes be handed over to Nginx in order to boost performance? Or is it the case that if you're using Express routing, you have to accept that serving of HTML files will be slow?
Got to be honest, I'm not quite sure how all this fits together so am hoping someone can shed a little light on this ;-)
Thanks in advance guys and gals
Reasonable recommendations:
Serve static files with NGINX, you can configure it to fetch the
files directly.
Serve dynamic files with NGINX proxied to your express app, and set an adequate cache value.
Can the serving of HTML (generated by Jade/Pug), using Express routes
be handed over to Nginx in order to boost performance?
Yes if you cache.
Or is it the case that if you're using Express routing, you have to
accept that serving of HTML files will be slow?
Not if you cache.
I hope that helps!
Without questioning for more details, I can point out some things i keep in mind when developing on Express:
Express "default" rendering done through res.render may not be optimal for a number of reasons. For example, lookup for the template file which is recalculated every request
Jade template engine doesn't support streaming
I would suggest, before looking at interventions outside application context (such as Varnish or plain Nginx conf), to try:
using a template engine supporting streaming: Marko, Dust, Nunjucks
if the app is a single-page, or generally an ajax based one, and you don't need any special SEO setup (although, there are fixes for that too), you may also pre-cache the static html then fill it up on the client (but this is really just a rant).
A good overview comes from Strongloop's blog post
Related
The project is using EJS, Express/NodeJs, MongoDB and I have added ReactJs to it.
Now I want to implement Webpack for bundling EJS and ReactJs files together.
The project eventually has to be converted to ReactJs but for now we need to Bundle EJS as well.
Is there a way I can do that? I need help.
EJS can run client-side and React can run server-side but a typical Express/EJS set up runs the EJS server side and delivers plain HTML to the client, while a typical React setup runs the React code client-side (and might add server-side rendering as a bonus).
Assuming you aren't doing anything highly atypical (in which case you really need to explain your setup in much more detail) then the short answer is: No.
You need your EJS to run server-side, so putting it in a bundle and sending it to the client is pointless.
If you want to transition from a classical server-side rendering of HTML to a React system then a typical way to do that is on a page-by-page basis. \
You can either serve up a basic static bootstrap HTML document for the pages you replace, or get creative with a SSR system for those pages (and either do some clever mixing of routing rules or just put a reverse proxy that diverts different URLs to a Next.js server or an Express server depending on if they have migrated or not).
Another approach is is to write a series of small React components that replace individual components of pages (e.g. a navbar application) and have the entry point include multiple ReactDOM.render calls for each component.
That latter approach is less suited to involving SSR at all though.
Either way: You wouldn't be sending the server-side EJS code to the client so it wouldn't be bundled with the React code.
I have started working on a project that needs a re-write. So, instead of doing a big bang release
we have decided to use Strangler Pattern which means the following
The current application (stack details below) will be running as is under the existing domain https://app.com
The existing (and new) features will be re-written in a new stack (details below) and deployed in parallel to the existing app (under the same domain https://app.com)
The requirements are
The end-user always works with the same domain https://app.com
Any existing feature migrated to a new app or a new feature is available by the under the same domain https://app.com
The stack and architecture of the current app is
HTML files with hardcoded data
CSS files
font files
PDFs
images
flash files
among other things.
Thee application is static. It has no database. It makes calls to other 3rd party APIs but does not have its own database (other than the files, and the images)
It sits under a directory and is served by running a web server (Apache) on a private dedicated server.
The stack and architecture of new re-write will
Use React or Gatsby
A standard build system that generates the static files
The data (PDF, Images) hosted somewhere else
Flash files (until we figure out a better way)
Given these requirements, I thought of having 2 versions of the app using some sort of load balancer such as Nginx and serve the URL patterns using a proxy.
For example
a request coming to https://app.com/productPage.html goes to existing app deployment (assuming it is not migrated)
a request coming to https://app.com/profilePage goes to existing app deployment (assuming it is migrated)
Now, considering this situation, I want to ask the following question
Is this approach looks sane? Are there better ways to deal with this situation?
How to implement such a reverse-proxy based system (considering Nginx)? (or if there is a better way)
I would love to hear out ideas and any resources/books/github that can help me learn and implement this.
Thanks a lot in advance!
I would recommend to create a v2 of pages that has been migrated to new functionality. And all links to the page should be updated to point to v2.
If anyone has done bookmark to old links, then those pages can simply redirect the user to the v2 ones by simply redirecting them using JS - window.location(url_of_target_page);
I have nodejs + express server for API and I'm supposed to build SPA using latest Angular. The SPA should have a couple of static HTML pages which should be rendered using server side rendering and some templating engine - probably Nunjucks. My question is, is it possible to use that existing API server for server side rendering? SPA + static pages should be under one repository/directory, API server is under another. API server will be under separate domain. Is it possible to have them under separate projects or is it only possible if I combine server and SPA into a single project? The latter I assume being a pain to maintain.
Yes, You can definitely use your existing node and express server. #angular/universal is used for Server Side Rendering.
There will be separate Files for Server Configurations.
My Suggestion would be to make separate Repository for Angular app and let your existing one be as-is, that will help to maintain it better.
Please Follow "https://angular.io/guide/universal"
I've been looking for a solution to optimize images for better performance.
After trying some solutions (like sharp and imagemin, which resulted in never smaller, sometimes bigger files), I am now looking to experiment with Google's pagespeed. Unfortunately, pagespeed seems to only support Apache and Nginx, which I would not like to add to my stack just for image optimization (also, I would prefer making the optimization once on upload, and not on server request, even if cached).
I will be very grateful for any information that might help me implement this in native node.js, and for any other (working!) image optimization recommendations.
I suggest you only use node for dynamic content (e.g: your application server logic).
For static content, such as images, stylesheets and others... just serve them with a regular web server like nginx. There you can use ngx_pagespeed.
Try npm module lwip.
It's a standalone library(re-built when installing) and no runtime dependencies.
I use its resize and scale operations to create thumb images in my file service project.
Check if this is what you need. :)
I am quite new with server side programming in general and node.js in particular. Despite the several books I read about it I still can't figure out how to display an index.html in the client side, along with its css files. Is it most common to work with a ready made index.html file or perhaps to construct it on the fly using node.js? There's a big chance I'm missing something quite major here so I'll appreciate a well-explained answer...
Thanks!
Generally, if you're using Node to create some sort of web site or web app, you don't do it directly with Node. I'm going to assume that your end goal here is the website - not your own customized HTTP server that is also capable of serving websites.
So while Node does have the http library built in for serving content over HTTP, your life will probably be a lot easier if you use one of the common libraries/frameworks designed for creating websites with both dynamic and static content, such as Express.js. Using Node directly for HTTP relies more on your knowledge of the HTTP protocol and less on your knowledge of Node or HTML.
Express.js has a very straightforward guide about how to set up a simple app. If you're serving entirely static content, you can even skip the calls to app.get() and instead just set up up express.static() to point to a directory with your index.html and CSS files in it.
This might not be the answer you're looking for - you really need to decide if you're trying to learn server-side network programming, or if you're just trying to learn how to make modern/database-driven web apps. Raw Node is (usually) network programming. Express.js and similar are webapp programming.