.OTF font not being deployed to Azure - asp.net-mvc

I have an MVC 4 application with an .otf font in the /images folder. It works on my desktop, but when I deploy to azure I get a 404 when trying to access /images/myfont.otf
The font already has the Build Action property set to 'Content'
How can I force Azure to pick this up?

You probably need to configure the IIS to properly serve this file type. You do this by adding the following to the <system.webServer> element in Web.config:
<staticContent>
<mimeMap fileExtension=".otf" mimeType="font/otf" />
</staticContent>
More info
http://www.big.info/2013/06/how-to-use-otf-opentype-format-fonts-on.html

Place the following in web.config in the system.webServer configuration:
<system.webServer>
<staticContent>
<remove fileExtension=".otf" />
<mimeMap fileExtension=".otf" mimeType="font/otf" />
</staticContent>
</system.webServer>

HTTP Error 404 means the content is not found on server. It does mean that when you deploy your application to Windows Azure the content was not in the package.
As you suggested above that you do have .OTF set as content it means that you are asking compiler to treat it as static file and don't build it however specific file will not be copied to the final output folder to be the part of final CSPKG. You would need to set "Copy to output directory" as "copy always" so it can be part of CSPKG and deployed to Azure Cloud service.
Once you set file properties correctly and build your application, you can manually visit to your output folder to the verify that file is there as well as your CSPKG just by unzipping it.

The problem for me is that the files weren't included with the project. They were in the correct file path ((project)/Content/fonts/*), but not considered part of the project (i.e. references by the *.csproj file). The solution was to right click the fonts folder and choose the Include in Project option.

My best bet is that you've got relative paths to your font files within your css.
Are you getting a 403 Forbidden? That might indicate that your filepath's are off.
Try changing your paths from ../filename.otf to something like /Styles/filename.otf (or whatever your path is)

Related

Configure apple-app-site-association file and upload on server

I am new on iOS development. I am implementing Universal Links in iOS App with ASP.net application.
I have define my associate domain in capabilities under Associated Domains:
applinks:www.abcd.com
And also configure in App Ids on Apple Developer Account. I think app side work is all set .
But I think problem with apple-app-site-association file.
I have written json in a simple text file like below
{
"applinks": {
"apps": [],
"details": [
{
"appID": "8T8932TY.com.AppNameā€,
"paths": ["*"]
}
]
}
}
Now I am stuck here. My application targeting on iOS 9 and above. I am confused that what is the extension of this file with naming apple-app-site-association. If I need to signed in with new certificates or not. And how upload it on server side.
Please guys help me out. I am searching lot for this but not get satisfactory answer.
Thanks
Your example JSON looks fine if substituted with real values for the AppID/AppName. You may want to be specific about what routes you handle but that's up to you - it's a better user experience to only try to handle routes that there's some chance you'll be able to handle, rather than opening your app for every link on your domain and kicking the user out to Safari again if that turns out not to be true.
The apple-app-site-association file should not have any file extension, and should be served from the root of your site, https://example.com/apple-app-site-association, and/or from https://example.com/.well-known/apple-app-site-association.
You say you're supporting iOS 9 and above - the change to check the .well-known route, which is checked first, came in iOS 9.3, so if you want to support below that OS, you're best off putting the file in both locations. See this answer for details.
It's also important that the file is served with the correct MIME-type, for Universal Links it can be served as application/json, and there's no need to sign/encrypt it. Getting it served with the correct MIME-type can be a little annoying if you're not familiar with configuration on your web server, as typically servers will determine the MIME-type from the file extension. You can't give it an extension, as iOS won't check the url with an extension and (IIRC) redirects are not allowed so you can't fake it by doing that either.
So that's a summary of what you're trying to accomplish, but how you do that depends on the web server you're using. For an ASP app that's likely to be IIS, in which case this question and its answers may help you configure your web server correctly. The details of how you upload a file to the root of that server will very much depend on how you've configured it as well.
There is no extension for this apple-app-site-association file. This is just a plain file. You have to host it on the top level of your domain meaning the file location will be https://www.abcd.com/apple-app-site-association Once you host it you can check/validate by using this link https://branch.io/resources/aasa-validator/
For detailed info please refer: https://blog.branch.io/how-to-setup-universal-links-to-deep-link-on-apple-ios-9/
This worked for me.
Created an empty .NET Core project and deployed it to the corresponding Azure web app service.
Using, Advanced tools in Azure portal, nvaigated to the Kudu files of the deployed app service.
Inside the folder "site/wwwroot/wwwroot" created a new folder named ".well-known".
Inside the newly created folder, created a new file named "apple-app-site-association.json".
Edited the newly created json file to hold the app details.
Modifed the file "site/wwwroot/web.config" for the following reasons:
a) Since iOS always calls the URLs without file extension mentioned (https://webapp-sftpint-employeeapp-dev.azurewebsites.net/apple-app-site-association)
we need to forcefully reqrite such URLs to have the file extension. Hence, added the rule in web.config
b) Since the response header should have "application/json" for the content returned from the static file "apple-app-site-association.json",
we added the explicit mentioning of the mimeType as "application/json".
So, the web.config file looks somewhat like this. (only the 'rewrite' and 'staticContent' blocks needs to be added additionally)
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<location path="." inheritInChildApplications="false">
<system.webServer>
<handlers>
<add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
</handlers>
<aspNetCore processPath="dotnet" arguments=".\yourproject.dll" stdoutLogEnabled="false" stdoutLogFile=\\?\%home%\LogFiles\stdout hostingModel="inprocess" />
<rewrite>
<rules>`enter code here`
<rule name="apple_json_file">
<match url="^apple-app-site-association" />
<action type="Rewrite" url=".well-known/apple-app-site-association.json" />
</rule>
</rules>
</rewrite>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
</location>
</configuration>

