Wednesday, March 2, 2016

How to include generated files in Visual Studio Web Deployment Package without adding them to Source Control

When using Web Deployment the default is to only have it include the files that are needed to run the application. You can tell Visual Studio to include all files in the project or project folder but that could be messy.

Let's say we want to generate CSS from SCSS. In that case we wouldn't want to include the generated file into Source Control but rather generate it whenever we build or change some SCSS.

Now comes the tricky part. In order to include the generated file in the project so that Web Deployment would include it but not add it to Source Control we can use a .tfignore file. I've created one and put it in the solution root. To have it ignore the generated CSS file in my web project we simply have to add this line:
\Corp.Web\Static\SCSS\site.css

One confusing bit is when you add the generated file to your project it still shows up in Pending Changes. Just Undo that change and it won't show up as a pending change anymore.

One last thing piece to the puzzle is to hide the generated file from Solution Explorer since we don't ever want to edit that file manually.

Edit the project file, find the generated file, add the Visible tag inside the Content tag and set it to false:
<Content Include="Static\SCSS\site.css">
   <Visible>false</Visible>
</Content>

Friday, December 18, 2015

Using Zurb Foundation Sites with Sass in Visual Studio 2015

I'm currently involved in a project where we decided to use Zurb Foundation and since it's built with Sass we should be able to customise it to our needs.

Unfortunately we're stuck with Visual Studio 2015 and Asp.Net 4 + MVC 5 so we don't have the luxury of having NPM or Bower built in as in Asp.Net 5 + MVC 6. Yes, there are NuGet packages for Foundation but they're ancient.

This part of the process is not optimal but I downloaded the latest version of Foundation separately using the following NPM command:

npm install foundation-sites

I then took all the contents and added to my project.

Folder structure















To be able to compile Sass into Css right within Visual Studio we need to install the extension Web Compiler.

The next step was to create our main Sass file which I named site.scss. I put in a folder called SCSS. To have Web Compiler compile this, just right-click and choose Web Compiler -> Compile File.

Compile file


















In site.scss we can then just import Foundation Sites to include it in our compiled Css.

Include Foundation





Here comes one tricky part and that is to tell Web Compiler about the whereabouts of Foundation. This can be done in the configuration file compilerconfig.json.defaults that gets created in the root of your project when you choose to compile a file with Web Compiler.
Find the node under "sass" that's called "includePath" and give it a value of "./Static/Framework/Foundation-sites/scss".

Now you should be good to go and whenever site.scss gets saved a site.css including Foundation should be compiled.

For easier debugging using browser developer tools you could get Source Maps working by enabling Source Maps in compileconfig.json that is located within the root of your project.

Source map setting












Please note! While the last step enables Source maps in the compiled Css, the path to them is incorrect. This could be solved in the configuration file compileconfig.json.defaults.
Find the node under "sass" that's called "soruceMapRoot" (yes it's misspelled) and change it to "/".

Adding alternative NuGet package source in Visual Studio solution

While it's possible to add a new package source to Visual Studio this is not optimal if there are more than one developer or if a build server is used.

An alternative is to add a .nuget folder and within that folder add a NuGet.config file with the following content:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
   <packageSources>
      <add key="NuGet official package source" value="https://nuget.org/api/v2/" />
      <add key="Some other package source" value="some url to the other package source" />
   </packageSources>
   <disabledPackageSources />
   <activePackageSource>
      <!-- this tells that all of them are active -->
      <add key="All" value="(Aggregate source)" />
   </activePackageSource>
</configuration>


Source
https://docs.nuget.org/consume/nuget-config-file

Prevent packages folder from being added to Team Foundation Version Control in Visual Studio 2015

Solutions built with Visual Studio 2015 uses NuGet Automatic Package Restore instead of MSBuild-integrated package restore. At least for me this made Visual Studio want to check in the package folder into Team Foundation Version Control.

To prevent the packages folder from being added to Team Foundation Version Control in Visual Studio 2015 you can add a .nuget folder in your solution folder. In the .nuget folder add a file named NuGet.config with the following content:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <solution>
    <add key="disableSourceControlIntegration" value="true" />
  </solution>
</configuration>

This tells Nuget to not even call Visual Studio about the changes to the packages folder.

For TFS 2012 and later also add a .tfignore file in your solution folder with the following content:

## Ignore the NuGet packages folder in the root of the repository
packages

#include package target files which may be required for msbuild
!packages/*.targets

This will ignore changes to the packages folder.

Sources

Friday, December 14, 2012

How to enable remote/external requests/connections on IIS Express

First you need to open your firewall to let through TCP connections on the local port(s) that you run IIS Express on, typically 8080.

Secondly you have to configure HTTP.SYS to allow your application, running as a standard user, to listen to external traffic over the wire. You can do this on Windows 7 or Windows 8 by running the following command from an administrative prompt:
netsh http add urlacl url=http://[your-machine- name]:8080/ user=everyone

And last but not least you might be missing a binding information in applicationhost.config. You can find it in your user profile (%userprofile%\Documents\IISExpress\config\applicationhost.config). Locate your site under the <Sites> node. Since there are potentially a whole bunch of sites there you can find it by searching for the physical path in which all files for your site belongs. Now add a binding with your machine name:
<binding protocol="http" bindingInformation=":8080:[your-machine-name]" />
Finally, don’t forget to restart IIS Express for this change to carry into effect.

Tuesday, May 17, 2011

How to test mail delivery during development without a real SMTP server

Ever wanted an easy way to test how mails look like when sent from your application without using a real SMTP server?

Using a real server might possible include setting up security, you never know if your mails are stuck in spam filters and you are always scared that you sent it to real people by accident. Windows 7 for example does not include a SMTP service.

The answer is smtp4dev. This is a lightweight service that sits in the system tray and catches all mail sent to localhost without delivering them. The received messages can quickly be viewed and inspected.

Sunday, March 13, 2011

How to evolve as a developer

I'm pretty competitive and I recently found out that a college of mine is very active on Stack Overflow so I decided to start "chasing" him. It took about a month to gain 800 points which got me over 1.000 and made me the among the top 300 contributers for some of those weeks. I wasn't really reaching for any particular score but I had to have some reachable goal and 1.000 seemed like a nice figure.

During this adventure it hit me what a perfect way of gaining knowledge this is. To give a good answer takes thinking, researching and not to forget, good communication skills. I learned a lot from this and got a lot of great feedback from fellow developers.

So my advise is that you should pick a topic (tag on Stack Overflow) that you want to learn more about and start asking, reading and answering questions.

My next tag will be jQuery Mobile.

See you on Stack Overflow!