JavaScript

Setting up Local NPM repository to Speedup Dev/CI Builds

April 29, 2018 Emerging Technologies, JavaScript, JavaScript, Modern Web Development, TypeScript, Web No comments , , ,

As a modern day JavaScript developer working with Node.js and NPM, it has been always any developer’s case to clean up local node modules sometimes when local build is broken. It is a tedious tasks to cleanup %appData%\npm-cache  to do a fresh install of all the modules again. Depending on the number of modules your project have, you will get stuck up for few minutes to hours to complete npm module installation depending on your Internet bandwidth.

Another scenario we can think of it on a build server or CI server, where we need to cleanup the entire modules during each build process, and ‘npm install’ would be like a fresh start, would take longer time to have your build complete.

What if we have a simple way of caching these packages locally, so that we do not have to download again from Internet every-time.  I will help you with a simple solution, that once setup will resolve some of these problems effectively.

Introducing Local-NPM


local-npm is a Node server that acts as a local npm registry. It serves modules, caches them, and updates them whenever they change. Basically it’s a local mirror, but without having to replicate the entire npm registry.

This allows your npm install commands to (mostly) work off-line. Also, your NPM modules  get faster and faster over time, as commonly-installed modules are aggressively cached.

local-npm acts as a proxy between you and the main npm registry. You run npm install commands like normal, but under the hood, all requests are sent through the local server.

 

Getting Started with Local-NPM:

Step 1: Install the module ‘local-npm’

$ npm install –g local-npm

Step 2: launch local-npm  and this will start the local npm server

$ local-npm

This will start the local npm server at localhost:5080.

http://127.0.0.1:5080

PS: Please note that, this step would take some time as this module tried to replicate the entire NPM repository remote skimdb to the local couchdb instance for efficient caching. But it will not eat up your disk space, as it caches modules based on usage only, it will not replicate the entire NPM repository.

Step 3: Validate the local-NPM registry

There is a basic NPMJS like UI to browse through local packages which can be accessed through.

http://localhost:5080/_browse.

Step 4: Then set npm to point to the local server:

$ npm set registry http://127.0.0.1:5080

Step 5: run  “npm install” of your modules and you can see that local-NPM caches these modules that you regularly use.

Incase, to switch back to default NPMJS registry, you can do:

$ npm set registry https://registry.npmjs.org

How it works?

npm is built on top of Apache CouchDB (a No-SQL db), so local-npm works by replicating the full “skimdb” database to a local PouchDB Server.

You can inspect the running database at http://127.0.0.1:16984/_utils.

References

To understand more on local-NPM and documentation visit the module repository in github@https://github.com/local-npm/local-npm

Visual Studio Tools for Apache Cordova in Visual Studio 2015 RC

May 3, 2015 ANDROID, Cordova, CSS, CSS 3, HTML, HTML5, iOS, JavaScript, jQuery, Mobile, Mobile Frameworks, Mobile SDK, Mobile Services, Mobile-Development, PhoneGap, Visual Studio 2013, Visual Studio 2015, Visual Studio Tools for Apache Cordova, VisualStudio, VS2013, VS2015, Windows, Windows 10, Windows 7, Windows 8, Windows 8 apps development, Windows 8.1, Windows Phone, Windows Phone Development, Windows Phone Store, Windows Store, Windows Store Development No comments

IC790359

Microsoft has announced that with Visual Studio 2015 – Apache Cordova tools will be integrated within the main install bundle. Using Apache Cordova Tools for Visual Studio you will be able to develop cross-platform mobile applications using single codebase for iOS, Android and Windows Phone.

With support for native device capabilities (e.g. camera, accelerometer, contact), offline scenarios and popular JavaScript frameworks (e.g. Angular, React and Backbone), the Tools for Apache Cordova contain everything web developers need for building cross-platform mobile apps using Visual Studio.

