I have a simple Angular 4 project served by Express. When I tried to fetch my site using Googlebot, it just showed a blank page (the innerHTML of AppRoot). I thought Google claimed its bots support Angular 4 / JS websites?
If this is still issue, is server side rendering using Angular Universal really the best solution? Like I have to set up another server that serves the server-side rendered app in addition to the main server that serves the normal client-side rendered app? And if it is, how do I tell googlebot to go to the port for the server-side rendered app and normal http traffic to go to the port for the client-side rendered app? Aren't crawlers http traffic?
The issue is not Angular4 specific. Any data generated dynamically by javascript will show first as blank, and then load its content. I assume you are looking at google page speed Insights.
To see what google see:
comment out your external css
comment out your external js
This will be google initial view. After that google will fetch the external files, run your javascript and render the page. Google page speed will penalize you for any changed pixels above the fold before and after fetching the external assets.
Angular Universal (or any server side rendering as this is not an angular issue) will solve that problem.
Hope that helps.
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.
Being new to WordPress, I've been doing some research and yet I don't seem to be able to pinpoint a solution for my need.
In short, I would like to allow a WordPress page to access a Node.js backend, the goal is ultimatly to get access to MongoDB via Node.js, retrieve some data and return a dynamically generated webpage to the website.
I was checking WordPress Rest API but all it seems to do is frontend handling of a WordPress website, creating and editing post, etc.
Unless there's a better way of doing it, I was thinking I might just send a get/post request from the WP page (like, with a form's action) and use Express.js to listen to that request, do the whole workflow on Node.js, then maybe use some npm wordpress API (like this one) to create a wordpress client and add a page or post with the DB extracted content.
I would appreciate some guidance, if any, as to how could one connect from WordPress to a Node.js backend.
Thanks a bunch!
There are a lot of ways to do it.
If you only need Node for a particular page then you can use your web server (NGINX/Apache) to reverse proxy a particular path to the Node server.
If you had to you could always use an HTML iframe as well but for some reason I feel like that's bad advise.
The method you described would work too. I was considering using GET/POST requests with Express running on a different port for a project I'm working on that uses Wordpress. I decided to go with the solution linked below.
This is probably the method you're looking for based on your description. Skip to solution three if you have to use Wordpress.
Node JS Reverse Proxy (with Apache)
You can find how to do it with NGINX with a quick search.
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
For my local angularJS development, I'm using nodeJS. If I deploy my angularJS project on a tomcat server, it basically works BUT, I'm using different pages and different controllers and every time I click on the other page, it seems that the whole application is restarted again, because the data in the rootscope is lost and it starts program parts which should be started on application startup only.
Can anybody tell me whats going wrong here?
Why is my application not 100 % correct running on tomcat?
I'm using tomcat 7.0.34
I'm not familiar with Tomcat, but we've had the same issue with Apache. As Angular needs to do the routing of your app itself, you have to tell your web server to always deliver your root HTML page, e.g. index.html.
After doing that, your app should work fine.
I assume when you say different page you literally mean a different html page (url).That is the expected behaviour. AngularJS is a Single Page Application (SPA) framework. Like any other SPA it gets reinitialized when you do a full page load\reload or you navigate to another page.
This is due to stateless nature of HTTP. Every page is an independent request, which starts the client side page life cycle.
For using AngularJS correctly as SPA, you need to have a main page. The content of this pages gets alter\appended by child views\partials (again pages). AngularJS also hijacks the browser url chnanges so that this does not cause full page reloads on url change.
Look at some sample applications created using AngularJS to understand how it works.