Prerender angular2 pages as pure HTML - javascript

My problem is that facebook and twitter bots do not execute javascript, and I need metatags in my items, so that the right image/title/message is displayed when sharing on those platforms.
I have a nginx server serving angular2 content as static files.
Now I want to somehow prerender the pages for those bots. More specifically, I want to redirect the bots to an instance of for example phantomJS which would prerender the pages. I want that instance to run as a separate service on a different IP so that I can perhaps re-use it for something else too.
I have no idea where and how to start. Are there any nodejs server packages, who would already know how to do that for me?

Ended up installing a self-hosted version of prerender (https://github.com/prerender/prerender) and routed the bots to it through nginx. Works great!

Related

Make a game written in Javascript available online

I've just finished a simple game in Adobe Animate using the HTML5 Canvas. I now have .fla, .html and .js files. Can I now put these somewhere on my website to make the game available to play? If so, where? If not, what else do I need? Thanks.
Clicking on the HTML file opens it in a browser, but I can't interact with it.
Thanks.
You're stepping in to a whole new world of hosting and deployments. To have a functioning website you need:
A host server
A domain name
Web files (which you have)
The host server will serve up your web files and allow incoming traffic from the web.
The domain name is optional, but helps with visibility. Without it you'll have to connect directly to the IP address of the host server.
I'd recommend finding a host like HostGator, GoDaddy, or Amazon S3 if you want to host a static website. It can be pretty intimidating at first, but you'll need to put in the time reading documentation to fully understand the process.
Alternatively, if you just want to get it running locally and not on the internet you can install a simple http server on your machine. I use NodeJS so I'll test with http-server alot. Hope this helps!

GitHub Pages doesn't allow automatic redirects with Angular, it shows 404 GitHub Page

GitHub Pages shows me 404 when I use automatic redirection to the login path or try to directly access that path other than the base path in Angular.
I created an application in Angular that automatically redirects to "/auth/login" when it detects that the session has not been logged in.
So the problem I have is if I directly access the URL "user.github.io/example-app" the application works fine and perfect, but if I directly access the URL "user.github.io/example-app/auth/login" (or any path other than the parent) throws me the 404 GitHub Pages.
Even I am using PWA and when installing the app on my Android device it directly throws the 404 of GitHub Pages.
Note:
I have also noticed that if I use Lighthouse and do a test using http-server, it also throws a 404 when executing the test.
Using http-server I can install the application on Windows and this does show me the application, not the 404 that happened to me with GitHub Pages.
tl;dr Use HashLocationStrategy or Scully.
Angular, by default, uses the History API for routing.
This system allows the JavaScript to tell the browser:
I have manipulated the DOM so the user is effectively looking at a new page. If you went to this URL then the server would send you this page.
Unfortunately, Angular does nothing to make that possibly by default. There are three approaches that are used to get the server to play ball.
Configure the server to serve the bootstrap HTML document and then depend on JavaScript to update it for the URL (this is bad for caching, bad for HTTP status codes, back for search engines, and not possible on Github Pages).
Implement server-side rendering (e.g. with Angular Universal) where you use Node.js or similar to generate HTML server side for initial page loads using the same code as you would send to run in the browser. (This is not possible on Github Pages).
Static site generation (e.g. with Scully) where you generate static HTML documents for all your pages at build time.
Alternatively, keep having a single HTML document, ditch the history API, and replace it with a URL scheme that is based on the premise that you have only a single HTML document. Use the HashLocationStrategy).

Angular windows.open 404 error, works on local but not on webserver

