43

We're beginning work on a couple of fully JavaScript-dependent web apps (our previous apps have been ASP.NET MVC, with JavaScript 'goodness' sprinkled over-the-top).

We have a few files that will be shared across the board, and it would be nice to store these files in a Common project, and 'Add As Link' them into individual projects (as would be possible with compiled code).

Obviously this doesn't work with something like JavaScript as the file isn't actually 'there' in the correct location.

Does anyone have any suggestions on keeping a single version of a shared JavaScript file, for use across multiple projects?

1
  • great question, I've been thinking about this for quite some time. The only solutions that have popped up in my mind are hosting the files on the web and using them like a cdn or using symlinks. You could add a code snippet into your visual studio to reference them.
    – Blowsie
    May 24, 2011 at 8:16

9 Answers 9

49

I know this issue is ancient, but still wanted to put forward my solution because it is a bit simpler than beardtwizzle's.

You can ensure that Visual Studio copies all linked files to where you placed the link in Visual Studio's Solution Explorer by adding this at the end of your .csproj file:

  <Target Name="CopyLinkedContentFiles" BeforeTargets="Build">
    <Copy SourceFiles="%(Content.Identity)" 
          DestinationFiles="%(Content.Link)" 
          SkipUnchangedFiles='true' 
          OverwriteReadOnlyFiles='true' 
          Condition="'%(Content.Link)' != ''" />
  </Target>

I've described how this works in my blog post at http://mattperdeck.com/post/Copying-linked-content-files-at-each-build-using-MSBuild.aspx

6
  • Thanks! I like this better than the xcopy PostBuildEvent because I have subdirectories in my assets to copy, and dont want all the shared assets in all projects. This takes care of them all!
    – Cody
    May 10, 2013 at 20:59
  • I Love this one! Unfortunately one small disadvantage is that you need to (re)build before intellisense for these referenced .js files is updated. But best solution so far.
    – Bigjim
    Apr 23, 2014 at 13:12
  • @Bigjim Despite the intellisense not working, do you have to build in order to get the latest changes to the shared files, or can I modify linked JavaScript files, and see the latest changes while debugging?
    – crush
    Jun 25, 2015 at 14:56
  • I worked on this for about an hour before I saw this. Then I disregarded it a potentially too invasive, then worked on it for about 5 more hours until I finally implemented this and it was SO EASY!! Works like a charm. Oct 4, 2015 at 0:56
  • so it copies the js files physically into the project?
    – DasDas
    Jan 11, 2016 at 9:06
20

In the end, this is how I've achieved it. It may not be to everyone's taste - but worked a treat for me.

Note: In all of our projects, static resources are in a root directory called 'Assets', so for example JavaScript is always in /Assets/js/ and CSS /Assets/css/.

Solution

  1. In the project that is going to 'import' the common code, I simply add the common .js file 'As Link' within /Assets/js/.
  2. Go to that new addition's Properties and set 'Copy to Output Directory' to 'Copy if newer'.
  3. Now I simply edit the project's post-build event command line to the following: xcopy /Y /E "$(TargetDir)\Assets" "$(ProjectDir)\Assets"

When the project builds, it copies the imported files to \bin\Assets\js - the post-build event then takes a copy of those over to the project directory - in time for the site to use them.

3
  • 5
    you might add the /D paramter to only copy changed files: xcopy /Y /E /D "$(TargetDir)\Assets" "$(ProjectDir)\Assets"
    – Cohen
    Sep 20, 2011 at 10:02
  • 2
    Taking a cue from the most popular answer in this question: stackoverflow.com/questions/3018289/… I modified the command line to the following: echo f | xcopy /Y /E "$(TargetDir)Content" "$(ProjectDir)Content", which prevented the "exited with code X" errors from occurring in my scenario.
    – robyaw
    Jan 24, 2013 at 14:40
  • By enabling 'Copy to Output Directory' the bin folder will polluted with .js files where they don't belong. I understand you use it as a temp folder before copying them to \Assets. They will be included in the deploy but won't be used.
    – Bigjim
    Apr 23, 2014 at 12:47
1

The correct solution is embedding javascript/css files in your project. You can do this by using WebResources.axd. This is the official way microsoft embeds js in its controls. (Like validation controls)

You can find a good tutorial on: https://web.archive.org/web/20211020131200/https://www.4guysfromrolla.com/articles/080906-1.aspx

