Yo! Npm, bower pls, thx!

Let’s start a web application development in medias res! We will use some fancy technology like NodeJs, ExpressJs, Typescript, and AngularJs. And if all goes well we will toss in Azure for good measure. I want to find out how these technologies play together, how Typescript tames the Javascript backend (I know, it’s blasphemous, but c’mon it’ll be fun), and I’m going to tell you all about it.

Choose your IDE

The first thing to do is to find your IDE. There is a whole bunch of development tools you can choose from. NodeJs-based applications are often built by command-line-based tools, so that’s why there are a lot of different intelligent text editors you can use. The only condition is that the IDE should have Typescript support (or a plugin of course), but it’s not a must-have. There are the heavyweight IDEs like Eclipse, Visual Studio, and Webstorm, or you can choose from lightweight ones like VS Code, Github Atom, Sublime, etc. Choose whatever fits your preference. I personally use Webstorm + VS Code.

The first steps

You’ll need to install NodeJs in order to get the npm (NodeJs Package Manager). The npm will do the project dependency and build tool dependency (or devDependency) management. Grab an empty folder and the npm init command will create an empty package.json for us. The package.json contains some basic information about the project, which is useful when we want to publish our project as a node package, so others can use our application as an npm dependency. We can add so-called devDependencies, which are used to build our app, like gulp, but they won’t be deployed along with our app. We can add of course “regular” dependencies, specifying what versions we need, etc. After the package.json is complete, when John Doe comes and checks it out from the versioning system, he can set his environment with an npm install command, and start to build, test, and run it.

You don’t need to do this from scratch. Just install Yeoman, and start looking for a generator that best suits your needs. You can download and run a generator with the yo command. It works like maven archetypes. You get a basic configured project to give the development a head start. You can also download dependencies with the npm install [package-name]. If you add — save flag, it will save this as a dependency in the package.json. The — save-dev flag will do the same just as a devDependency. I suggest setting the private flag in the package.json to “true” in order to prevent the npm accidentally publishing the project.

Setting up Bower

Okay, it’s starting to look good, but we don’t have all the things we want to use. The frontend third-party stuff is usually managed by bower. Bower has a very similar command to npm, so the init, install, — save, etc., are pretty much the same. Bower works from bower.json. The dependency versioning is the same for npm and bower. Both use node-server to parse the versions. You can set version ranges, and filter for major, minor, or patch versions if you are in a picky mood. Nice! We have a bunch of third-party stuff that we need to wire together. It’ll come in the next post.

Want to know more? Check out these links:
https://www.npmjs.com/
http://expressjs.com/
http://www.typescriptlang.org/
http://bower.io/
http://yeoman.io/
https://angularjs.org/
https://nodejs.org/
https://code.visualstudio.com/
https://docs.npmjs.com/files/package.json

To be continued…