Is it possible to share stylesheets and javascript files between projects in the same visual studio solution. I want to create sort of a base for all my commonly used scripts and stylesheets. So that i can only reference them.
You will have to host those files on a web server in order to access them. Just putting them inside a class library that is part of the solution won't make them available to the web project. You could create a CDN in your own network where you will host common static files (js, css, images, ...) that can be reused between multiple web applications.
In order to reference them in your project you need to use their absolute url:
<script type="text/javascript" src="http://cdn.mycompany.com/js/foo.js"></script>
Related
I want to know if installing jquery/bootstrap/font-awesome can be done automatically, instead of installing it via npm and then manually dragging the code to my css/js/fonts folder?
Is there no program that can update and automatically drag them to the correct folder?
I know people are saying that you can just manually drag the javascript file to the correct location, but bootstrap for example consists of more than a single javascript file. It includes font and css files.
If I were to include them in this manner:
\web
-\css
--\app
---\main.css
--\font-awesome
---\font-awesome.min.css
-\fonts
etc.
Then it wouldn't work, because font-awesome expects it's fonts to be one folder aside.
JQuery, Bootstrap and Fontawesome are not softwares or applications that you install in a webpage. They are just CSS and Javascript files. So these are like any other javascript or CSS file you may have written from scratch for your webpage. Except that they are well maintained, highly optimized and made for a particular application. (Like Bootstrap primary purpose is to provide a framework for making webpages responsive.)
To include them to a webpage all you have to do is tell the HTML file to use those files. And this is done by linking them to the HTML using the <script> tag and its src* attribute. (*W3schools link. Hehe).
Now in src attribute you may provide a URL to a location on the web containing the file or you may provide a relative local path to a location in your server or local machine containing the file. Yes, you can manually drag the files into your css/js folder and just include the files using that path. No Im not aware of any softwares to automate the process. But you need only place the file in one location for an entire webpage and its sub pages to access it. So its not a very intensive process.
As for why CDN's host such files for public access, an insight is given here : How cloudfare provides free service. And security, well, they are pretty darn secure, it is literally their job to provide secure access to the files they host. And why people use CDN in the first place is because this (in short performance).
Update:
As for how to include files in your HTML, it goes like this (Bootstrap example) :
<link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
You need to provide the path to the required CSS and JS files. In the case of Bootstrap these two are the only ones you need to include to get full functionality of the library.
I think it is not a good idea to use local files instead of CDNs until you are not working offline.
Here you can read about CDNs vs Local Files:
https://halfelf.org/2015/cdn-vs-local/
Multiple files on CDN vs. one file locally
https://www.sitepoint.com/7-reasons-to-use-a-cdn/
Although there is one another link that is just opposite:
7 Reasons NOT to use a Content Delivery Network
Nevertheless if you want to use the files locally you can follow the instructions below:
Move at the cdn link in your project
Copy the link from src or href and open it in your browser.
Save the file locally and give the reference of the file in your project.
Is there any way to exclude unused javascript and css code and load only the required code for a particular web page?
Lets take an example, In web development, for any web page, there are so many javascripts and css files get included. though the page requires only 20% of the code. Is there some tool which finds dependencies and create a bundle for required code (say 20%) only.
Platform:
Web server: Apache, nginx
Scripting language: php
For controlling excess JS files take a look at RequireJS as for CSS I'm afraid you will probably need to rely on discipline.
Take a look at $import.js utility that allows dynamically control JS and CSS files as well. Less files also supports but requires additional compiling logic.
I am working on project with larger javascript files.I can add these javascripts in one of the two ways.
1) create a separate class library project and have the javascript files there as embedded resource.Include a reference of the dll into the web project and then include those using scriptmanager as webresource.
2)Have these files in a separate folder and then simply add these files using the script tag and there path.
I am not going to paste the javascripts in my page within the script tag cause they would mess my pages mark up.
So I would like to know which one is better of the above 2 ways.In either of the 2 ways everytime i load the web page i see GET request for the js files.If i create a javascript dll will the browser cache it?
You can't create "javaScript dll". JavaScript is a client-side stuff, dll is server-side. No matter in which project your javaScripts are, it will still be sent to the client and executed there. So it makes no sense to put JS files to another project (especially as resources)
We usually want to minify and bundle the JS files, so the client will do less requests to the server and also to reduce the amount of data to transfer.
For minifying the JS files I would recommend to use Web Essentials extension to VS. It is very handy and can make web programming easier.
Minification will remove all unnecessary characters from the JS file and it will also reduce the length of the identifiers (like method names and variable names).
You can learn about bundling here. It is useful when there are more JS files to load to load all of them at once.
I am setting up a new site using angular, mvc and web api. The static content (js, css, images, etc) will be in Site A, the MVC site will be in Site B and the api will be in Site C. These are all separate sites, not virtual directories. I'm trying to use bundling in the MVC site to bundle the js and css files from the static site for use in the MVC site.
I've set up a Virtual Path Provider but when I load the site angular doesn't work and also doesn't throw any errors. I'm assuming that the angular.js file is not being loaded from the bundle because if I include a local javascript file angular works.
Is what I want to do possible? If so, how?
Virtual Path Providers only apply to views, not things like CSS and JS. Unfortunately, there's not really a good way to handle this scenario. The bundler can only act on files within the same project, not those in a separate project. If you want a separate site to handle your static assets, then you pretty much just have to resort to referencing them directly. You can use the Web.config's app settings section to set the base URL for your static site (that way you have just one place to go if you need to change it later and you can do things like run transforms on it to have a different value in production). This also means you're somewhat on your own for bundling and minification. However, you can make your static site an MVC site as well just to get the bundling infrastructure and then use that site to handle bundling. All your bundles should be at the standard location of /Content/[style bundle name].css or /bundles/[script bundle name].js. There's a cache busting string added to the path, but you can somewhat handle that manually.
I am building two ASP.NET MVC sites. There is a certain amount of content I wish to be able to share between the two sites. I created a class library and was able to share a large portion of what I needed too. However I would really like to know how I could share contents such as images and JavaScript files, so I do not have to duplicate them between both web sites.
I would be very grateful if anyone has any good ideas on this.
You could use a CDN (content delivery network) for shared files.
<script src="http://shared.yourdomain/stuff.js" type="text/javascript"></script>
It's the same trick that SO employs, it's good for load time too as the browser will only open 2 connections per domain. Using a CDN means that you can add another 2 connections per CDN used. That can include sub domains on your own site. So you could have js.yourdomain and img.yourdomain and they're all counted as different.
If you have a common assembly you may consider embedding your content as web resources. More info about web resources can be found here.
For javascript you can directly give url as src of JavaScript.
e.g.
<script src="some_url_path_/global.js" type="text/javascript"></script>
To share a class I recommend to use web services rather to allow access to class file source.
Javascript files and images can be hosted in a common location - for standard javascript files (jquery library etc.) it's a good idea to use a CDN as Kieron points out - you get a lot of benefits there.
For other content files you can just put them on a common url that is accessed by both sites - e.g. with 2 sites on different urls:
http://site1.somedomain.com/default.aspx
http://site2.somedomain.com/default.aspx
they can both use content from a common location like:
http://commoncontent.somedomain.com/images/bigimage1.jpg
http://commoncontent.somedomain.com/scripts/customjavascript1.js
The same thing works with virtual directories instead of a fqdn too of course.