2
  • 3
    Whilst this is an interesting solution, its not good that you need query strings in your script src attributes (this can cause some proxies to fail caching). More importantly I couldnt merge the common resources with the local project files into a single, compressesd JS file
    – isNaN1247
    May 24, 2011 at 19:07
  • Development is rarely one size fits all enough to say "The correct solution"
    – sclarson
    Sep 2, 2014 at 18:34
1

I can also see this question is ancient, but thought I would add my two cents...

I have a javascript file in a separate project. I added a linked reference and this works well for publishing, but doesn't work in IIS Express or Casinni. I tried adding custom routing to catch the missing file and manually remap it, but it is bit of a hack and for some reason stopped working when I upgraded to MVC 5.1, so rather than fix the hack, I found a better way:

System.Web.Optimization has javascript bundles.

In your shared project, set the Copy To Output Directory to 'Copy Always' and Build Action to 'Content' on your js file. This means your js files end up in the bin folder of your website project. They cannot be served from there (IIS wont serve anything in the bin folder for obvious security reasons), but they can be included in bundles

using System.Web;
using System.Web.Optimization;

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {   
        bundles.Add(new ScriptBundle("~/bundles/externalLibrary").Include(
                    "~/bin/scripts/externalLibrary.js"
                    ));
    }
}

You then need to add this to Application_Start in your global.asax file (right next to register routes)

BundleConfig.RegisterBundles(System.Web.Optimization.BundleTable.Bundles);

then use your bundle link this in your razor cshtml:

<script type='text/javascript' src='@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/externalLibrary")'></script>

you will need the nuget package for microsoft.aspnet.web.optimization

1
  • 1
    I like this idea but it doesn't work when bundling is turned off (<compilation debug="true"> without BundleTable.EnableOptimizations set), as it still tries to serve them from the bin directory.
    – Tyler
    Oct 1, 2014 at 16:17
1

Anyone that stumbles across this question here in the future should know that there are now Shared Projects in Visual Studio to solve this problem. Universal Windows projects use them by default and you can create your own by downloading and installing the VS extension here: https://visualstudiogallery.msdn.microsoft.com/315c13a7-2787-4f57-bdf7-adae6ed54450

Once you download the extension you can add a Shared Project (Empty) to your solution. The project can be found in the project templates for Visual C#, Visual C++, and JavaScript.

Then include the files you want to share to the shared project in any folder structure that makes sense for you.

Next you will include the shared project as a shared reference in the other projects in that solution that need access to the shared files. Right-click the other project and choose "Add Shared Project Reference".

Now you can reference the shared files in your main project as if the files in the shared project existed there. They are compiled as part of that project.

The technology was intended for Universal apps to share code between Windows Phone and Windows Store apps so be warned that you may have trouble sharing in different scenarios but it is worth a try to see if it will fill your need.

1
  • Can you explain a bit more about how the technology works?
    – crush
    Jun 25, 2015 at 14:53
0

You could perhaps use visual studio templates

1
  • 1
    Thanks for the suggestion, however I think that would only take the 'common' code at creation-time. After that, any subsequent code changes would need to be made in each individual project.
    – isNaN1247
    May 24, 2011 at 8:16
0

great question, I've been thinking about this for quite some time. The only solutions that have popped up in my mind are hosting the files on the web and using them like a cdn or using symlinks. You could add a code snippet into your visual studio to reference them.

0

This blog post describes an alternative solution to the answer by @beardtwizzle:

http://consultingblogs.emc.com/jamesdawson/archive/2008/06/03/using-linked-files-with-web-application-projects.aspx

The idea is similar:

  1. Add the shared file to to web project as a link
  2. Modify the _CopyWebApplication build step in the project, so that the linked files are copied correct destination path.

So instead of a post build event the files are copied by a modified build step. For me this solution feels a little bit cleaner (but this may well be a matter of taste). Anyway I just added this to our solution and it works great so far!

-4

Use proper version control.

Keep the js in one location and then just git pull (or the equivelant Mercurial / Bazaar) them back into your code whenever you've updated your javascript.

4
  • We use TFS 2010, and i can't seem to find similar functionality for pulling single files across projects
    – isNaN1247
    May 24, 2011 at 19:03
  • @beardtwizzle I'm suggesting you keep your js in one project or VC location and just check it out into your existing code. Or cheat and host your js in a git server ;)
    – Raynos
    May 24, 2011 at 19:12
  • I am not sure how this would solve this? Would you configure them as git-submodules (similar to svn:externals)?
    – Cohen
    Sep 20, 2011 at 9:59
  • @Cohen personally I would use a package manager for javascript. And set them up as modules/packages. then just do package_manager update or whatever.
    – Raynos
    Sep 20, 2011 at 11:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.