Welcome to today’s post.
In today’s post I will be showing how setup the tools and environment for a full-stack development environment using the following tools:
- Angular front-end framework
- Visual Studio 2019
- SQL Server 2019
I will split this post into the following sections:
- Front-End development tools
- Mid-tier development tools
- Backend development tools
The details that follow will be quite similar for later versions of the above tools that will be accessible in the same sites of the links that I mention.
Front-End Development Tools
The development tools to use for full-stack development can vary quite significantly depending on the development technology stack you end up using. In this post I will be explaining how to install the following technologies:
- Angular front-end framework library to develop the client-side interface.
- Node.js NPM package for server-side JavaScript libraries.
- RxJS third-party asynchronous NPM package.
- Visual Studio Code development IDE to develop client-side interfaces using TypeScript, JavaScript, Node.js, and Angular libraries.
- Visual Studio 2019 Community for developing Web API services with .NET Core and C#.
Even though I am using Angular for the front-end, you are not limited to this. In fact, you can use any JavaScript front-end framework or library you are most confident with including React or Vue. It should not make any difference to how your middle-tier components and services are installed. In all the above front-end web scripting frameworks and libraries the use of the Visual Studio Code IDE is an ideal tool to use for integrated front-end development and debugging.
I will now go through the process of installing each of the above components.
Installing Visual Studio Code
To install Visual Studio Code, you will need to download the installer, which is on the following site:
https://code.visualstudio.com/
Select the Windows x64 version (for a Windows 10 machine) build to download.
Once downloaded, install the application.
Once installed open Visual Code application and check it opens satisfactorily.
Installing Node.js
To install Node.js, you will need to first go to the Node.js site:
https://nodejs.org/en/
Once there, you select the LTS version for Windows x64 and download it.
Once downloaded, install it.
Installing Angular Development Framework
Once you have installed Node.js, you will be ready to install the Angular development packages from within the Visual Code IDE.
The Angular development framework resources are at the following site:
https://angular.io/
The first thing we do is install the Angular CLI. We do this by running the command:
npm install -g @angular/cli
Once this installation is complete, you will then be ready to create and develop Angular applications from within Visual Code or load, run and modify existing Angular applications.
Creating a Basic Angular Application
A basic Angular application can be created with the following CLI command:
ng new my-app
Application Structure
Once a new application has been created, the structure will look as shown:
The bare bones Angular application structure will consist of the following artifacts:
- A src folder containing the base app component.
- An application module file, app.module.ts.
- An application routing module file, app.routing.ts.
- An application configuration file, angular.json containing the application configuration settings.
- An application package configuration file, package.json containing a list of development and production package library references to library NPM library versions including Angular core, optional and third-party packages.
I will not go into length the details of each artifact, as I assume you would have built basic Angular applications before and understand from a practical and maintenance viewpoint how to use the above files and structures.
Middle-Tier Development Tools
To develop middle-tier applications within a full-stack environment the open-source .NET Core Framework, which can be run within multi-platform on Windows, Mac, or Linux operating systems. The .NET Core library is a popular development library that is continually evolving and has backing from Microsoft as the development library of choice for multi-platform on premise hosted servers, but also in the Azure Cloud environment. In particular, the Visual Studio 2019 Community IDE is an open-source free download that is available from the following link:
https://visualstudio.microsoft.com/downloads/
The downloads page is shown below:
After download and installation, there are numerous packages that can be installed through the NuGet packages that are searchable in the Visual Studio Package Manager. These packages allow you to extend the basic .NET Core application to use many other extensions and features that include:
- ASP.NET Core Web API and ASP.NET Core MVC Web Applications
- Entity Framework Core
- Azure PaaS integration with Azure Functions, Web Jobs, App Services
- ASP.NET Core Identity Services
- MS Graph API
- Signal R
- Docker Support
- Messaging integration with Azure Service Bus
- Hosted Services and Windows Services
- Unit Testing with NUnit and MSTest.
- Swagger Open API
There is also built-in integration with source version control tools such as Git and Azure DevOps.
Back-End Development Tools
The most common backend server tool you will need is a relational database server which can be downloaded as either an Express or Developer Edition. Both editions as free for developers to download, use and experiment.
The URL link for these editions is as follows:
https://www.microsoft.com/en-us/sql-server/sql-server-downloads
The download page for developer and express versions is shown below:
Another tool that is required with the above database server is the SQL Server Management Studio, or SSMS. This tool is available from the following URL:
Another useful tool, SQL Server Data Tools or SSDT allows you to create Visual Studio projects for SQL Server Reporting (SSRS), and SQL Server Integration Services (SSIS).
Since Visual Studio 2017, the SSDT tool can be downloaded as part of the Visual Studio Installer Workload.
If you are using Visual Studio 2017, there is a standalone installer for SSDT for Visual Studio 2017.
Once these tools are installed, you can commence development of full-stack web applications using a front-end scripting tool and backend tools. My tools of choice for the backend are Microsoft centered as I have used them for almost all my career.
Once you have installed the above tools you can refer to my posts for ideas on front-end and backend development including Angular, Visual Studio, .NET Core, Azure Cloud and SQL Server.
That is all for today’s post.
I hope you found this post useful and informative.
Andrew Halil is a blogger, author and software developer with expertise of many areas in the information technology industry including full-stack web and native cloud based development, test driven development and Devops.
