How do I set the favicon used when serving files from DNN Platform? - dotnetnuke

When serving static files (e.g. PDFs) from a DNN website, the default DNN favicon shows up, rather than the favicon configured for the site. How can we get the site's main favicon to be used when serving static files?

When serving static files, DNN isn't part of the request. There's also not a way for the web server to tell the browser an alternate location for the favicon. So the browser looks in the default location, /favicon.ico. A DNN favicon is included here in the default installation package. Assuming you aren't hosting sites with different favicons in your DNN installation, you can simply overwrite DNN's favicon.ico file in the root of the file system with your custom favicon.ico file (this will require access to the web server's file system, it's not exposed through the web interface by default).
If you host multiple sites with different favicon.ico files, there's not as simple of an answer here. You could probably use URL Rewrite rules to read the host being used in the request, and redirect /favicon.ico requests to the correct spot.

Related

Serve a React .net core template from subdomain

I'm trying to serve a .net core (5.03) web app with the React template from a subdomain, meaning it should serve the static assets from https://someServer/someSite and not from https://someServer, like the Web Server (IIS10) is doing right now after being pointed to the directory.
It serves the index.html file from the right place, But tries to get the other assets and calls from the main domain.
I tried to directly edit the <base> element, but to no use.
How do I configure what path should I serve from without ejecting the CRA and directly editing the webpack.config?
Turns out you have to change %APP_PATH% env var in the CRA, or add an homePage property in your package.json (inside the ClientApp).
The settings in Startup.cs are already relative to the DLL path.

Deploying Angular Application to GitPages - Not Routing Properly

Disclaimer: I am not a frontend guy by trade. I am being asked to deploy an Angular application other engineers have created.
I have gone through the process of deploying an Angular application to GitPages and have also tried the handy Angular CLI GH Pages library. However, they both have the same issue, and I'm not sure if it's the application itself or how I am deploying it.
The base page loads fine, but all other resources (image/font files, links to other pages, etc.) do not load properly. This is because they are not using the proper base URL; our corporate GitHub makes us use https://....com/<org>/<repo> as the URL. All resources outside of the base page are not prepending the /<org>/<repo>/ part to the URL, so they are all returning 404s.
My index.html file in docs/ contains the proper base href="/<org>/<repo>/" and the docs/ folder contains all needed images and font files in its assets/ subdirectory, so I'm not sure what gives. I have also copied index.html to 404.html.
Am I missing something? Or is it possible that this web application was not created correctly for GH Pages?
Thanks in advance :-)
Change the base href to index.html only and all will work from there
base href="index.html"
From there it will take the path properly

Google Cloud Bucket and ReactJS app Access

Using ReactJS I made a Build (reactJs static, npm build) and uploaded it to Google Cloud Storage Bucket, but getting a issue with the Path and Build folder files. The app (/static website) running but could not fetch the files from the bucket directory for eg the index.html & logo. (404 or 403 error )
Structure: Parent Bucket > Build folder (index.html, static folder & other files inside Build)
Any one have any suggestion on this. How to resolve this?
Do I need to create an app.yaml for GCS Bucket or any alternative?
I have gone through the article quite similar but for AppEngine instead of Bucket. https://medium.com/google-cloud/how-to-deploy-a-static-react-site-to-google-cloud-platform-55ff0bd0f509.
I have tried with app.yaml file but does not work for me.
I had exactly the same issue as mentioned by the OP. I am sharing my version of solution just in case anyone else ends up here.
As shown in the screenshots by OP, the 403 errors showed up for me because the URL of the static files in build/static folder was not correctly configured by the react-scripts build script.
Eg:
The url for index.html file was https://storage.googleapis.com/{bucket-name}/index.html.
However, when the page loaded, it requested files having url https://storage.googleapis.com/static/js/main.f555c3e0.chunk.js. It should rather be
https://storage.googleapis.com/{bucket-name}/static/js/main.f555c3e0.chunk.js
This is happening because by default react-scripts build assumes that your files will be served from root folder of your host.
To fix this add the following field in package.json of your project
"homepage": "https://storage.googleapis.com/{bucket-name}"
This tells the build script that it needs to add a relative path for serving static files.
For details please refer: https://create-react-app.dev/docs/deployment/#building-for-relative-paths
In order to set the routes of a static website stored in Google Cloud Storage, you need to assign a suffix to your objects. In other words, using suffixes is the intended way to configure your website. You can see more information in Hosting a static website document.
For your main index page you should set MainPageSuffix and for the not found page 404.html you should set NotFoundPage as suffix.
You can see more information on how to configure your static web here

