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?
| IDE | Text editor |
|---|---|
| Highlighting keywords, operators and syntax errors of the selected language. | Autocorrect misspelled words. |
| Linting code | Highlight syntax errors. |
| Running tests. | Rich styling capabilities. |
| Format code by best practices, user preferences, etc. | |
| Provide reference data for data from external files (so-called intelliSense). | |
| Run required scripts. | |
| Deploying your code. | |
| Working with version control systems. | |
| Managing your files to organize a project. | |
| Debugging your code. | |
| Working with package managers. |
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.
| Pros | Cons |
|---|---|
| It's an open-source solution. | I don't know yet. |
| It has a rich market of extensions. | |
| It doesn't require third-party software/packages/etc. | |
| It is a cross-platform product. | |
| It's available online (e.g, https://codesandbox.io/). | |
| It is a highly customizable IDE (customizations include themes, keymapping, automation scripts, scheduled scripts, icons for the file explorer, etc.). | |
| It has a built-in terminal. | |
| It has built-in support of git. | |
| It is translated into many languages. | |
| Microsoft team is the main developer and maintainer of the project. | |
| You can improve this IDE by contributing. | |
| I'm in love with this IDE. |
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.
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.