What’s new in Apache Cordova Tools for VS2015-RC

  • Grunt, Gulp, Bower and Node-based Workflows –  Starting with the RC release, it’s also much easier for you to build Cordova apps using tools familiar to many web developers.
  • New Templates from Ionic and Onsen UI – Ionic and Onsen UI templates are provided as optional to enable developers to try out the new frameworks. Each framework provides a variety of starting points to suit the most common project types. 
  • Fresh Samples, Tutorials and Documentation

Read more from Visual Studio team blog on Apache Cordova Tools for Visual Studio 2015 RC

If you are using Visual Studio 2013, then you will have to rely on Visual Studio Tools for Apache Cordova CTP3.1 (Add On) to enable cross platform mobile development using Visual Studio 2013 Update 4.

This preview release for Visual Studio 2013 Update 4 and Visual Studio 2015 RC supports building apps for the following device targets:

  • Android 4+
  • iOS 6, iOS 7, iOS 8
  • Windows 8.0 and Windows 8.1 Store
  • Windows Phone 8.0 and Windows Phone 8.1

Benefits of using Visual Studio Tools for Apache Cordova:

When you develop apps using Visual Studio Tools for Apache Cordova, Visual Studio provides these benefits:

  • Easy installation. Manual installation of Cordova involves a lot of work to find, install, and maintain the correct version of all the third-party software required to support native platforms. Visual Studio handles all that for you by including a third-party dependency installer that gets you up and running in the first hour.

  • Plugin management. Cordova plugins provide access to native APIs using a JavaScript interface. Support for custom plugins like those that turn a mobile phone into a barcode scanner are critical to an app’s success. Visual Studio makes it easy to add plugins of all kinds, including core Cordova and custom plugins. You also benefit from IntelliSense for plugins in Visual Studio.

  • Unified debugging experience. Cross-platform development often requires a different tool for debugging each device, emulator, or simulator. Different tools mean different workflows and lost productivity every time you switch devices. With Visual Studio, you can use the same world-class debugging tools for all deployment targets, including iOS devices and emulators, Android devices and emulators, Windows, and the Apache Ripple emulator.

  • Write once, deploy everywhere. The common JavaScript and plugin APIs in Cordova make it easy to write an app using a single code base that deploys to all target platforms—iOS, Android, and Windows. Of course, you can always write platform-specific code if and when you need it.

  • Command line interoperability. The Visual Studio solution directly reflects the file system and is updated in real time. This means that it is easier than ever to use your favorite command line tool with Visual Studio.

  • Multi-Version Cordova support. The Visual Studio solution allows you to select different versions of Cordova at the project level.

Quoting from MSDN Article – Getting Started with Visual Studio Tools for Apache Cordova

TO Learn more USE THE FOLLOWING RESOURCES

Introducing Visual Studio Code

May 1, 2015 .NET, .NET Framework 4.6, ASP.NET, CSS, HTML, JavaScript, Linux, Linux.World, Mac OSX, Open.Source, Operating Systems, Visual Studio Code, VisualStudio, Windows, Windows No comments

As part of Microsoft’s focused approach to bring in more value to Cross platform & Open Source based initiatives Microsoft has released Visual Studio Code IDE along with .NET Core runtime for Mac, Linux and Windows.

Visual Studio Code, a new, free, cross-platform code editor for building modern web and cloud applications on Mac OS X, Linux and Windows. Visual Studio Code is built primarily with standard web technology (HTML, CSS, JavaScript). Visual Studio Code offers developers built-in support for multiple languages (such as CoffeeScript, Python, Ruby, Jade, Clojure, Java,  Javascript,  JSON, C++, R, Go, makefiles, shell scripts, PowerShell, bat, xml), the editor will feature rich code assistance and navigation for all of these languages. JavaScript, TypeScript, Node.js and ASP.NET 5 developers will also get a set of additional tools.

vscode1

vscode2

Quoting from Visual Studio code site:

Visual Studio Code provides developers with a new choice of developer tool that combines the simplicity and streamlined experience of a code editor with the best of what developers need for their core code-edit-debug cycle. Visual Studio Code is the first code editor, and first cross-platform development tool – supporting OSX, Linux, and Windows – in the Visual Studio family.

Download:

