How to serve javascript, css and image files (referred by index.html) using istio for Angular based applications - istio

I am trying to expose Angular based UI application using Istio Gateway, in the angular application the static resources are placed in a sub path (eg : demo/assets) , but in the index.html of the angular application the base href path is given as , due to this getting a 404 error as the .js and css files are not available in root conext.
In istio is there any option available to modify the path in index.html from "/" to "demo/assets".
so that the static resources can be loaded properly from the sub path
Please help..
I tried providing re-write option of virtual service to /demo/assets, but on network tab in browser could see still the static resources ( JavaScript, css) are being still looke on the root conetxt where its not available leading to 404 error.

Related

Multiple netlify static sites served under a single cloudfront domain path

I have multiple netlify static sites that I want to serve in their entirety under a path of a cloudfront domain. However, resources that don't reside at the root of the netlify app are not being served (raise a 404)
i.e.
https://netlify1-abcd123.netlify.app/
/
/page1
/page1/subpage1
/page2
/images/logo.png
/stylesheets/styles.css
https://netlify2-defg456.netlify.app/
/
/netlify2-page1
/netlify2-page1/subpage1
/netlify2-page2
/netlify2-images/logo.png
/netlify2-stylesheets/styles.css
and I want these to be served under www.mydomain.com/netflify1 and www.mydomain.com/netlify2. The root of www.mydomain.com is currently served via an S3 static site.
I have configured rewrite rules in netlify.toml for each site (changing as appropriate to netlify2) as below:
[[redirects]]
from = "/netlify1/*"
to = "https://netlify1-abcd123.netlify.app/:splat"
status = 200
force = true
...and then added an Origin to Cloudfront which has the Origin Domain Name of https://netlify1-abcd123.netlify.app/ - all other Origin settings are the defaults.
I've then configured a Behaviour with a Path Pattern netlify1 that points to the netlify1 origin. Note that I cannot use the Default behaviour as the main index of www.mydomain.com is served via a static site hosted on S3.
This all works perfectly fine when serving the root / of my netlify app. I can navigate to www.mydomain.com/netlify1 and see the home page of my netlify app. However, anything that is not on the / of netlify doesn't get served.
I can see from the developer tools that a request is being made to www.mydomain.com/images/logo.png and www.mydomain.com/stylesheets/styles.css when trying to load the images and the styles. This returns a 404 because (I presume) they are not getting picked up by any Cloudfront Behaviour or Netlify rewrite rules.
So my question is. How can I make images, stylesheets and any page not on the root of the netlify apps work correctly? I can make it work by manually added every single potential path as a Behaviour on Cloudfront (i.e. configure a Behaviour with a Path Pattern of /images/* to point to the netlify1 Origin) - but that doesn't seem scalable or even correct.
I don't know whether I need to somehow rewrite all my URLs on the netlify app during building so that they become /netlify1/images and /netlify/page1 rather than /images and /page1 (the netlify apps are docs built with Sphinx docs), or whether this is something that needs to be handled via a Rewrite Rule in Lambda#Edge. I'm completely stumped.

How to Configure django_plotly_dash to serve assets from custom url

I have an hybrid app with most pages being on vuejs but some legacy code pages are still being served through dash-django app.
previously it was wholly a dash app.
on the production environment this is being served through an nginx with dedicated static directory and a reverse proxy.
The app is being served on a subdomain.
So the url looks like :
abd.com/subdom/route_to_app_endpoints
where abd.com is set to serve nginx files from base directory
and abd.com/subdom is reverse proxy to serve files from port 8000 on which the django application is running.
The problem I'm facing is when the app loads the base url i tries to load the components and the layout from is hitting the root directory :
eg for
abd.com/.django_plotly_dash/app/FileUpload/_dash-layout and it
gives 404 not found. This is what it tries by default .
whereas if i request
abd.com/subdom/django_plotly_dash/app/FileUpload/_dash-layout my
browser gives a nice output ..
I tried setting :
PLOTLY_DASH = {
"requests_pathname_prefix" :"/subdom/"
}
in the settings.py but still it is unable to route properly.

Browserify + WebStorm debug breaks routing in React-Router v4 BrowserRouter

I am writing a single page app with React for educational purposes. My React-Router v4 BrowserRouter handles client side routing correctly on CodeSandbox but not locally. In this case, the local server is the webstorm built-in devserver. HashRouter works locally but BrowserRouter does not.
Functioning properly: https://codesandbox.io/s/j71nwp9469
You are likely serving your app on the built-in webserver (localhost:63342), right? Internal web server returns 404 when using 'absolute' URLs (the ones starting with slash) as it serves files from localhost:port/project_name and not from localhost:port. That's why you have to make sure to change all URLs from absolute to the relative ones.
There is no way to set up the internal webserver to use project root as server document root. But you can configure it to use URLs like http://<host name>:<port> where the 'host name' is a name specified in hosts file, like 127.0.0.1 myhostName. See https://youtrack.jetbrains.com/issue/WEB-8988#comment=27-577559.
The solution was to understand how push state routing and the history API works. It is necessary to proxy requests through the index page when serving Single Page Applications that utilize the HTML5 History API.
The Webstorm dev server is not expected to include this feature, therefore the mention of Webstorm in this thread was a mistake.
There are multiple libraries of < 20 lines which do this for us, or it can easily be hand coded.

CloudFront - serve different object based on path pattern

I'm serving a static webpage using S3/Cloudfront.
I would like to serve different html based on path pattern:
example.com/dashboard -> app.html
example.com/profile -> app.html
example.com/homepage -> homepage.html
example.com/marketing -> homepage.html
I know that you can set a 'Default Root Object' in cloudfront, but I was wondering if you would serve different object based on path patterns.
This isn't currently supported as written, but in an S3 bucket with web site hosting enabled, requesting /homepage or /homepage/ will automatically render the object at homepage/index.html if you set the Index Document for the bucket as index.html.
Lambda#Edge should be able to do this it, once that service leaves prievew mode.

How to resolve Railo mapping for CSS files

I set up the following mapping in the admin:
Virtual: /css
Resource: /resource/css/v1/
Now, how do I resolve this mapping so I can link to my css files? How can I resolve the /css mapping so that I can get <link href="/resource/css/v1/mycss.css">?
I went through the system function list but I couldn't find the right function. Thanks.
The mappings set in Railo admin are not for HTTP requests, they are so the CFML server can locate source code files. They have no bearing on URLs for requests.
CSS requests do not hit the CFML server, they are handled by the web server, so you need to set up a virtual directory on the web server, not a mapping in Railo admin.