Recommended web development tools

This section covers the recommended tools that are needed to start developing a web application.

Tool	Description	URL
Git	Version Control System	https://git-scm.com
GitHub Desktop	Graphical User Interface (GUI) to run Git commands and interact with GitHub	https://desktop.github.com
Node.js	Cross-platform JavaScript runtime environment	https://nodejs.org
Visual Studio Code	Cross-platform Integrated Development Environment (IDE)	https://code.visualstudio.com
Docker Desktop	Lightweight container virtualization platform	https://www.docker.com/products/docker-desktop

To automatically install all the web development tools required for this book, execute the following commands for your OS to configure your environment.On Windows PowerShell, execute:

PS> Install-Script -Name setup-windows-dev-env 
PS> setup-windows-dev-env.ps1

On MacOS Terminal, execute:

$> bash <(wget -O - https://git.io/JvHi1)

For more information refer to https...

CLI package managers

Installing software through a Graphical User Interface (GUI) is slow and challenging to automate. As a full-stack developer, whether you're a Windows or a Mac user, you must rely on Command-Line Interface (CLI) package managers to efficiently install and configure the software you depend on.

Anything that can be expressed as a CLI command can also be automated.

Installing Chocolatey for Windows

Chocolatey is a CLI-based package manager for Windows that can be used for automated software installation. To install Chocolatey on Windows, you need to run an elevated command shell:

1. Launch the Start menu
2. Start typing in PowerShell
3. You should see Windows PowerShell Desktop App as a search result
4. Right-click on Windows PowerShell and select Run as Administrator
5. This triggers a User Account Control (UAC) warning; select Yes to continue
6. Execute the install command found at https://chocolatey.org/install
7. in PowerShell to install the Chocolatey package manager:

PS>...

Setup automation for Windows and macOS

Remember, anything that can be expressed as a CLI command can also be automated. Throughout the setup process, we have ensured that every tool being used was set up and its functionality was verifiable through a CLI command. This means we can easily create a PowerShell or bash script to string these commands together and ease the task of setting up and verifying new environments.Let's implement rudimentary but effective scripts to help set up your development environment.

PowerShell script

For Windows-based development environments, you need to create a PowerShell script.

1. Create a file named setup-windows-dev-env.ps1
2. Insert the following text, also available at https://github.com/duluca/ web-dev-environment-setup, in the file:

setup-windows-dev-env.ps1
# This script is intentionally kept simple to demonstrate basic automation techniques.
Write-Output "You must run this script in an elevated command shell, using 'Run as Administrator...

The Angular CLI

The Angular CLI tool, ng, is an official Angular project to ensure that newly created Angular applications have a uniform architecture, following the best practices perfected by the community over time. This means that any Angular application you encounter going forward should have the same general shape.

Nx tools are popular in the Enterprise app development space to scaffold, generate, and maintain Angular applications. You can learn more about Nx at https://nx.dev.

Setting up your development directory

Setting up a dedicated dev directory is a lifesaver. Since all the data under this directory is backed up using GitHub, you can safely configure your antivirus, cloud sync, or backup software to ignore it. This helps significantly reduce CPU, disk, and network utilization. As a full-stack developer, you're likely to be multitasking a lot, so avoiding unnecessary activity has a net positive impact on performance, power, and data consumption daily, especially if...

Optimizing VS Code for Angular

It is essential to optimize your IDE to have a great development experience. If you leverage the automated tools that I present in this section, you can quickly configure your IDE and your Angular project with dozens of settings that work well together.

Configuring your project automatically

To quickly configure your Angular application and VS Code workspace, run the following commands:

1. Install the Angular VS Code task:

npm i -g mrm-task-angular-vscode

1. Apply the Angular VS Code configuration:

npx mrm angular-vscode

1. Install the npm Scripts for the Docker task:

npm i -g mrm-task-npm-docker

1. Apply the npm Scripts for Docker configuration:

npx mrm npm-docker

These settings are continually tweaked to adapt to the ever-evolving landscape of extensions, plugins, Angular, and VS Code. Always make sure to install a fresh version of the task by rerunning the install command to get the latest version.

1. Execute npm run style:fix
2. Execute npm run lint...

Summary

In this appendix, you mastered the use of CLI-based package managers for both Windows and macOS to speed up and automate the setup of development environments for you and your colleagues. You also created your first Angular project and optimized its configuration for development using Visual Studio Code. You then implemented automated style checkers and fixers to enforce coding standards and styling across your team. The lint checker and fixer you implemented will automatically catch potential coding errors and maintainability issues.The automated scripts you have created codify your team norms and document them for new and existing members alike. By reducing variance from one developer's environment to the next, your team can overcome any individual configuration issue more efficiently and remain focused on the execution of the task at hand. With a collective understanding of a common environment, no single individual on the team carries the burden of having to help troubleshoot...

Further reading

The article on Automating the Setup of the Local Developer Machine by Vishwas Parameshwarappa is a great place to start for using Vagrant, found at https://www. vagrantup.com. You can find the article at https://Red-gate.com/simple-talk/ sysadmin/general/automating-setup-local-developer-machine.Other tools include Chef, found at https://www.chef.io/, and Puppet, found at https://puppet.com. Some developers prefer to work within Docker containers during coding, found at https://www.docker.com. This is done to isolate different versions of SDKs from each other. Specific development tools cannot be scoped to a given folder and must be installed globally or OS-wide, making it very difficult to work on multiple projects at the same time. I recommend staying away from this type of setup if you can avoid it. In the future, I expect such chores are going to be automated by IDEs, as CPU core counts increase, and virtualization tech has better hardware acceleration.

Questions

Answer the following questions as best as you can to ensure that you've understood the key concepts from this chapter without Googling. Do you need help answering the questions? See Appendix D, Self-Assessment Answers online at https://static. packt-cdn.com/downloads/9781838648800_Appendix_D_Self-Assessment_ Answers.pdf or visit https://expertlysimple.io/angular-self-assessment.

1. What are the motivations for using a CLI tool as opposed to a GUI?
2. For your specific operating system, what is the suggested package manager to use?
3. What are some of the benefits of using a package manager?
4. What are the benefits of keeping the development environments of the members of your development team as similar to one another as possible?