How to remove error about glyphicons-halflings-regular.woff2 not found

ASP.NET MVC4 Bootstrap 3 application is running from Microsoft Visual Studio Express 2013 for Web IDE.
Chrome console shows always error
http://localhost:52216/admin/fonts/glyphicons-halflings-regular.woff2
Failed to load resource: the server responded with a status of 404 (Not Found)
This file exists in the fonts directory in the Solution Explorer. Build action is set to "Content" and Copy to Output directory is "Do not copy like in other font files".
Bootstrap 3 is added to the solution using NuGet.
How to fix this so that this error does not occur?
Application shows Glyphicon and FontAwesome icons properly. This error always occurs at application startup.
This problem happens because IIS does not know about woff and
woff2 file mime types.
Solution 1:
Add these lines in your web.config project:
<system.webServer>
...
</modules>
<staticContent>
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />
</staticContent>
Solution 2:
On IIS project page:
Step 1: Go to your project IIS home page and double click on MIME Types button:
Step 2: Click on Add button from Actions menu:
Step 3: In the middle of the screen appears a window and in this window you need to add the two lines from solution 1:
In my case, I've just downloaded the missing file directly from here: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2
Add this one to your html if you only have access to the html:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
For me, the problem was twofold: First, the version of IIS I was dealing with didn't know about the .woff2 MIME type, only about .woff. I fixed that using IIS Manager at the server level, not at the web app level, so the setting wouldn't get overridden with each new app deployment. (Under IIS Manager, I went to MIME types, and added the missing .woff2, then updated .woff.)
Second, and more importantly, I was bundling bootstrap.css along with some other files as "~/bundles/css/site". Meanwhile, my font files were in "~/fonts". bootstrap.css looks for the glyphicon fonts in "../fonts", which translated to "~/bundles/fonts" -- wrong path.
In other words, my bundle path was one directory too deep. I renamed it to "~/bundles/siteCss", and updated all the references to it that I found in my project. Now bootstrap looked in "~/fonts" for the glyphicon files, which worked. Problem solved.
Before I fixed the second problem above, none of the glyphicon font files were loading. The symptom was that all instances of glyphicon glyphs in the project just showed an empty box. However, this symptom only occurred in the deployed versions of the web app, not on my dev machine. I'm still not sure why that was the case.
I tried all the suggestions above, but my actual issue was that my application was looking for the /font folder and its contents (.woff etc) in app/fonts, but my /fonts folder was on the same level as /app. I moved /fonts under /app, and it works fine now. I hope this helps someone else roaming the web for an answer.
This problem happens because IIS does not find the actual location of woff2 file mime types. Set URL of font-face properly, also keep font-family as glyphicons-halflings-regular in your CSS file as shown below.
#font-face {
font-family: 'glyphicons-halflings-regular';
src: url('../../../fonts/glyphicons-halflings-regular.woff2') format('woff2');}

