Prerequisites

In this article, I will provide a minimal list of required software.

As I already mentioned in the intro section, the base of the development process is the Node.js environment. So, let's start from here.

Node.js

The Node.js is an open-source, cross-platform run-time environment for JavaScript (read as "run JavaScript outside of the browser").

Also, the Node.js allows creating JavaScript-powered back-end solutions!

Moreover, with the power of workers, you can build multi-threaded applications with the Node.js (yes, this can also be used in some modern browsers).

But in our case, the most important thing is that the NPM (node package manager) also will be installed into the system.

NPM is a tool that will install all the required packages.

Yarn

Yarn is also a package manager, and it uses NPM as a base to operate.

So, why use Yarn?

First of all, Yarn is much faster than NPM.

Secondly, Yarn recreates exact dependencies on each developer station. Thus you will avoid situations when the application perfectly works only on your computer, while others are unable to build/compile/whatever because of the broken dependencies.

Lastly, Yarn evolves at its own pace. It is common that features at first appearing in Yarn and after they are adopted by NPM (.lock files, for example).

IDE Visual Studio Code

The acronym IDE stands for the Integrated Development Environment.

The goal of using IDE is to boost the development process.

So, what're the core differences between a text editor and an IDE?

Of course, no one can require you to work in a specific IDE, unless you're bound by some corporate rules.

Also, I know people who are writing enterprise-level code using VIM, and they can hold in their memory several hundreds of source files.

But the above statements are edge cases and, thus, you are free to choose what fits you most.

From a wide specter of solutions available on the market, I've chosen the Visual Studio Code (VSC) as my daily environment.

I'm performing a lot of tasks with the help of the VSC. For example, this post is written in this IDE.

The below table explains why I'm using VSC.

Git

According to the git's homepage:

Git is a free and open-source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

The version control is a very important aspect of the development process, even if your project is small and you are working alone.

Git is also a good fit for development by a team of any size, even if a team is distributed.

Work is performed in separate branches. These branches are usually created to perform a specific type of work: new feature, bug fix, refactoring, etc. Later on, these branches are merged together into a higher-level branch.

The git-flow cheatsheet will give you more details.

Angular

To start a new Angular project follow these steps.

First, install an Angular CLI via NPM.

npm install -g @angular/cli

Or using Yarn:

yarn add global @angular/cli

Second, create a new project:

ng new app

Before the creation, Angular will ask you about the basic features of the new project.

The first question is about enabling Angular routing in your project (default option is no).

The second question is about CSS handling (default option is pure CSS).

The output will look like this:

ng new app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use?
  CSS
> SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org                                             ]
  Stylus [ http://stylus-lang.com                                         ]

After all of the required operations are done, go to the project folder.

cd app

Finally, run the project!

ng serve

Optionally you can provide --open flag, which will open your default browser once the project is ready to start.

ng serve --open

To get a list of available commands run the following:

ng help

Bootstrap

To build applications fast, one should use CSS component library.

My favorite is Bootstrap!

So, to add this component library to your project start CLI anywhere inside your project's folder and install it via NPM:

npm install bootstrap

Or via Yarn:

yarn add bootstrap

As an alternative to the Bootstrap, you can use the Tailwind CSS.

Font Awesome

One more thing you can to do is to install the Font Awesome, though this step is optional.

This toolkit will allow you to add awesome SVG icons into your project.

Which, in turn, will enrich the visual experience and will add a neat look to your project.

Anywhere inside your project's folder run:

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesome

Or via Yarn:

yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesome

Here goes short description for each package installed:

@fortawesome/fontawesome-svg-core - the toolkit itself.

@fortawesome/free-brands-svg-icons - the set of free branded icons, such as Google, Twitter, Facebook, etc.

@fortawesome/free-regular-svg-icons - the set of free regular icons.

@fortawesome/free-solid-svg-icons - the set of free solid icons.

@fortawesome/angular-fontawesome - this is a wrapper library for use in Angular projects.

You can browse the icons here.