Including javascript files from other projects inside the same solution - javascript

I have a project called WebResources where I have all the JS files that I intend to use in 2 other projects (all three projects sit in the same solution).
I just spent 2 hours playing around with the file paths and VS just doesn't see the JS file (unless I specify the full path with the drive letter).
Is there a trick to including javascript files relatively from other projects?
My file structure is something like:
Project1
Default.aspx
Project2
WebResourcesProject
/js
testToInclude.js
No matter how I try to include testToInclude.js inside Default.aspx, VS doesn't see it.
Any ideas?

To include relatively a file like as an image, css or js, they should be placed in the same server.
Let's say your server root is http://localhost:8080/ , and you map each project to separate folders such as http://localhost:8080/WebResourcesProject/ and http://localhost:8080/Project1/ then you could include the js like this (from the default.aspx file):
<script type="text/javascript" src="../WebResourcesProject/js/testToInclude.js" />
You can easily try that if you deploy your projects into your local IIS. If you're using the development webserver that visual studio give us, it seems to be not that easy. If there is not any real need of having the projects separately or referencing files relatively, I would consider either merging them or making absolute references.

Related

Linked javascript file in Visual Studio 2015 not being included in build/deploy

I have a bunch of Javascript files in a centralized project in my solution that I would like to share amongst other projects. However, when building and testing a project with such a linked file, it is 404 when I try to access it in testing my solution.
The script is linked to from the standard Scripts directory in my project - nothing unusual in it's placement. It doesn't get loaded in my view (#Scripts.Render("~/Scripts/Models/InteractionDetails.js")), though the script tag for it does appear in the source and all the other JS files get loaded including a test non-linked js file in the same subdirectory.
How might I get the dratted thing to be properly deployed to the server on build?
This is not a duplicate, as I am using the method outlined to include the files in my project from another project. The issue is that they are not being used when I build the project (eg, I cannot path to the JS files directly on the server, and they are not included in pages referencing them).

Is there a way to link an external library from outside the project directory?

I have a jquery library in my project but need to put it in linux /usr/share/js directory and not inside of my project directory.
Is there a way to do a linking in the index.html?
Including in the index.html:
<script src="/usr/share/js/jquery.min.js"></script>
doesn't help, as it looks into my working dir and I don't have a 'usr' dir
/usr/share is in the root directory and not in my working one. I don't use any php or the stuff, is there a simple way to solve this?
You need to back out of the file you are currently in by using the ../ command which goes back one directory. Depending on how many files deep the index.html file is in your project, you may need more then one like so:
<script src="../../../../usr/share/js/jquery.min.js"></script>
This will direct you 4 files out of where your index.html file is located, you may need more or less depending just do some searching through your directories and adjust accordingly.
You can create symlinks for files like this, to allow access to serve from not your document root.
The web server is also needs to be configured to follow symlinks when serving.
More info for Apache:
http://httpd.apache.org/docs/2.4/urlmapping.html

How would I refer to a javascript file in a c# library project from an ASP.NET MVC project?

normally I would go
<script src="~/Scripts/Controls/SomeScript.js"></script>
and this finds SomeScript.js in the "Scripts/Controls" folder of the same project that the ASP.NET .cshtml page is in.
The time has come however to share the javascript file between two projects. I need to move it to a library project.
What would the value of the src attribute have to be to locate the javascript file in a completely different project in the same solution? Do I have to do something else? How is this problem usually solved?
I have tried "Copy to output directory" on the "SomeScript.js" properties page and this copies the script and its containing folder to the 'bin' directory. However chrome reports "Not allowed to load local resource" when trying to access .js files in the bin folder.
The folder which your scripts exist must be within the project tree, especially if you are planning on publishing the app to a remote server. Visual Studio provides an option to Add Existing Items as a link, which would allow you to symlink items stored outside your project tree into a folder within your project tree. Any changes to the original file will be reflected in your project; however if the file is deleted, the link will remain, broken.
You must also add the following to the end of the project .csproj file before the Project close tag.
<Target Name="CopyLinkedContentFiles" BeforeTargets="Build">
<Copy SourceFiles="%(Content.Identity)" DestinationFiles="%(Content.Link)" SkipUnchangedFiles="true" OverwriteReadOnlyFiles="true" Condition="'%(Content.Link)' != ''" />
</Target>
This edit to the .csproj file will cause visual studio to actually copy the linked file to the location of the link at the end of the build.
In this way, you can still reference ~/Scripts/Controls/SomeScript.js in your project.
use this reference to resolve your issue: Server.MapPath("."), Server.MapPath("~"), Server.MapPath(#"\"), Server.MapPath("/"). What is the difference?
seems that the best way would be to use / at the beginning - that is the root directory.. you can manage your way down from there

Integrating Chessboard.js in meteor project

I am using meteor, which I am new to, for my current project and want to replace the current chessboard I made with that from chessboardjs.com and was hoping some one may have experience with this. I downloaded the files from the website, put the css files in a css directory I created and the images in my public/image directory but was wondering where to place the .js files. I am not used to working with multiple files in meteor. I am creating a client and server directory. Should I just place the .js files in the client directory? Also, on the site it says to get started add
to the javascript
var board1 = new ChessBoard('board1', 'start');
and to the html
Could some one suggest a way to use meteor templates to put this in the .js files? I am a bit confused.
You should place external client libraries somewhere in /client folder. Usually it's either /client/lib to ensure they're loaded before the rest of your code, or /client/compatibility to ensure they work even if they aren't designed to work with Meteor, or /client/lib/compatibility for both.

Deployment Strategy for Require JS Optimized/Concatenated Website Files

My question is partly technical and partly about deployment strategies and workflow. I built a project using Require JS. It includes a number of distinct js modules, and is built upon Kirby CMS. The directory structure of the project is something like this:
project
assets
styles
style.css
js
scripts
script1.js
script2.js
script3.js
vendor
app.js
images
fonts
content
...
kirby folders
....
The file app.js is called in the footer of my site's page like so:
<script data-main="/assets/js/app" src="/assets/js/vendor/require.js"></script>
It configures RequireJS by calling the requirejs.config() function and then calls the main script file that loads everything else using RequireJS's requirejs() function.
I've used RequireJS' s optimization tool to compile the project in such a way that the optimized files are all dumpted into a directory called dist (a name I just picked up from this tutorial). So in the end dist contains a replication of every directory and file under assets, only optimized, and the file app.js is a concatenated and optimized version of all the js modules that I have in the project. So far so good.
What I am unsure about, however, is how I'm the supposed to make use of this new secondary version of all the code. What for instance if I want to deploy a version of the site to the production server without all the source js files? Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist. I deploy using git and beanstalk. One way to do this would be to manage different branches for staging, production, and development, in which the production and perhaps staging branches have references to the files under dist, but this seems awkward.
So my question is given this kind of optimization set up, which if you look at the tutorial linked above is one way to do this, how then do you manage the switch to the optmized version of everything seemlessly, without having to go back into your code and change everything up? Is there some key part of the process that I'm missing here?
Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist.
I've looked at the tutorial you've linked to and do not see how it is true for the tutorial. The tutorial does not use absolute paths, so should be deployable from dist just as well as from the directory that contains the pre-optimization sources. If you cannot do this for your application, that's because you've done something different from the tutorial. Your script tag, for instance, shows absolute paths.
So the solution is to design your application to avoid absolute paths. This way, you won't have to change paths when you deploy from dist. I'm using this very method to deploy optimized and non-optimized versions of one of my apps.

Categories