comment code in MVC5 web.config in debug mode

When I deployed my app I had to add following code to my web.config file because otherwise the server won't display my .svg file
<system.webServer>
<staticContent>
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
<system.webServer>
However, if I leave that bit of code in the file while I develop on my machine, it leads to weird errors (e.g., my machine doesn't load my .css file anymore). All works fine if I comment that out again while working locally.
But exactly that is a hastle, commenting/uncommenting that code always when developing resp. deploying.
So my two questions:
1) Is there a way to include code conditionally in the web.config, e.g., depending on if degug or release build, or if deploying?
2) Why is that code causing trouble on my local machine in the first place?
UPDATE: So Q1 is answered, but still looking for an answer to Q2! Can't accept an answer before that ...
In your web.config File you have an arrow that points to two other Files called Web.Release.config and Web.Debug.config there you can make such changes. There you can modify your web.config based on your Run Mode.
There is a very good Microsoft Article about it im pretty sure it will help you
https://msdn.microsoft.com/en-US/library/dd465326(VS.100).aspx

Fonts files are not being included when publishing MVC application VS2013

I have integrated (Twitter)Bootstrap to my ASP.NET MVC (4) application.
In my source code I have the following fonts files:
When I publish my application only the .svg file are being included in this fonts folder.
I have also this img folder being part of bootstrap:
All images files are being included when I publish my application.
So, how can I get VS2013 to copy those fonts files when publishing the application?
A temporary solution,
Select your font files and Change Build action as Content from Properties Window. This fixes it in the immediate, but leaves you open to missing files in the future.
To permanently fix this issue this may help,
You can fix this permanently by modifying the default Build Action for font file extensions (.eot, .ttf, etc)
Visual-Studio-default-build-action-for-non-default-file-types
In my case I was deploying to azure and below modification in the web.config fixed my problem.
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
<mimeMap fileExtension="woff2" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
Refer this link
I noticed that the "Precompile during publishing" checkbox in the "File Publish Options" in VS2017 prevented a *.lic file from being included in the deployment despite it being configured as "Content". A *.txt file did not have this problem, so I assume this has something to do with "unknown" file extensions.
I'm not sure if this is specific to VS2017 or other versions also have this weird issue.
Anyway thought I'd share this because it is very counter-intuitive, seems totally unrelated to that checkbox and might help somebody having similar issues.

Umbraco - http 500 Server Errors for .css and .js files

What happened to our Umbraco instance? It looks like this when I'm logged in, and when I check the browser console I see lots of 500 Internal Server Errors for both the backoffice and the front-end website, with failures for .css and .js files.
I've tried recycling, stopping and starting the app pool, and restarting IIS. I've tried updating the clientDependency version number in clientDependency.config, that didn't work.
I double-checked and I'd added a mime-type via the web.config (in the section), and I'd also added it as a mime type via IIS. This breaks loading of static content, so I defined the mime-type in the web.config only and removed it from IIS, and this fixed the issue.
I tries to load a gif-file and just like ProNotion says:
I found this line in web.config without any remove element:
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
Add change to
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
That fixed the issue for me.
It's likely a permissions problem. I'd suggest that you first need to try and find some detail on the 500 error. Can you inspect it for further detail?
If that doesn't help disable the ClientDependency framework by setting debug="true" on the compilation node of youur web.config file. It's located under the system.web node and looks like this:
<compilation defaultLanguage="c#" debug="true" batch="false" targetFramework="4.0">
If you still have issues after that you can at least browse directly to those resources to view details of the error.
Simon

Resources