Fixing: NPM / Node error on Windows: The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters.

I was using Visual Studio 2015 update 3 on Windows 10 x64 and was getting the error: “The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters.”, when running some gulp tasks.

I fixed the problem by letting Visual Studio 2015 update 3 use the “current”(at the time of writing) node version (v6.5.0), that was  installed in “C:\Program Files\nodejs”.

Steps

  • Download the “current” (v6.5.0) Windows x64 version of node (NOT, I repeat, NOT the LTS version) at https://nodejs.org/en/
  • Install it
  • Open Visual Studio 2015 > Tools > Options… > Project and Solutions > External Web Tools > Add an entry “C:\Program Files\nodejs”
  • Move the entry to the top of the list and restart visual studio:

image

No the following steps might not be necessary, but in case the error persists:

  • Remove the node_modules folder
  • Open the solution and project (this will trigger an npm install)
  • Open the Package Manger Console
  • npm cache clean
  • npm dedupe
  • npm install

How to create multiple themed release builds by using web deploy, gulp and PostCSS in Visual Studio 2015 update 3

 
 

Note

In this blogpost a “release build” is a folder containing all the files (html, css, JavaScript, images, dll’s etc.) needed in production to run a specific themed web application.

 
 

 
 

 
 

The publish / deployment process in Visual Studio is intended to create one “release build”, but I wanted this process to create 2 exactly the same “release builds”, just with different themes (different images and css files).

 
 

To accomplish this, I altered / added / removed the following files:

  • Added deploy.pub.xml (the publish profile)
  • Altered the csproj file of the web project
    • Added folder to the root “Themes”
      • Theme1
        • Images (contains the images for this theme, build type = “None”)
        • variables.cssn (contains all the css next variables for this theme, build type = “None”)
      • Theme2
        • Images (contains the images for this theme, build type = “None”)
        • variables.cssn (contains all the css next variables for this theme, build type = “None”)
  • Added package.json (npm configuration file, build type = “None”)
  • gulpfile.js (gulp configuration file, build type = “None”)
  • gulpfile.helper.js (custom JavaScript code, build type = “None”)
  • Renamed all *.css to *.cssn (css next) and set the build type = “None” (except the css files in the libraries folder)
  • Deleted all *.css files except the files in the libraries folder.
  • .gitignore

 
 

 
 

 
 

Deploy.pubxml

 
 

Create a publishing file “deploy.pubxml” by right clicking on your web application project > publish… > Custom

  • Enter “deploy” for the name, his will create a deploy.pubxml.
  • Choose publish method “File System”
  • Enter a target location, for example C:\Release\MyWebApp

 
 

 
 

 
 

<?xml
version=1.0
encoding=utf-8?>

<!–

This file is used by the publish/package process of your Web project. You can customize the behavior of this process

by editing this MSBuild file. In order to learn more about this please visit http://go.microsoft.com/fwlink/?LinkID=208121.

–>

<Project
ToolsVersion=4.0
xmlns=http://schemas.microsoft.com/developer/msbuild/2003>

<PropertyGroup>

<WebPublishMethod>FileSystem</WebPublishMethod>

<SiteUrlToLaunchAfterPublish />

<publishUrl>C:\Release\Theme1</publishUrl>

<DeleteExistingFiles>False</DeleteExistingFiles>

<LastUsedBuildConfiguration />

<LastUsedPlatform />

<LaunchSiteAfterPublish>False</LaunchSiteAfterPublish>

<ExcludeApp_Data>False</ExcludeApp_Data>

</PropertyGroup>

<!–

The target “GatherAllFilesToPublish” is the last target run by msbuild, before msdeploy starts copying files to the destination folder.

This is the last time we can alter the output, because there is no “after publish” target.

We have to use the property “AfterTargets”, because “DependsOnTargets” doesn’t work.

 

The target runs a gulp task which creates a release output folder per theme (by using PostCSS and copying images to correct location).

– themes: Is a “comma” seperated list of themed releases that should be created

– The first item should be the “default” theme

– projectFolder: The folder containing the *.csproj file.

This folder is needed, because among other things it contains:

– the *.cssn (css next) files that should be compiled to *.css

– the theme images that should be copied

– packageTempDir: The temp folder used by Visual Studio to create a release. This folder will be used as base for the other themed releases.

– publishFolder: Is set to the “publishUrl”,