Read more about it from below references:

Visual Studio Code Team blog – http://blogs.msdn.com/b/vscode/

Disable Client Side validation on a button click – ASP.NET MVC

September 16, 2013 .NET, .NET Framework, ASP.NET, ASP.NET 4.5, ASP.NET MVC, Back-2-Bascis, Codes, JavaScript, jQuery, Microsoft, Snippets, VisualStudio, VS2010, VS2012 No comments

ASP.NET MVC we use client side validation using jQuery.validate plugin, which will be based on Model – Data Annotation validation attributes.

In some cases we might want to disable such validation on a button click wherever it is not needed.

For example:

The below code block will register validation block for Title property in the Model, will result in client side validations fired when user click on button.

<div class="editor-field">
          @Html.EditorFor(model => model.Title)
          @Html.ValidationMessageFor(model => model.Title)
     </div>
<input type="submit" name="backButton" value="Back" title="Go back to Prev step." /> 

We can disable the client side validation check for a button using the “disableValidation=true” attribute for the button.

<script type="text/javascript">
  document.getElementById("backButton").disableValidation = true;
</script>

OR

<input type="submit" name="backButton" value="Back" 
 title="Go back to Prev Step" disableValidation="true" />

OR

You disable client-side validation on a button by adding the css style class “cancel” to it.

That will look like below example:

<input type="submit" name="backButton" value="Back"
 title="Go back to Prev Step" class="mybtn-style cancel" />

These are the different ways you can disable the client side validations. Hope it was helpful.

TypeScript for Visual Studio 2012–v0.8.3.1

March 30, 2013 .NET, Community, Frameworks, JavaScript, JavaScript, Javascript Development, Microsoft, MSDN, TypeScript, Updates, VisualStudio, VS2012, Web Development No comments

Microsoft has released an Incremental update to TypeScript for Visual Studio 2012 – the version 0.8.3.1, which is the first update to the v0.8.3 released in Feb 2013.

You can download the latest bits from here:

Download TypeScript for Visual Studio 2012 – v0.8.3.1

Getting Started to become MCSD–Web Application Solutions Developer

March 30, 2013 .NET, .NET Framework, .NET Framework 4.5, ASP.NET, ASP.NET 4.5, ASP.NET MVC, Azure, Certification, Community, CSS 3, HTML, HTML5, IIS, IIS8, JavaScript, JumpStarts, KnowledgeBase, Microsoft, Microsoft Learning, MSDN, SignalR, VisualStudio, VS2012, Web, Web API, Web Services, Windowz Azure No comments

In this article I will introduce you to the necessary requirements for preparing and earning MCSD – Web Apps Solutions Developer certification.

In my previous article Permanent Link to Getting Started to become an MCSD in Windows Store Apps, I have introduced you to the MCSD – Windows Store Apps Developer certification exams and requirements.

Similarity between MCSD – Win Store Apps development using HTML5 and MCSD – Web Apps is that initial exam is same for both the certification titles. 70-480 is the initial exam that is required for earning both the certifications.

Earning an MCSD: Web Applications certification will qualify you for a position as a web developer or web administrator.

Below are the 3 exams required to pass to earn the title MCSD: Web Applications

  1. 70-480 – Programming in HTML5 with JavaScript and CSS3
  2. 70-486 – Developing ASP.NET MVC 4 Web Applications
  3. 70-487 – Developing Windows Azure and Web Services

Note: This MCSD certification requires you to show continued ability to perform in your chosen solution area by completing a recertification exam every two years.

Online Preparation materials: (Provided to you by Channel9 and Microsoft Virtual Academy)

70-480 – Developing in HTML5 with JavaScript and CSS3 Jump Start – FREE

70-486 –  Building Web Apps with ASP.NET Jump Start – FREE – by Scott Hanselman and Jon Galloway

70-487 – Developing Windows Azure and Web Services – no jumpstarts available yet.

Know more about MCSD: Web Applications | from Microsoft Learning

Continue your learning and all the best to you – if you are planning to take MCSD on Web Applications.