Our React app is served from a static hosting using S3 and CloudFront.
We configured S3 and CloudFront to add CloudFront-Viewer-Country in the return header of each request made to resources in it. So for instance, our index.html makes a call to get the .js bundle from CloudFront, the returned header would include: cloudfront-viewer-country: US in my case.
My goal is to have the React app "wake up to life" already knowing the location of its user. I realize I can probably add some javascript to the index.html to keep/store it somehow so that the React root component can pick up on that and pass it on to wherever it needs to be (probably the redux state). But then I ask myself, how do I tap into the response header received when the <script> tag finished loading the bundle in order to extract the custom header from it?
the index.html is pretty straightforward. Its body looks like this:
<body>
<div id=root></div>
<script type="text/javascript" src="/myBundle.ac9cf87295a8f1239929.js"></script>
</body>
What do you recommend?
It isn't possible to access the headers from the page load or script load. You will have to make a separate request to access the headers.
You could also use browser's locale (navigator.languages) if you need this information for localization.
Related
I load an HTML file into a WKWebView on Xamarin.iOS using webView.LoadHtmlString(). This HTML file references a CSS file and a JS file, for example:
<html>
<head>
<link rel="stylesheet" href="https://example.com/styles.css"/>
</head>
<body>
<script src="https://example.com/script.js"></script>
</body>
</html>
I want to intercept these requests in my code so I can inspect the details of the request, and reroute them to a local cache. I use a subclass of WKNavigationDelegate, with an overridden DecidePolicy() method to intercept requests.
The problem is that DecidePolicy() does not get called for these two requests (for the CSS and JS files). DecidePolicy() only gets called when the user triggers a navigation action.
I have also tried using webViewConfiguration.SetUrlSchemeHandler() with an implementation of IWKUrlSchemeHandler, and replacing instances of "https://" with "customscheme://" in my HTML file, but the method StartUrlSchemeTask() does not get called.
How can I intercept requests for linked resources in an HTML file?
Thanks
Try the following steps
Register custom scheme with WKWebView .
Convert file scheme to the custom scheme .
Use LoadRequest instead of LoadHtmlString .
Implement 2 methods of WKURLSchemeHandler protocol and handle 3 delegate methods of WKURLSchemeTask.
Refer to
https://stackoverflow.com/a/21959563/8187800
How to intercept a WKWebView request to detect which local resource files (css, js, png, ...) load together with a HTML file?.
We are working on a reactjs web application with NestJs for server-side.
At the moment we use ServeStaticModule.forRoot.
The app needs some configuration (e.g. url of analytics server, clientId, redirectUrl …).
Since Create React App doesn’t support server rendering, we added placeholders into the HTML and we want to inject variables to the client.
For example :
<html lang="en">
<head>
<script>
window.CONFIG = __CONFIG__;
</script>
https://create-react-app.dev/docs/title-and-meta-tags#generating-dynamic-meta-tags-on-the-server
How can we replace the CONFIG?
The following approach is for Express.
If you want to modify index.html then one approach is to use app.useStaticAsset(//build path, {index: false}) in main.ts to serve the content while ignoring index.html. Then you can sendFile(//index.html path) in root path to deliver a page.
To replace placeholder config, you can have something like readFileAsync in a respective service or controller to read index.html content and process it before delivering to a client.
Basically the heading. I have a strapi app at localhost:1337 which I will fetch in React. I'm not very sure how localhost works, and therefore I want to know if the path will still be relevant when I deploy the react app.
When you deploy your react.js app on any server your url named http://localhost:1337/Dashboard
will be changed. In it http://localhost:1337/ is the base url or domain name. Which will change the server to the new one.
your code will maintain same value for that API and you will have to re-build your code each time you change your API, (most of people use low cost hosting provider which allow only port 80 to be used) my advice is to move your endpoit (backend url) outside your code in a json, .env file ... but what will work on most of platform is a variable defined in your public/index.html (not a best pratice but it will work) ex:
<html>
<head>
<!-- you will add this tag here it will contain your backend url -->
<script>
var bakendUrl = "http://....";
</script>
<!-- some other code here -->
</head>
<body>
<div id="root"></div>
</body>
</html>
Problem
I have a static SPA site built with Angular and hosted on Amazon S3. I'm trying to make my pre-rendered pages accessible by crawlers, but I can't redirect the crawlers requests since Amazon S3 does not offer a URL Rewrite option and the Redirect rules are limited.
What I have
I've added the following meta-tag to the <head> of my index.html page:
<meta name="fragment" content="!">
Also, my SPA is using pretty URLs (without the hash # sign) with HTML5 push state.
With this setup, when a crawler finds my http://mywebsite.com/about link, it will make a GET request to http://mywebsite.com/about?_escaped_fragment_=. This is a pattern defined by Google and followed by others crawlers.
What I need is to answer this request with a pre-rendered version of the about.html file. I've already done this pre-rendering with Phantom.js, but I can't serve the correct file to crawlers because Amazon S3 do not have a rewrite rule.
In a nginx server, the solution would be to add a rewrite rule like:
location / {
if ($args ~ "_escaped_fragment_=") {
rewrite ^/(.*)$ /snapshots/$1.html break;
}
}
But in Amazon S3, I'm limited by their redirect rules based on KeyPrefixes and HttpErrorCodes. The ?_escaped_fragment_= is not a KeyPrefix, since it appears at the end of the URL, and it gives no HTTP error since Angular will ignore it.
What I've tried
I've started trying using dynamic templates with ngRoute, but later I've realized that I can't solve this with any Angular solution since I'm targeting crawlers that can't execute JavaScript.
With Amazon S3, I have to stick with their redirect rules.
I've managed to get it working with an ugly workaround. If I create a new rule for each page, I'm done:
<RoutingRules>
<!-- each page needs it own rule -->
<RoutingRule>
<Condition>
<KeyPrefixEquals>about?_escaped_fragment_=</KeyPrefixEquals>
</Condition>
<Redirect>
<HostName>mywebsite.com</HostName>
<ReplaceKeyPrefixWith>snapshots/about.html</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
As you can see in this solution, each page will need its own rule. Since Amazon limits to only 50 redirect rules, this is not a viable solution.
Another solution would be to forget about pretty URLs and use hashbangs. With this, my link would be http://mywebsite.com/#!about and crawlers would request this with http://mywebsite.com/?_escaped_fragment_=about. Since the URL will start with ?_escaped_fragment_=, it can be captured with the KeyPrefix and just one redirect rule would be enough. However, I don't want to use ugly URLs.
So, how can I have a static SPA in Amazon S3 and be SEO-friendly?
Short Answer
Amazon S3 (and Amazon CloudFront) does not offer rewrite rules and have only limited redirect options. However, you don't need to redirect or rewrite your URL requests. Just pre-render all HTML files and upload them following your website paths.
Since a user browsing the webpage has JavaScript enabled, Angular will be triggered and will take control over the page which results into a re-rendering of the template. With this, all Angular functionalities will be available for this user.
Regarding the crawler, the pre-rendered page will be enough.
Example
If you have a website named www.myblog.com and a link to another page with the URL www.myblog.com/posts/my-first-post. Probably, your Angular app has the following structure: an index.html file that is in your root directory and is responsible for everything. The page my-first-post is a partial HTML file located in /partials/my-first-post.html.
The solution in this case is to use a pre-rendering tool at deploy time. You can use PhantomJS for this, but you can't use a middleware tool like Prerender because you have a static site hosted in Amazon S3.
You need to use this pre-render tool to create two files: index.html and my-first-post. Note that my-first-post will be an HTML file without the .html extension, but you will need to set its Content-Type to text/html when you upload to Amazon S3.
You will place the index.html file in your root directory and my-first-post inside a folder named posts to match your URL path /posts/my-first-post.
With this approach, the crawler will be able to retrieve your HTML file and the user will be happy to use all Angular functionalities.
Note: this solution requires that all files be referenced using the root path. Relative paths will not work if you visit the link www.myblog.com/posts/my-first-post.
By root path, I mean:
<script src="/js/myfile.js"></script>
The wrong way, using relative paths, would be:
<script src="js/myfile.js"></script>
EDIT:
Below follows a small JavaScript code that I've used to prerender pages using PhantomJS. After installing PhantomJS and testing the script with a single page, add to your build process a script to prerender all pages before deploying your site.
var fs = require('fs');
var webPage = require('webpage');
var page = webPage.create();
// since this tool will run before your production deploy,
// your target URL will be your dev/staging environment (localhost, in this example)
var path = 'pages/my-page';
var url = 'http://localhost/' + path;
page.open(url, function (status) {
if (status != 'success')
throw 'Error trying to prerender ' + url;
var content = page.content;
fs.write(path, content, 'w');
console.log("The file was saved.");
phantom.exit();
});
Note: it looks like Node.js, but it isn't. It must be executed with Phantom executable and not Node.
Background:
I'm loading my entire AngularJS Cordova/Ionic web-app from the server. This is amazing. I can change the app without going through Apple.
Questions:
Q1) How can I use js-files.zip, loaded from server, in my index.html file?
Q2) How can I effectively load index.html startup logic from my server?
Problems:
On some older devices, loading time is too high if I load all my .js files from my server, so I want to be able to configure that logic (in index.html) also from the server.
The only thing I'm not loading from the server is the content of index.html
So, how can I essentially load index.html from a server?
If i try to do that
1) Pulling, say, indexfromserver.html using ajax and doing html rewrite of index.html with document.write(res), then there are AngularJS problems:
E.g., module missing errors (*1 below), because the following isn't in index.html until after the ajax response rewrites index.html:
<body ng-app="myapp" ng-controller="MainCtrl">
1.1) I can include the necessary modules in the initial local index.html, but then if I rewrite index.html, I'll get these errors/warnings about classList null in ionic (ask me for details), deviceready not fired, and angularjs loading more than once
2) I can redirect index.html to, say, indexfromserver.html, but then all my $http responses are rejected promises.
Regarding 2) I've been told I should be able to add a controller for indexfromserver.html or specify $urlRouterProvider.otherwise('/app/indexfromserver');
This hasn't fixed the $http requests from being rejected.
I don't understand exactly how index.html is involved in making $http work correctly, as it doesn't have a controller and isn't the 'otherwise' route provided. I only see mention of index.html in config.xml so far.
Request:
Can someone please post a snippet of a typical example how an AngularJS Cordova/Ionic app could effectively use index.html logic that's loaded from a server?
Otherwise, can someone show/explain if/how I can use js-files.zip from server, and uncompress and use in index.html?
Details/Notes:
(*1)
Uncaught Error: [$injector:modulerr] Failed to instantiate module myapp due to:
Error: [$injector:nomod] Module 'myapp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.17/$injector/nomod?p0=myapp
It was pointed out that you can use JavaScript in certain situations to unzip an archive, but that is not very common. The web does not work like that, Ionic runs inside of a browser so you should use the same processes as you would to optimize a website.
You would build the app instead like any website. Take the following steps to create a more optimized app for loading quickly. If you aren't familiar with build tools, take a look at http://yeoman.io/, and this specific generator for Ionic https://github.com/diegonetto/generator-ionic.
Here is a very basic list of some steps you can take, though the generator provides a few more options and other things could be added as well.
Concat and minimize your app's JavaScript into single file.
Concat and minimize your app's CSS into a single file.
Compress your angular templates with a tool like this https://www.npmjs.org/package/grunt-angular-templates into a single JS file.
Deploy static assets to server.
Link to above assets in index.html.
Ultimately the goal is to optimize the assets so you don't have to load a lot of files, and each file is as compressed as possible.
If you want to go the zip file route, and you assume your users aren't always connected to the internet, probably the best way is to:
Check if the version is new via a server call, and if so, download the zip file, extract it (maybe via stuk.github.io/jszip/), and use a Cordova interface to write the new JS code to the phone's memory, and run the code by adding some script tags in your loader.