I got an Angular app that calls a window.open that works for with ng serve with http://localhost:4200/newWindow
I can copy and paste this on my ng serve and chrome. it works locally
When the code is deployed to a webserver I get "status":404 "error":"Not Found"
window.open('https://myWebserver.com/newWindow', "_blank");
window.open('/newWindow', "_blank");
Not sure how I can debug or step into the code on the web server.
When I copy and paste the url on chrome ,https://myWebserver.com/newWindow
I get the 404 error but on my local with http://localhost:4200/newWindow, this works.
I tried using the '#' in the url with the following
https://myWebserver.com/#/newWindow
but no luck
Thanks in advance
Angular uses the history API to update the URLs.
The History API is designed to let a developer say: I have modified the document using JavaScript, it is now in the same state as you would get if you just loaded the HTML document from this URL.
Unfortunately, Angular doesn't do much to make that statement true outside of the development server (as you've observed).
The usual ways to solve this problem are with Server-Side Rendering or with Static Site Generation.
A hacky approach is to deliver the same HTML document for all unknown URLs and depend on client-side code to load all the page content for it. (This is bad food for search engines, breaks your ability use to Status 404 when a URL really isn't found, and for situations where the JS fails to load or run for any reason.) How you go about that depends on your server, this page has an example for Apache HTTP.
You need to serve index.html in case of 404 in that domain, this depend on what web-server you're using. Firebase deployments have an option for SPA. while Apache and Nginx requires you to edit the configurations
See Angular SPA returns 404 on Google PageSpeed Insights for Apache
The reason it works in development that ng serve is already handling this

Content is not shown at angular.js web application while Hosting

I'm new at this,
I built an angular.js app and now I want to host it,
I tried both on google drive or firebase but in both cases the html
is shown, but the information that loads on angular dosen't show..
Do I Have to develop a server side on node.js?
What can I do?
Thanks.
Yes, you need a http server to host your angular.js app, since angular.js need dynamically load the js file but it is not allowed to access the js file on file system directly. Suggest using this http-server to host. It's very convenient. Or simply copy your angular.js code to IIS or Nginx, Apache, Tomcat, etc ...

Phonegap: flexible iOS app update (No AppStore)

I have a Phonegap iOS app. My app is distributed privately, hence there is and there will be no usage of the app store. The app communicates with a homebrew middleware. In order to manage the app updates, I thought about doing something like:
-> On app start, check if a more recent version is available.
-> If yes then call a home-made Javascript module that will leverage the HTML5 file I/O API in order to update/create/delete files based on the output of the middleware.
In your opinion; is this solution reliable?
Are there any alternatives? (app store is completely out of the picture)
With a PhoneGap/Cordova app you normally load files from your local www folder. The problem with updating files at runtime is that you cannot write to the www location - you can only write to your app's 'documents' folder.
I assume you are using an Enterprise distribution since you are distributing without the app store. You could look at using something like TestFlight to distribute updates if you are happy for the users to have to go and check for updates.
You could also eliminate TestFlight and host the ipa files yourself, check for updates and then ask the user to download and install the update.
EDIT
It is not possible to write to the www folder with or without a plugin. This is due to iOS restrictions rather than PhoneGap/Cordova restrictions.
These links talk about distributing Enterprise apps over-the-air
http://developer.apple.com/library/ios/#featuredarticles/FA_Wireless_Enterprise_App_Distribution/Introduction/Introduction.html
IOS Enterprise Distribution Through OTA
Enterprise In-House App distribution
I was considering using the www folder as a bootstrap to download the actual app in a www folder in the document directory, and loading the index.html page from there (and the rest of the app)
I'm wondering if that would be an option
Of course the ObjectiveC UIWebView would point to the downloaded version if it exists
I know this is an old question, but the accepted answer is no longer correct. Here's a complete project showing how it can be done: https://github.com/ben-ng/phonegap-air
In short, the trick is to not write to the app bundle, but to the Documents directory.
There's an alternate service called Trigger.io. It is a lot like phonegap, but one of its' key features is that it lets you "reload" the app on the device, which is essentially what you're looking for, AFAICT.
So it seems that cordava can only load files that are in the app bundle. You cannot simply alter the webroot parameter to take the documents folder.
What you could do is use the FileReader API to read from the persistent store. This would mean you would have to create some sort of bootstrap html / javascript that is in the app bundle and create code that loads the content from the persistent store (which you can update yourself anytime you like)
This is a great place to start looking: Cordava File API docs

Categories