Google App Engine serves static CSS files with wrong mime-type

I've been working on a new site to be hosted on Google App Engine. I've been deploying my app to a development project and it is hosted here:
Development: https://herdboss-dev.appspot.com/
It works fine.
But when I take the exact same code and deploy it to my other project which going to be the real, production website, it is serving some of the css as application/octet-stream instead of text/css and so those files aren't being parsed by the browser, so almost all of my css is not working on the production site:
Production: https://herdboss-prod.appspot.com/
Even weirder is that SOME of the css is being served correctly. /css/normalize.css is being served as text/css but /css/site.css is being served as application/octet-stream.
https://herdboss-prod.appspot.com/css/normalize.css
https://herdboss-prod.appspot.com/css/site.css
https://herdboss-prod.appspot.com/js/jquery-ui-1.12.1.custom-theme/jquery-ui.min.css
My app.yaml has a static handler for css files:
- url: /css
static_dir: css
secure: always
I tried adding a mime_type as well but that didn't change anything:
- url: /css
static_dir: css
mime_type: 'text/css'
secure: always
EDIT:
While experimenting, I cut my site.css in half, deployed, and then it started serving correctly. Then I reinstated the full size site.css, deployed... and it's still serving properly now.
But my jquery-ui.min.css is still serving as octet-stream. This is crazy.
EDIT2:
And it's serving my svg's with the wrong mime type as well.
Is mime-typing just utterly broken in the GAE? If so, why is it working on my dev gae?
My solution was:
duplicate the offending file and rename it
change one byte (otherwise it will not be uploaded/updated)
verify that it downloads as stylesheet
use the renamed, changed css file in your html
Wait for the original to get served correctly: after about 24h the problem fixed itself
There is an issue on the GAE issue tracker: https://issuetracker.google.com/issues/186012458
Initially, I tested a workaround but this workaround broke after a day: I modified my HTML to load the stylesheets from a version server basically cross-site as (hxxps://VERSION-dot-SERVER.appspot.com/static/stylesheet.css). The version server served the correct mime-type ... but only for some time.
I suspect the problem is a wrong mime-type due to an extremely rare race condition (cache access/refresh during upload?). It is simply not possible to trick the Google Frontend to refresh the file. Even appending .../styles.css?x=1 or switching back to an older code version will not trigger a refresh.
Files and their mime-types seem to be stored based on their hashed-values, so re-upload of a file with the same content has no effect even if it is simply renamed. You will see an "uploaded 0 files" message if you deploy a version with a duplicate file. It has to be changed and renamed.
I did check both of your sites: https://herdboss-prod.appspot.com/, https://herdboss-prod.appspot.com/
I can see that you have several CSS files: normalize.css, jquery-ui.min.css, base-min.css, grids-min.css, grids-responsive-custom.css, css?family=Open+Sans,
site.css, ie-is-terrible.css, css_compiled.css.
All of them served correctly as Type: stylesheet
If you encounter this problem I recommend performing following test:
Check content type in Developer Console > Network with the option Disable Cache > And reload page. If it helps: clean cache of the browser.
Check content of the page in different browser, as content can be interpreted differently depending on the rendering engine.
If 1 and 2 does not work, and you are using nginx, it is most probably configuration problem. Change the file /etc/nginx/conf.d/default.conf. Put /etc/nginx/mime.types in the 'http' section:
http / {
include /etc/nginx/mime.types;
default_type application/octet-stream;
....
}
if it is still not working, move it to location section
location / {
include /etc/nginx/mime.types;
...
}

ExpressJS+NodeJS server won't serve CSS files

I'm trying to host my own web server, so i redirected traffic from the domain to my computer. Traffic is successfully reaching my computer and the website is being displayed except ExpressJS is not serving the only CSS file so the content on my website is all over the place because its not being styled.
The failed GET of the CSS file is seen in the console:
resource: net::ERR_CONNECTION_TIMED_OUT xxx.xx.xx.xxx/styles.176e4d821cc3a21887b2.bundle.css Failed to load
Looking further into the error we see it is the only file that failed, even though all the files are in the same physical directory as you see on the next image:
I'm using Angular and this is my dist deployment folder and you can see the CSS file is in the same locations as the JS files but only the CSS file fails to be GET'd:
In Express i have the following which seems to serve the JS and HTML files but not the CSS file:
app.use(express.static(path.join(__dirname, '/')));
Also, everything works perfect on localhost, its only on traffic redirected from my .com website that the site fails to GET the css file.

Resources