I'm developing simple websites in Visual Studio with external tools like angular cli or webpack.
It doesn't seem as if there is an appropriate project template for that. I don't need special things like the nodejs or asp .net project provides. I just want to be able to define my own actions, nothing else.
What I want:
Simple project structure showing files (just like normal but without listing npm packages)
Configurations such as Debug/Release
Run own scripts on build/rebuild/start etc. (depending on configurations)
I know that this could be accomplished using vs code. But vs2017 offers much functionality that I need.
Is there a way i can accomplish this in VS2017?
If not, would it be possible to write an own project template for that?
Related
I am currently struggling to find a basic project template for a simple angular app that I am building in VS 2017. This app will consist of only html/js/typescript files, npm's package.json file and a gulpfile. All templates I'm finding are for class libraries or include other aspects of server side based projects that I don't want or need in my project.
Is there a way to make a basic web project in VS 2017? I'd like to stick with Visual Studio since it is the IDE we use for our other projects.
All help is appreciated.
If you are going to work on Angular I will suggest you to use visual studio code. To create a basic structure of an angular app use angular-cli.
First you need to install angular cli. Follow this link to install cli : https://github.com/angular/angular-cli
Hope it will help
The easiest way to create a new Angular project is to use Angular CLI it builds the skeleton of the project including build/ transpilation tools. It will create a lot of the boiler-plate code for you too, e.g. adding a new module can be done from the cli.
I'd suggest looking at other IDEs such as Sublime Text, VS code etc. but if you must integrate with VS 2017, there are resources available, such as angular cli and vs2017.
I want to create a JavaScript API project in Visual Studio 2013/2015/etc. I don't want any bin/obj/dll/framework as it will be pure JS. Actually, it will be using Typescript, so I do need it to be in a web project so I can get Typescript compilation, etc.
Is there any existing project template which would give me just a plain old web application with no framework attached?
Yes, at least in VS 2013 there is. New Project->Templates->TypeScript->HTML Application with TypeScript. Then, in order to avoid generating a useless dll, you have to turn off the build of the project - go to the solution Configuration Manager and uncheck Build for the project.
I am starting my own Angular web application. I have experience coding in c# and angular but I have never had to set up my own project/solution. In this case, I would like to set up an ASP.NET Web API that will communicate to an Angular SPA front end in JSON (although it should be agnostic to the front end, any application that speaks JSON should be able to communicate with it).
Additionally, I have heard good things about grunt and so I would like to incorporate it into the project (at the very least to compile LESS and minify and combine my angular files).
I am working with visual studio professional 2013. I began by creating a Web API project and downloading the WebEssentials plugin.
I am just a little confused on how to continue here. Should I split out my angular into a separate project in the same solution? How do I include grunt?
How do I use grunt in the context of visual studio to include my angular files in my index.html file?
The project comes with a Scripts folder and a Views folder. I know that it is preferable to structure the angular files by function so that the controllers and views are housed together. Should I be including my views in the scripts folder? How does that affect my build procedure?
I realize these may be very naive questions. Please bear with me, I am a complete beginner when it comes to these kinds of tasks. All I have done in the past is basically code.
Let's go step by step:
Visual Studio Solution with Web Api and Angular JS
You can store both Web Api and Angular code in same solution and project.
In this case you can arrange structure like this:
Content
Controllers
Models
Scripts (with app/ folder and vendor scripts like angular, jquery, etc.)
Views
index.html for angular application you can put into Scripts/app folder.
And all views for Angular you can put into Scripts/app/views folder.
Using Grunt/Gulp
Grunt/Gulp/Cake/Broccoli - those tools are simply an a javascript task runners, which allows you to to various things like combine your vendor scripts into one file, minify and combine your scripts into one file, transform your LESS to CSS, etc.
To use those task runners you can use Project Build Events. In project build events you can run Grant/Gulp tasks, which will do all the magic for you.
Also there is an extension for Visual Studio called Task Runner. This extension lets you execute any Grunt/Gulp task or target inside Visual Studio by adding a Task Runner Explorer window.
Example of using Gulp in Visual Studio Project by using Task Runner
To run your Gulp tasks by Task Runner automatically you need to add a line into start of your gulpfile.js
/// <vs AfterBuild='<here is a name of your Gulp task>' />
This line will force your task to run after each rebuild of your project.
Useful Info
To get additional info about Apps with AngularJS on ASP.NET you can check video by John Papa: "Building Rich Apps with AngularJS on ASP.NET"
Usefull Gulp modules:
gulp-useref - Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
gulp-less - Less for Gulp.
gulp-uglify - Minify files with UglifyJS.
I have a java webapp project under eclipse that is using maven for dependency management.
This webapp also depends on many javascript libraries for the front-end, either provided by external "vendors" such as jquery or bootstrap, or developped "internally" by myself.
What I want to do is manage the javascript dependencies just as I would with java dependecies, inside my POM.xml.
Now, for external dependencies I would like them to be automatically downloaded from a repository ( either hosted by me or external) - this is what Webjars could provide I believe.
For my "internal" javascript libraries I would like to create them as separate eclipse projects, in my eclipse workspace, that would be referenced inside my webapp's POM the same way I would do with a secondary java project residing in my eclipse workspace.
I also want the referenced js dependencies to be properly placed under my /src/main/webapp/js/ folder when the webapp is deployed.
Finally, when modifying something in one of my "internal" javascript libraries, I would like the changes to be automatically deployed to the webapp, as if it was a regular java sub-project referenced in the main webapp project. I specially want the changes to be redeployed to the webapp if it is running / being debugged, under eclipse.
I have heard of Javascript maven tools : http://javascript-maven.softec.lu/
or http://mojo.codehaus.org/javascript-maven-tools/javascript-maven-plugin/
but thes plugins dont seem to be maintained anymore, are lightly documented, and I failed achieving the above requirements with them (probably because of the lack of concrete examples).
Now I know I'm asking for alot but I dont mind trying different approaches, and fooling around with different tools.
Any help, thoughts, insights etc ... appreciated
Thanks
I have several backbone.js views, javascript modules and style sheets in an ASP.Net MVC app i'm developing. I want to seperate these files during development but combine/consolidate, compress, uglify, resolve dependencies etc. before deployment. The Ruby community has solutions for this including Juicer and Jammit. Are there similar solutions for .Net web developers ideally solutions that integrate with visual studio.
I've used Chirpy for this in the past. Also compiles SASS, LESS, and CoffeeScript.
We use YUI Builder for exactly this purpose. (We also happen to use YUI extensively in our products.) It's Java/Ant based, but it wasn't hard to get msbuild to do all the work by creating a project file (csproj in our case) and overriding the "build" target. We include the project in our main .sln file, and it automatically builds along with all of our C#/.NET projects.
One thing to watch out for: We initially got frequent/random "access denied" errors when building this way. It turns out that Visual Studio was locking many of the intermediate files that YUI Builder generates. So our workaround is to robocopy all the relevant files to a temp folder, do the work there, and robocopy them back.
It's not ideal, and certainly not an out-of-the-box integration like you're probably hoping for, but it works well for us. It gives us minification, JSLint checking, dependency management, and an infrastructure for serving one combined file rather than individual scripts.