Tuesday, May 29, 2018

Fixing NPM Global Packages

I recently got a new Windows computer and when I opened up an old Angular project I realized that I hadn't installed Angular CLI yet. So I installed it globally and tried it again. It still wouldn't work. When I typed "ng" on the command line it said it was not recognized as a command. I tried some other packages I know I had installed globally, like TypeScript. That didn't work either. WTF man!

Finally I discovered that there was a nodejs command prompt installed so I opened that and it worked from there. However that only fixed it for running from that particular command prompt. If I tried to run it in VS Code it still wasn't working.

So I opened up the batch file for the nodejs command prompt (C:\Program Files\nodejs\nodevars.bat) and noticed that it was adding npm to the path system variable. I looked at my path and I only had the nodejs path. So I added the path to npm, which I copied from nodevars.bat, and that fixed it.

Now that I think about it, this also solves a problem I had a few weeks ago when I created my own node app and installed it, but it wouldn't run from the command line. I figured I was just doing something wrong when configuring my app, but now I know I was right all along. Vindication!

Code Hard!

Tuesday, April 17, 2018

Node.js + TypeScript = Awesome

Node.js + TypeScript = Awesome

You can use TypeScript to write maintainable Node.js apps. Here's how to set up a project in VS Code.

Create the Project

First create a project folder. Next I like to use "npm init" to set up the package.json file for the project. This will make it easy to track your npm dependencies.

Now you can open the project folder in VS Code.

Set up TypeScript Compiler

To set up the compiler create a file called tsconfig.json and add the following into it.


{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "sourceMap": true
    }
}

The important bit is to set the module to "commonjs" because this is the module loading system used by Node.js.

Start Programming

Create your main entry point TypeScript file. I usually call mine "main.ts".

Now you can add any supporting TypeScript files. To turn on the TS compiler to watch for changes and automatically compile go to the Tasks menu, select Run Build Task and select "tsc: watch" from the menu.

Although you can use the require keyword in your TypeScript files to import npm packages, you should use a TS import statement instead. Otherwise you will not get code hints.

import * as fs from "fs";

JavaScript Main File

You may want your main file to be a JavaScript file (don't ask me why). In that case you can import files generated by TypeScript using require. For example, if you have a TS file named myModule.ts then you would import it like so. Note that it must start with "./" so it knows it's a local module not an npm module.

let myModule = require("./myModule");

Note also that you probably don't want to use "export default" in your TypeScript file or you will have to reference the default item using the default keyword, which is a little awkward...

let something = myModule.default();

Code hard!

Thursday, July 27, 2017

Creating a New TypeScript Project in VSCode

I recently switched to using VSCode when writing TypeScript apps because I like the lightweight nature of it. However, this means setting up a lot of things yourself when compared to using an IDE like Visual Studio that does everything for you. Here is a quick outline of the steps I use to set up a new project. There aren't many explanations here, this is just a quick reference.

Create the app

First thing you need to do is create a place to put your app and initialize it. So create a folder with your app name, then inside that folder run from the command line: npm init

This will guide you through creating a package.json file by asking a number of questions. Now you can open the folder in VSCode and start working on your app.

Set up the compiler

Next you'll want to get the TS compiler set up for your project. There is a long article here about how to do it, but here's the gist (I'm assuming you already have the TS compiler installed).

In VSCode create a tsconfig.json file and put the following in it:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true
    },
        "include": [
        "src/**/*", "unittests/**/*"
    ]
}

You'll probably want to put all your TS source files in a separate folder in your project. If you want to configure the compiler to only compile files within certain folders use the include option. In this example I'm only compiling files in the src and unittests folders.

Now configure VSCode's default build task to TS. Select menu item: Tasks => Configure Default Build Task then select the tsc:build option in the dropdown list. This creates a tasks.json file already configured to use TS so there's nothing else to do.

Now you can start writing TS. To compile press Ctrl+Shift+B.

At this point you probably don't want to see all the generated JS files. You can hide them by selecting menu item: File => Preferences => Settings and adding the following.

"files.exclude": {
  "**/*.js": { "when": "$(basename).ts"},
  "**/*.js.map": true,
},

Import JS libraries

If you're using JS libraries like JQuery, Knockout, etc., you can add them to your project using npm. You can use the terminal window inside VSCode to do this. For example, to get knockout.js type the following: npm install --save knockout

This will get the knockout file and put it in the node_modules folder. It also saves the reference to your package.json file as a dependency.

If you want type definition files for your libraries it's also very easy to get using npm. npm install --save @types/knockout

Running your app

A great tool for running web apps is live-server, which you can install from npm. If you name your HTML file index.html it will open it in the browser automatically and any time you make changes it will reload the page.