Posts from the ‘Tools’ Category
February 24, 2018
Exploring the Angular Command Line Interface (CLI)
Installing the CLI
sudo npm install -g @angular/cli
Using the CLI
ng build --help
Creating New Angular Projects
The ng new command
ng new app-name
New project generation options
ng new --help
ng new app-name --routing
ng new app-name --style=scss --routing --dry-run
ng new app-name --style=scss --routing --prefix=vsrao
Serving Angular Applications for Development
The ng serve command
ng serve --help
ng serve --open
Customizing the development server
ng serve --port=8000 --open
ng serve --host=whatever.dev.company.com --open
Generating Angular Application Code
Creating new code with blueprints
With the Angular CLI you can generate the different entities used to build your application. You will be able to easily generate Components, Directives, Services, Pipes, Models and Interfaces, Route Guards and Modules. When generating a blueprint, your command will follow the following template:
ng generate [schematic] [name] [options...]
ng generate --help
Available schematics: application, class, component, directive, enum, guard, interface, module, pipe, service, universal and appShell.
Generating components and modules
ng generate component contact-list --dry-run
ng g c contact-list --dry-run
ng g c contact-list --dry-run --flat
ng g c contact-list
ng generate module shared
ng generate component shared/avatar --module=shared
ng generate directive shared/directives/non-numeric --module=shared
ng generate service services/api
ng generate service services/api --module=app
ng generate pipe pipes/phone
ng generate class models/contact
Generating interfaces and enums
ng generate interface models/contact
ng generate enum models/contact-type
Generating route guards
ng generate guard auth
Building Angular Applications
A build pipeline for an Angular app
There are many steps involved in building an Angular application. Since Angular applications are written in TypeScript and ES6 and beyond, the build pipeline is quite involved. We need to Transpile TypeScript and ES6+ code, bundle our application into one file, or split across many, minify files by removing newlines and white space, mangle our application bundles to make files even smaller, and also generating source maps. Aside from that, we also need to deal with CSS and other assets, such as compiling from Sass to CSS, possibly inlining CSS, having scoped styles, and copying or inlining images. As you can see the process is very involved, but the Angular CLI takes care of all this for us using Webpack under the hood, all with a simple command,
ng build. The
ng build command also comes with several options.
Configuring different build options
By default, the
A production build can be run using
ng build --prod. For generating source maps in a production build we need to use the
ng build --prod --sourcemap command. Lastly, if you wish to analyze the generated bundle files, using a tool such as webpack bundle analyzer use the
ng build --prod --stats-json command. Running this command will generate a stats.json file, which you can then upload on webpack.github.io/analyse/ . On this site, you can analyze the different bundles that the build pack run generated for you. You can analyze chunks, the assets, and see the size of each of them.
Setting up build scripts
In the package.json file, we can setup the below npm scripts:
"build:dev":"ng build --stats-json"
"build:prod": "ng build --prod --stats-json"
Setting up npm scripts will make automation much easier.
Built-in test runners and scaffolding
When you create an Angular application using the CLI, a testing pipeline is already set up for you. To run your unit tests, a karma configuration file, karma.conf.js is generated. Karma is used as a test runner using jasmine as a testing framework, and is set up, by default, to run your tests in Chrome. Additional setup can be seen in test.ts. Essentially, this provides additional setup to initialize the Angular testing environment. You can write your tests in TypeScript and the CLI will take care of transpiling that for you.
ng test command
In order to run your unit tests, you use the
ng test command. This will take all of your spec files, transpile them in memory, and run your unit test in Chrome.
Test run options
ng test command runs the test in watch mode. However, if you prefer not to do that, you can use a single run flag. By running the
ng test --single-run command the test will only run once and then exit. This will be needed in a Continuous Integration environment.
You can also generate code coverage reports when running your tests. To do so, you need to use the code coverage flag. Running
ng test --single-run --code-coverage command will not only run your tests but will also generate code coverage reports using Istanbul. Once it is complete, it will create a new coverage folder, with an index.html page for your report.
Ejecting from the Angular CLI
The tooling provided by the Angular CLI is quite extensive. It can generate applications, application code, and also set up build and testing pipe lines for you. However, it is not uncommon for a development team to ask specific needs over the build process, in order to have finer control. It is for these purposes that the Angular team created an eject feature. You can use this feature if you feel that you want to manually take care of running and building your application. To do so, you can use the
ng eject command.
The Angular CLI is truly a great tool that will allow you to be productive building Angular applications. I recommend subscribing to notifications on this GitHub repository – https://github.com/angular/angular-cli/, as it will allow you to keep up to date with new features and be notified of new releases. The Angular team have some great things planned for the CLI. I also recommend subscribing to the official Angular Blog – https://blog.angular.io/ for keeping up to date.
October 11, 2017
August 9, 2017
Brackets has an extensive array of extensions for enhancing your front-end development workflow.
- Emmet – The Emmet extension for Brackets, if you take the time to learn it, provides wonderful shorthand snippets for quickly coding in HTML and CSS.
- Indent Guides – The Indent Guides extension for Brackets adds helpful guides to your code, making it easier to see where one section ends and another begins.
- Beautify – The Beautify extension for Brackets does exactly what its name implies. It takes sloppy, unformatted markup and makes it look beautiful by adding spacing and indents that to make it easier to read.
- Autoprefixer – The Autoprefixer extension for Brackets parses through your CSS code and adds vendor prefixes to your styles to make it as browser-friendly as possible.
- Lorem Pixel
- CDN Suggestions – Using a Content Delivery Network is a great way to link to commonly used libraries like jQuery and Bootstrap. CDN Suggestions is a plugin that will give you quick access to all of the most popular CDN links available.
- HTML Wrapper – The HTML Wrapper extension for Brackets provides a great shortcut for surrounding plain text with list item tags, anchor tags, and more.
- CanIUse – The CanIUse plugin provides a quick-access panel in Brackets where you can search for information about browser compatibility on the CanIUse website.
March 1, 2017
- embedresponsively.com helps build responsive embed codes for embedding rich third-party media into responsive web pages. — embedresponsively.com
- dabblet is an interactive playground for quickly testing snippets of CSS and HTML code — dabblet
- An online tool to display formatted source code — Syntax Highlighting
- DevDocs combines multiple API documentations in a fast, organized, and searchable interface.
November 18, 2016
Getting Started with Yarn is straightforward and of course the first thing that you need to do is install Yarn on your system. Visit Yarn’s website @ https://yarnpkg.com/ and then Click on Install Yarn button. This is going to take you to the installation instructions @ https://yarnpkg.com/en/docs/install for Yarn on your Operating System. Now Yarn needs NodeJS installed. More specifically, it needs NPM. So a lot of these installation instructions are solutions that will also install Node for you. For example, if you are on macOS by using Homebrew you can install Yarn which will also ensure that NodeJS is installed if it’s not already. If you are on Windows, if you install via Chocolatey then it will also ensure that NodeJS is installed. But if you download the installer be sure that NodeJS is installed first. Now this is just one way and chances are very good that you already have NodeJS installed on your computer. So you can install Yarn through NPM. Basically,
$ npm install -g yarn
and that’s going to give you the Yarn CLI. Once you have this installed then all you need to do is use the Yarn command and we will go over the commands that will be replacing NPM in your workflow because that’s essentially what Yarn is going to do. Now when creating a new project the first thing we do is initialize it with npm init and then we go through the process of answering questions and then we end up with a package.json file. And we essentially do the same thing with Yarn. Enter yarn init within the root of your project directory and then we answer the same questions. Now the interface looks a little bit different. Now we still end up with the same package.json file. So let’s say that we want to add React to our project. With NPM you would enter npm install –save react react-dom. With Yarn, we enter the command yarn add react react-dom. Saving is the default here. So we don’t have to say/enter that we want to save it. It is going to be default and it is going to download those dependencies for us. And it’s also going to be faster too because that’s one of the nice things about Yarn.
It’s performance actually comes from 2 separate things. The first is that everything that we install is going to be cached on our system. So whenever we want to install it with another project the first thing it is going to do is check to see if there is a new version. If it’s not new then it is going to use what we have in our cache and that is of course going to be much faster then it is by downloading it over the wire. But the second thing is that Yarn processes in parallel, NPM does not. NPM does things serially which makes sense if one task dependent upon another. But that’s not the case a lot of or even most of the time. So Yarn processes things in parallel which of course is going to be faster. Now I just added react above. Let’s remove that and we would do so by entering yarn remove react react-dom within the root of your project directory. It’s going to remove those packages. But now let’s add them. Let’s say we want to add a specific version, for e.g., version 15.3.1 of react and react-dom. So we will enter yarn add firstname.lastname@example.org email@example.com and that will install that particular version for our project.
Once this is done installing, we are going to look at not just the package.json file but another file called yarn.lock. Because the yarn.lock file is very important with Yarn. First of all the package.json file is standard. We have the dependencies listed as well as their versions. Now one of the problems with NPM is that whenever your committed this to your repository and somebody else cloned it and did npm install and of course it is going to install the dependencies but you aren’t always guaranteed to get that exact version. In some cases, it might download a patch for that version which then you have 2 people working on essentially the same project but using different dependencies and that is a huge problem. So the folks that created Yarn decided to create this lock file. If you look at yarn.lock, the very first thing it says THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. This is created by Yarn whenever you install dependencies and it specifies the package as well as the version. So this is the file that you definitely want to commit to your repository because then whoever installs the packages using Yarn is going to get the same exact packages that are mentioned within the lock file. So if you look into yarn.lock file you will see both react & react-dom of version 15.3.1 installed.
Let’s say we are ready to update to version 15.4.0. For that we enter yarn upgrade firstname.lastname@example.org email@example.com and this is going to update just those dependencies. Looking back into yarn.lock you will see those updated version numbers. So anytime you add, remove or upgrade a package, Yarn is going to update the lock file so that all the versions for all the dependencies are going to be consistent for everybody working on the same project and that is extremely important. That is also the main reason why Yarn was created to begin with. Now its worth noting that the packages that Yarn installs are from the NPM registry. There is not this new registry that have yarn packages. It’s using NPM. So in that sense there are a lot of related commands that are the exact same as NPM.
For example, we have already seen yarn init. There is also link, there is outdated, publish, run, cache clean, login, logout and test. All of these are the same commands as you would run with npm. However, Yarn has few things which NPM does not. For example, if we wanted to inspect all the licenses of our dependencies we would enter yarn licenses ls and it would list all our dependencies, their versions, their license and the URL for their repository. We can also generate our license dependency disclaimer by entering yarn licenses generate-disclaimer and that would generate that disclaimer. Finally, we can find out why we have a particular dependency. For example, let’s say we have a dependency called promise and so using yarn why promise we can see why we have this promise dependency. Running yarn why promise gives us one of the following info i.e. This module exists because “react#fbjs” depends on it.
We live in a world where there are new tools released almost on a daily basis and many of those tools are questionable. I mean there is no question that they are useful but you have to question whether or not it’s something that you want to spend time on. Well, Yarn is not one of those tools. Yes, it replicates NPM’s functionality but it also brings some very useful things to the table. I mean the performance alone is the reason to use Yarn. So install it today and use it in your workflow.