I have an ASP.NET MVC 5 project with a bunch of TypeScript files. I use Gulp to minify and bundle them, but I also upload the generated JavaScript files to some environments to make it easier to debug.
I publish to Azure from Visual Studio 2017 using Project > Publish, using the App Service publish target.
For some reason, the generated JavaScript files from newly added TypeScript files are not being uploaded (the generated JavaScript from older TypeScript files continues to be uploaded just fine).
These JavaScript files are not actually included in my project (they're just sitting in the folder, next to their TypeScript parents, where they are generated).
I don't see anywhere within the project file where I'm actually specifying that they should be uploaded. However, if I delete one of the older files from the server using Cloud Explorer and republish, the older JavaScript files are published again, while my new ones are ignored.
What on earth could be causing this?
According to your description, you want to allow your JS files in specify folder would be uploaded to Azure web app, to achieve this, we need to set our .csproj file.
For example, we can do as below that upload all files in "Resource" folder to azure web app when we publish our project:
<Content Include="Resource\*">
<CopyToPublishDirectory>always</CopyToPublishDirectory>
</Content>
I just had this issue and I fixed it by:
Closed Visual Studio project
Removed all but the latest folder in this location:
C:\Program Files (x86)\Microsoft SDKs\TypeScript
Reopened Visual Studio project
In the directory that contained the TypeScript file that would not publish, I added a brand new TypeScript file called Foo.ts with dummy content.
(It prompted me to update my Typescript Plugin to the current version, which I accepted)
I verified that Foo.ts compiled to javascript when the project built.
At that point, publishing my project would now deploy all generated JavaScript files, so I deleted the dummy Foo.ts since it was no longer needed.
I hope this helps someone solve this.
Related
We have a single-page web app project setup in Visual Studio CE 2019 that is developed in TypeScript using React and LESS, and have been using the Publish feature of Visual Studio to publish to a folder that we then copy to our deployment site. We have a batch script that will re-build the project, perform the publishing, and then copies to published files to the deployment site, so everything is automatable from the command prompt.
Now, the project doesn't currently use any bundling or minification, but we're looking to add this.
The question is: how do you set this up nicely in Visual Studio CE 2019 (we're not using VS Code)?
Our index.html page contains this line for the main start point of the app (app.ts is the main file):
<script src="scripts/require.js" data-main="scripts/app"></script>
We already tried a few things:
In the Project Settings under the TypeScript Build tab, you can set "Combine JavaScript output into file" to for example "scripts/app.js" and you end up with a single app.js file containing all your transpiled TypeScript code. When I run the app from Visual Studio, the app appears to work.
However, if I then do Build --> Publish to publish the site (which also copies all other relevant files, like 3rd party .js files, image assets, static files, favicon, etc...), then all .ts files still get transpiled to indiviual .js files which still get published to the output folder, so that's no good...
We also added the "Bundler & Minifier" extension by Mads Kristensen so we can get minification as well. So I added app.js as the single file to minify, and when we now build the project, we get 1 app.js file (bundled transpiled TypeScript code) and 1 app.min.js file (minified version of app.js).
I then adjusted the last line in our index.html page to <script src="scripts/require.js" data-main="scripts/app.min"></script> to use the minified version app.min.js, but now the app doesn't seem to load nor run any longer...
The bundleconfig.json file currently contains this:
[
{
"outputFileName": "scripts/app.min.js",
"inputFiles": [
"scripts/app.js"
]
}
]
Has anyone managed to setup bundling & minification in Visual Studio CE 2019? Preferably in a way that the Publish functionality also works as expected?
Any help appreciated!
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).
tl;dr: I want to include some JavaScript files from another project in another directory into a Cordova project, without (manually) copying those files into my Cordova project directory tree. How?
I am editing an existing Cordova project that makes use of some JavaScript source files originally written for a large web application project.
Currently, I am adding these source files by copying them to a subdirectory of the Cordova project, and by adding a <script> tag with the relative path to an index.html file in the Cordova project. This causes the JavaScript files to integrated in the deployed app, apparently by virtue of Cordova's (or Ionic's?) magic.
Now, it would be preferrable for me to avoid copying the JavaScript files to my Cordova project directory. Instead, I would like to directly link to the files in their original location rather than copying them (so updates from the web application get automatically applied to the Cordova project, as well).
As both the Cordova project and the large web application reside in the same VCS repository, the relative path to the files will always be the same - for the sake of an example, like this:
|-repository/
|-web/
| |-src/
| |-myCode.js
|-cordova
|-src
|-index.html
|-helpers
|-myCode.js // copy of /repository/web/src/myCode.js
Therefore, I have tried setting the relative path in the aforementioned index.html file - but unfortunately, Cordova seems to take over that file verbatim, and thus, the resulting URL will not exist (prompting a 404 error in the console, and causing the code from the file to be unavailable).
How can I have Cordova include and reference files from outside the directory hierarchy of a Cordova project?
Is there maybe at least a way to have Ionic or Cordova automatically copy the files into the Cordova project directory upon building the app?
I am working on quite an old asp.net 4.0 Webforms project in Visual Studio 2015.
I want to start using TypeScript instead of Javascript for some of the client side code. I have used TypeScript in other projects outside of Visual Studio (e.g. using Visual Studio Code, and the node tools such as npm, gulp etc)
Now, I am trying to see how to use the TypeScript in Visual Studio, and see quite a few conflicting posts, and various versions of TypeScript / VS referred to.
I have added a TypeScript file to VS, and VS reported it now supporting Typescript and added a few lines to the project file. A have also added the VS extension for Typescript (version 2)
I build my project and get the .js and .map files. The files are in CommonJS format so I need to either load these or convert using a some sort of bundling.
This is where I don't know where to go. Also, I have read conflicting reports on how to configure the Typescript (e.g whether or not Visual Studio will use a tsconfig.json file)
In non asp.net projects I have use gulp with the gulp-typescript browserify etc gulp plugins.
Do I do the same thing in my asp.net project, or is there some other way to bundle and convert the JS to browser usable code?
If I use the gulp method, I assume this then means I will now not be using the TS compiler installed via the Visual Studio plugin (so what is the point of this if it emits CommonJS formatted cod that I can't use in the browser?
Thanks in advance for any suggestions here!
Yes, Web forms can do TypeScript and Gulp. Below are some steps:
Configure npm
Configuring Bower
Configure Bootstrap and My CSS with Gulp
Update the Master page
Configure Gulp-Watch
A complete solution can be found here.
For TypeScript ,
Unless you have a .ts file created with "Add New Item" in your project, the option "TypeScriptCompile" on the "Build Action" of the file properties is not available and it raises an exception. After the first file is created, then you find this option and can manually set it to a .ts file.
The option "Typescript file" is not available in the "Add File" options unless you have a .ts file created with "Add New Item" in your project and you are in a "Scripts" folder (if you name differently the folder where you want to add this file, this option wont be available). Of course you can add a .ts file from "Add New Item".
Please read this SO thread Type Script Web Forms
I use Visual Studio 2013 and .NET 4.5 for an MVC project.
I've learning to use AngularJS via several videos on Pluralsight and one of them walks through the process of using Grunt to clean the output directory, then use ngmin to min-safe the Javascript files.
My process is using a gruntfile.js to clean and run ngmin against the javascript files in my solution, then put them in a directory called app_built. This is executed via a batch file in the pre-build for the project and then I include it via a ScriptBundle with IncludeDirectory pointing to the app_built directory. My intent is to use the Bundling features of .NET 4.5 to do the rest of the minification and concatenation of the Javascript after all the files have been min-safed via Grunt.
I specify the path to the min-safed files with the following:
bundles.Add(new ScriptBundle("~/bundles/minSafed")
.IncludeDirectory("~/app_built/", "*.js", true));
If I run this on my local machine, it runs fine without a hitch. The Javascript is minified and bundled as I'd expect and the resulting web application runs fine as well.
If I publish the website to a remote server, I get a server error that the "Directory does not exist. Parameter name: directoryVirtualPath". I assume this error is saying that it's unable to find the directory populated with my many *.js files. I also assume this is because they weren't published since they aren't part of the solution, even though the folder they reside in is a part of the solution (it's just empty within the solution explorer in Visual Studio).
If my assumption is correct, what can I do to add these files to my solution so they'll be published with the rest of my web application with minimal effort on my end each time?
And if I'm incorrect in the assumption, what I can I do to resolve this otherwise?
Thanks!
I never did find a great way of going about this. I found information at http://sedodream.com/2010/05/01/WebDeploymentToolMSDeployBuildPackageIncludingExtraFilesOrExcludingSpecificFiles.aspx that seems related, but I was unable to make it work.
Rather, since I knew the name of the outputted file, I simply created such an empty file in my project and referenced that where I needed to. I then had the pre-build task replace the contents of that file with the externally minified version and it would be packaged with the project as necessary, so it works well enough.