– The publishing process of Visual Studio is intended to work for one “release build”.

– We are creating multiple “release builds”, one for each theme.

– Each “release build” will be placed inside the parent folder of the “publishFolder”

– Only the first theme (default theme) will be placed directly into the “publishFolder”

 

NOTE

– npm run “gulp”, will only work when the package.json contains scripts { “gulp”: “gulp” }.


–>

<Target
Name=AfterPublish
AfterTargets=GatherAllFilesToPublish>

<Exec
Command=npm run gulp — after-publish –options –themes Theme1,Theme2 –projectFolder $(MSBuildProjectDirectory) –packageFolder $(_PackageTempDir) –publishFolder $(publishUrl) />

</Target>

</Project> 

 
 

 
 

Alter csproj

Add a “before build” step (just before the “project” end tag), to apply theming whenever the project is build (even in development)

<Target
Name=BeforeBuild>

<Exec
Command=npm run gulp — apply-theming />

</Target>

</Project>

 
 

This will only run the theming and it will run the theming inside the current project folder.

 
 

 
 

 
 

Add or update package.json

After saving this file, Visual Studio will automatically run gulp install, to install all npm packages.

 
 

{

    “version”: “1.0.0”,

    “name”: “MyWebApp”,

    “private”: true,

“devDependencies”: {

“del”: “>=2.2.1”,

“gulp”: “>=3.9.1”,

“gulp-plumber”: “>=1.1.0”,

“gulp-postcss”: “>=6.1.1”,

“gulp-rename”: “>=1.2.2”,

“gulp-util”: “>=3.0.7”,

“postcss-import”: “>=8.1.2”,

“postcss-cssnext”: “>=2.7.0”

 
 

},

“scripts”: {

“gulp”: “gulp”

}

}

 
 

 
 

 
 

 
 

Add a gulpfile.js to the root of your web application

 
 

/**

* The version of gulp and all it’s dependencies are managed in the package.json file.

*/

‘use strict’;

 

// Dependencies

const fs = require(‘fs’);

const gulp = require(‘gulp’);

const debug = require(‘gulp-debug’); // Can be used to log all files in a gulp stream (gulp.src or gulp.dest).

const jshint = require(‘gulp-jshint’);

const livereload = require(‘gulp-livereload’);

const plumber = require(‘gulp-plumber’);

const util = require(‘gulp-util’);

const path = require(‘path’);

const helpers = require(‘./gulpfile-helpers.js’);

const log = helpers.log;

const defaultTheme = ‘Theme1’;

 

/**

* The default task.

*/

gulp.task(‘default’, function () {

 

});

 

/**

* This task will be called from the “Deploy.pubxml”.

*/

gulp.task(“after-publish”, function () {


const themes = (util.env.themes || ‘Theme1,Theme2’).trim().split(‘,’);


const projectFolder = (util.env.projectFolder || path.resolve(‘.’)).trim();


const packageFolder = path.resolve((util.env.packageFolder || “..\\bin\\Release\\Package\\PackageTmp”).trim());

 


// When this task is passed an environment variable “publishFolder”, we expect the “publishFolder” to be the path to the first “themed release build”.


// See the Deploy.pubxml for more explanation.


var publishFolder = “C:\\Release”;


if(util.env.publishFolder) {

publishFolder = path.dirname(util.env.publishFolder.trim());

}

 

log(`after-publish: themes – ${themes}`);

log(`after-publish: projectFolder – ${projectFolder}`);

log(`after-publish: packageFolder – ${packageFolder}`);

log(`after-publish: publishFolder – ${publishFolder}`);

 


// Publish each theme.

themes.map((theme) => {

helpers.publishTheme(theme.trim(), defaultTheme, projectFolder, packageFolder, publishFolder);

});

});

 

/**

* The “BeforeBuild” target in the ” csproj” will call this gulp task.

*

* If you want to generate a theme other than the default theme, use the command line:

* npm run gulp — apply-theming –options –theme Theme1

*/

gulp.task(‘apply-theming’, function () {


const theme = (util.env.theme || defaultTheme);

helpers.applyTheme(theme, path.resolve(‘.’), path.resolve(‘.’));

});

 
 

 
 

 
 

 
 

Add a gulpfile.helper.js to the root of your web application

 
 

const del = require(‘del’);

const gulp = require(‘gulp’);

const path = require(‘path’);

const postcss = require(‘gulp-postcss’);

