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.
Related
We have IT Hit WebDAV Server and IT Hit WebDAV Ajax Library running in a Windows development environment. All is working well except when a user tries to run the protocol installer from the webpage popup message. The popup says “Select OK to download the protocol installer”. When I click okay, it opens a new tab with a 404 error. I can see in the URL that it is looking in the correct folder, and the msi file IS in that folder.
I tried it in 3 different browsers with the same results. I also tried running the WebDavServer wizard project and get the same results. The only way I’ve found to get it to run from a browser is through the AjaxFileBrowser app. In there, the popup message is different and it works when you click the link for the Windows version.
Do you have any ideas for why it’s not running from the browser?
Here are some suggestions:
The MIME-map is not configured. By default IIS has a mapping for .msi and .gz extensions, but maybe it is deleted from IIS for some reason. Here is how to set MIME mapping in web.config:
<staticContent>
<mimeMap fileExtension=".pkg" mimeType="application/octet-stream" />
<mimeMap fileExtension=".deb" mimeType="application/octet-stream" />
<mimeMap fileExtension=".msi" mimeType="application/octet-stream" />
<mimeMap fileExtension=".gz" mimeType="application/x-gzip" />
</staticContent>
Your WebDAV Ajax Library files are located under the WebDAV path. Your server engine is processing all requests in your code so they do not reach the file system. Just move your static files to some other folder, outside of WebDAV. In case of IT Hit WebDAV samples, the static files are typically located in /AjaxFileBrowser/ folder.
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');}
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
I've been developing a MVC5 web application for several months. I've published to each of 3 servers used for development, testing and the intended public server. Everything has been tested by a team of a dozen beta testers and a decision was made to go live with the web app this weekend.
Prior to publishing the web app to the live (public) host I modified the web.config to disable debug mode for the public site. After publishing, all kinds of problems cropped up related to missing CSS and JS resources.
After reading a lot of articles regarding Bundles and 404 errors, I found one that hinted to add the following to Web.config:
<modules runAllManagedModulesForAllRequests="true">
<remove name="BundleModule" />
<add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>
This resolved the 404 issues for the StyleBundle and ScriptBundle configurations, but now I have 404 errors for images that previously worked fine. I'm not sure of the best way to resolve these. I don't want to relocate the images and I don't want to edit the CSS since these are distribution files (jQueryUI, ThemeRoller, DataTables, etc). I want to leave their distribution folder structure and original source files (CSS and JS) unmodified.
An example of the problem.
DataTables distribution is in my ~/Scripts folder:
/Scripts/DataTables-1.10.2/
/Scripts/DataTables-1.10.2/media/css
/Scripts/DataTables-1.10.2/media/images
/Scripts/DataTables-1.10.2/media/js
Bundles configuration:
bundles.Add(new ScriptBundle("~/bundles/DataTables").Include(
"~/Scripts/DataTables-1.10.2/media/js/jquery.dataTables.js"));
bundles.Add(new StyleBundle("~/bundles/DataTables.css").Include(
"~/Scripts/DataTables-1.10.2/media/css/jquery.dataTables.css"));
jquery.dataTables.css contains references to ../images/someimage.png and with Web.config debug mode enabled this works flawlessly. Now that debug mode has been disabled and Bundles are minifying/combining, I am getting 404 errors:
http://example.com/GenericError.htm?aspxerrorpath=/images/someimage.png"
It seems as though the image URL is now assumed to be relative to /Bundles/ - though I'm not positive.
There must be an additional configuration I'm missing. Can someone point me in the right direction?
EDIT
Raphael's comments on this question and his URL to another similar SO question did not help to resolve this problem. Sean's recommendation of BundleTransformer seems like it might work but I don't find any documentation on how to install this package.
See my answer at:
CSS/JS bundle in single file in mvc when publish with release option
It deals with this exact issue and the options you have to resolve it.
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)