const postcssImport = require(‘postcss-import’);

const postcssNext = require(‘postcss-cssnext’);

const rename = require(‘gulp-rename’);

const util = require(‘gulp-util’);

 

/**

* Copy images and variables.cssn (cssnext) from the “theme” folder to the correct location.

* projectFolder = the folder containing the “*.csproj” file.

* destinationFolder = the folder where the theme files will be placed.

*/

function applyTheme(theme, projectFolder, publishFolder) {

 


// Copy image files to publish folder.

copyImages(theme, projectFolder, publishFolder)

.on(‘finish’, runCopyCssNextThemeFiles);

 


// Copy css next theme files inside publish folder to the “App/Styles” folder.


function runCopyCssNextThemeFiles() {

copyCssNextThemeFiles(theme, publishFolder)

.on(‘finish’, runGenerateCss);

}

 


// Generate css from css next files.


function runGenerateCss() {

generateCss(publishFolder);

}

}

 

/*

* Copy all css next files from the project folder to the specific theme publish folder.

*/

function copyCssNextFiles(projectFolder, publishThemeFolder) {


const src = path.join(projectFolder, ‘/**/*.cssn’);


const dest = publishThemeFolder;

 

log(`copyCssNextFiles: src – ${src}`);

log(`copyCssNextFiles: dest – ${dest}`);

 


return gulp.src(src)

.pipe(gulp.dest(publishThemeFolder));

}

 

/**

* Copy theme css next files (including variables.cssn) from the “theme” folder to the “App/Styles” folder.

*/

function copyCssNextThemeFiles(theme, publishFolder) {


const src = path.join(publishFolder, ‘Themes/’ + theme + ‘/**/*.cssn’);


const dest = path.join(publishFolder, “App/Styles”);

 

log(`copyCssNextThemeFiles: src – ${src}`);

log(`copyCssNextThemeFiles: dest – ${dest}`);

 


return gulp.src(src)

.pipe(gulp.dest(dest));

}

 

function copyImages(theme, projectFolder, destinationFolder) {


const src = path.join(projectFolder, ‘Themes/’ + theme + ‘/Images/**/*.*’);


const dest = path.join(destinationFolder, ‘App/Images’);

 

log(`copyImages: src – ${src}`);

log(`copyImages: dest – ${dest}`);

 


return gulp.src(src)

.pipe(gulp.dest(dest));

}

 

/*

* Copy all files from the Visual Studio package temp folder to the specific theme publish folder.

*/

function copyPackageFiles(packageFiles, publishThemeFolder) {


const src = packageFiles;


const dest = publishThemeFolder;

 

log(`copyPackageFiles: src – ${src}`);

log(`copyPackageFiles: dest – ${dest}`);

 


return gulp.src(packageFiles)

.pipe(gulp.dest(publishThemeFolder));

}

 

/**

* Compile cssn (cssnext) to css.

*/

function generateCss(publishFolder) {


const src = path.join(publishFolder, ‘App/**/*.cssn’);


const dest = path.join(publishFolder, ‘App’);

 

log(`generateCss: src – ${src}`);

log(`generateCss: dest – ${dest}`);

 


const plugins = [

postcssImport,

postcssNext

];

 


return gulp.src(src)

.pipe(postcss(plugins))

.pipe(rename({

extname: “.css”

}))

.on(‘error’, log)

.pipe(gulp.dest(dest));

}

 

/**

* Log message or an array of messages.

*/

function log(message) {


if (Array.isArray(message)) {


for (var i = 0, length = message.length; i < length; i++) {

util.log(message[i]);

}

}


else {

util.log(message);

}

}

 

function publishTheme(theme, defaultTheme, projectFolder, packageFolder, publishFolder) {


const publishThemeFolder = path.join(publishFolder, theme);


const publishThemeFiles = path.join(publishThemeFolder, “**”);


const packageFiles = path.join(packageFolder, ‘**/*’);

 

log(`publishTheme: publishThemeFolder – ${publishThemeFolder}`);

log(`publishTheme: publishThemeFiles – ${publishThemeFiles}`);

log(`publishTheme: packageFiles – ${packageFiles}`);

 


// Remove publish folder.

del.sync([publishThemeFiles], { force: true });

 


// Copy package files to publish folder.

copyPackageFiles(packageFiles, publishThemeFolder)

.on(‘finish’, runCopyCssNextFiles);

 


// Copy css next files to publish folder.


function runCopyCssNextFiles() {

copyCssNextFiles(projectFolder, publishThemeFolder)

.on(‘finish’, runCopyImages);

}

 


function runCopyImages() {


// Copy image files to publish folder.

copyImages(theme, projectFolder, publishThemeFolder)

.on(‘finish’, runCopyCssNextThemeFiles);

}

 


// Copy css next theme files inside publish folder to the “App/Styles” folder.


function runCopyCssNextThemeFiles() {

copyCssNextThemeFiles(theme, publishThemeFolder)

.on(‘finish’, runGenerateCss);

}

 


// Generate css from css next files.


function runGenerateCss() {

generateCss(publishThemeFolder)

.on(‘finish’, runDeleteCssNextFiles);

}

 


// Delete all css next files in the publish folder.


function runDeleteCssNextFiles() {


const ccsNextFiles = path.join(publishThemeFolder, ‘**/*.cssn’);

log(`runDeleteCssNextFiles: ccsNextFiles – ${ccsNextFiles}`);

 

del.sync([ccsNextFiles], { force: true });

}

}

 

/**

* Log message to a log file, creating it, when it does not exist.

* The file will always be overwritten.

*/

function writeToLogFile(message) {

fs.writeFileSync(‘gulp.log.txt’, message);

}

 

exports.applyTheme = applyTheme;

exports.log = log;

exports.publishTheme = publishTheme;

 
 

 
 

Alter the .gitignore file

 
 

/App/Images/*.*

/App/Styles/variables.*

/App/**/*.css

!/App/Libraries/**/*.css

 
 

We excluded the copied “themed” images.

We excluded the copied “themed” variables.cssn.

We excluded all css, except the css in the libraries folder.

 
 

 
 

 
 

Now when you publish the project, the folder C:\Release\MyWebApp, should contain 2 “release builds” : Theme1 and Theme2.

Both containing the specific themed images and css.

  

Fix: Visual Studio doesn’t use or can’t find TypeScript typings (*.d.ts) in a .net core project

 

I added some TypeScripts typings to a .net core project in Visual Studio 2015  (version 14.0.25123.00 Update 2), by using the NPM package “typings”, but the added *.d.ts files, were not picked up by Visual Studio, this was caused by excluding the “wwwroot” folder in the tsconfig.json,

 

after removing the wwwroot folder from the exclude array, the typings were correctly found and used.

 

 

 

{
  "compileOnSave": true,
  "compilerOptions": {
    "module": "system",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es6"
  },
  "exclude": [
    "node_modules",

     "wwwroot" <========================= Remove the wwwroot
  ]
}

Create a Visual Studio 2015 Project Template and upload it to the gallery

The most simple way to create a Visual Studio 2015 Project Template, is to start from an existing project template.

In short:

 

Note

The installation folder for the custom templates will be:

%USERPROFILE%\AppData\Local\Microsoft\VisualStudio\14.0\Extensions

 

 

Upload to gallery

When you have created the Visual Studio extension, there is just one step left: uploading to the gallery:

Go to https://visualstudiogallery.msdn.microsoft.com/ and sign in.

image

 

 

Upload *.vsix

image

 

Enter some meta data

 

image

 

Publish

Don’t forget to publish!

image

 

After the publish you should find your project template in Visual Studio:

File > New > Project… > Online > search

image

Fix: The Dnx Runtime package needs to be installed. See output window for more details

I do not know what caused the problem, but at a given moment, I got the error:

 

The Dnx Runtime package needs to be installed. See output window for more details

 

To fix this problem I entered the following commands in the package manager console:

 

dnvm upgrade

dnvm upgrade –r CoreClr

dnu restore

 

Closed all visual studio 2015 instances and opened the project,  now I could build the project wihout errors.

 

Found my solution at: http://stackoverflow.com/questions/31957824/the-dnx-runtime-package-needs-to-be-installed-see-output-window-for-more-detail

Starting with ASP.NET 5, TypeScript 1.7 and the ES6 module syntax compiled to ES5.

In the previous post I described how you can get started with ASP.NET 5.

 

The code used in this blog post can be found at: https://github.com/roelvanlisdonk/Research/tree/master/Blog/ASP.NET5/TypeScriptES6Modules

 

In this post I will describe how you can get start using TypeScript 1.7 and the ES6 module syntax to order your code in an ASP.NET 5 application.

 

I will explain how you can use a “library” module inside your app code, by using TypeScript and the ES6 module syntax.

The compiled code will be in ES5, so we need a library called “system.js” to load the “ES6 modules” at runtime.

 

  • After you followed the steps in the previous post
  • Add a TypeScript JSON Configuration File to the wwwroot folder

 

image

 

Add "module": "system", under compileroptions:

 

image

 

Add two typescript files:

  • wwwroot/core/app.ts
  • wwwroot/libraries/list/findIndexByItem.ts

image

 

 

 

  • Add the system.js bower package.

This is needed, because the typescript will be compiled into javascript modules.

These modules are in the “system.require” format.

We could use other module formats (see tsconfig.json), but in this example I wanted to use system.js

 

Before we can add the system.js bower package, add a “Bower Configuration File” to the root of the project.

 

image

 

In this example I use the folder “wwwroot/libraries” to store all my runtime JavaScript dependencies, so we have to edit the .bowerrc file, change:{ “directory”: “wwwroot/lib” } to { “directory”: “wwwroot/libraries” } .

 

image

 

Now we can install the system.js bower package:

 

image

 

 

findIndexByItem.ts

 

image

 

 

app.ts

 

image

 

 

index.html

 

The only javascript file we directly load in the index.html is “/libraries/system.js/dist/system.js”. All other logic will be dynamically loaded by the system.js loader.

 

To  make system.js recognize file paths like System.register(["../libraries/list/findIndexByItem"] , so without the “*.js” extension, we need to add a little configuration by using System.config, then we load the “core/app.js” file and start the application.

The “core/app.js” uses the library module “findIndexByItem.js”. This JavaScript file will be dynamically loaded, when “core/app.js” is requested.

 

 

image

 

Result

 

image

 

 

Note: for browsers that do not support promises you need a promise polyfill, that can be found, here: https://github.com/jakearchibald/es6-promise/

Starting with ASP .NET 5 (empty project) and static files.

 

If you are starting with ASP .NET 5 (1.0.0-rc1-final) and you just want to serve an “index.html”, you can follow these steps:

  • Start Visual Studio 2015
  • File > New > Project…
  • Installed > Templates > Visual C# > Web > ASP.NET Web Application
  • Choose .NET Framework 4.6.1

image

 

  • ASP.NET 5 Templates > Empty

image

 

  • Open project.json and add package dependency “Microsoft.AspNet.StaticFiles”: “1.0.0-rc1-final”:

 

image

 

  • Open Startup.cs and remove the app.Run lines:

image

 

  • In Startup.cs add the follwoing lines in the Configure methode beneath app.UseIISPlatformHandler();:
    • app.UseDefaultFiles();
    • app.UseStaticFiles();
  • Like so:

image

 

 

  • Add an index.html file to the wwwroot folder and add the text “Hello world from html” to the body:

 

image

 

 

 

Press F5 and the a browser should appear showing you the “Hello world from html”

 

image

Fix: TypeScript 1.7.6 compile on save in Visual Studio 2015 not working

I upgraded Visual Studio 2015 TypeScript extension to 1.7.6, then compile on save stopped working.

First I checked if “Compile on save” was enabled on my 4.5.2 web project properties (TypeScript Build tab):

 

image

 

Then I checked if “Automatically compile TypeScript file which are not part of a project” was enabled (Tools / Options).

 

image

 

Then the TypeScript files still would not compile on save (they were compiled, when the project was build, but not when a TypeScript file was saved.

 

The solution

I removed the following part in my Web.csproj file:

 

<PropertyGroup Condition="’$(Configuration)|$(Platform)’ == ‘Debug|AnyCPU’">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
    <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
    <TypeScriptModuleKind>None</TypeScriptModuleKind>
    <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
    <TypeScriptOutFile />
    <TypeScriptOutDir />
    <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
    <TypeScriptNoEmitOnError>False</TypeScriptNoEmitOnError>
    <TypeScriptSourceMap>True</TypeScriptSourceMap>
    <TypeScriptMapRoot />
    <TypeScriptSourceRoot />
  </PropertyGroup>

 

Then I added a tsconfig.json file to the root of my project:

image

 

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "sourceMap": true,
    "target": "es5"
  }
}

 

 

 

Don’t now if both steps are needed, but after that, my compile on save started working again.