Setup Environment For Angular App

Hi Friends, This is Lakshman here.


Let's take out the first step against "Angular Best Practices".


As Initial, we will discuss best of option to "Setup Environment For Angular App Development."


Currently, there are various ways to Setup Dev-Environment in different platform. On this, we will set up for Window Platform.


In Windows:


We do hick of mistakes on installing angular dependencies by Manual in Windows.


  • Node.JS
    • Usually, we download the Current Version instead of LTS Version because we want to work on the latest technologies
    • "That First Issue."  because each angular application has its node-sass dependencies for SCSS Files which supported by LTS version, but not in Current Version. 


        Point: Always Use LTS Version of Node.JS


  • Angular CLI
    • Always install the Angular CLI If you are required to create a new Angular Project. 
    • The reason behind is every existing angular project consist of Angular-CLI inside Dev Dependencies. So we can use Npm Script to Serve, Build, Test, etc.,

 

Once Node.JS and Angular CLI Installation is Done. We will create a new Angular Project in Windows.


Let see Pros & Cons in Windows Development.


Pros :

  • Able to Setup Environment by yourself gives knowledge on the installation procedure.
  • Developing Local & Can able to Test on Mobile if its a PWA based application.


Cons

  • If, Installed Node.JS not supported for that version of the angular project.

In Windows WSL:


With the latest innovations as WSL, we can even set up in WSL Environment. 


But its Process is pretty similar to Window Installation.


  • Node.JS
  • Angular CLI.


Let see Pros & Cons in Windows WSL Development.


Pros :

  • Able to explore Linux OS.
  • I will have a separate environment where your system doesn't need any installation.
  • Once complete, we can commit files then delete the WSL.


Cons :

  • You have to initialize multiple WSL for each Angular App if Node.JS version not supported.
  • Can't able to Test on Mobile if its a PWA based application.


In Docker Container:


With the evolving platform as Docker, we can even set up our Environment using it.   


As primary, you need to follow any one option from below:

  1. In Windows.
  2. In Windows WSL.


To create an Angular project, we required Node.JS and Angular CLI.


Once we created an Angular project, we can configure to run it as a container in Docker.


My Preferred is In Windows WSL because once, we set up in Docker we can revoke the Installation of WSL Distro and Run Angular App in Window with Docker.



Pros :

  • Environment Isolation.
  • Easy for Build, Package & Deploy.
  • Can Updated Docker File if App Upgrade.

Cons :

  • It's required to build a docker image per environment for an Angular application.



On-road head, we will discuss a lot of things.


Looking forward to your comments and share your feedback.


Until that, I am Lakshman, Signing Off.


Comments

Post a Comment

Popular posts from this blog

Model Mapper in Angular

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will Model Mapper in Angular . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here Model Mapper It's a concept build based on AutoMapper from C#. While integrating with API, When we were required to map property. The Model Mapper requires Two things to do, ModelMapper Class PropertyMap Function. The ModelMapper class file as below, export class ModelMapper<T> { _propertyMapping: any; _target: any; constructor(type: { new(): T }) { this._target = new type(); this._propertyMapping = this._target.constructor._propertyMap; } map(source: any) { Object.keys(this._target).forEach((key) => { const mappedKey = this._propertyMapping[key]; if (mappedKey) { this._target[key] = source[mappedKey]; } else { this._target[key] = source[key]; } });
Read more

Implement Logging in Angular with Firebase

Hi Friends, This is Lakshman here. Welcome back to the Series Angular Best Practices Today, We will Implement Logging for your angular app . Every Application required Logging irresptive of Application. Its either Front-End or Back-End. For Back-End, we have lots of packages and SDK available for such as Serilog, Log4Net for .NET Core, Framework. However, In Front-End we need to Store your Logs somewhere in NoSQL Database where we can query the logs. Today we are going to use FireBase Cloud Database to Store our logging. As its Client-side SDK. Our other options are Application Insights (Microsoft Azure) JSLog with Seq. etc., Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here FireBase Account with Cloud Database - Click Here For Code Editor its VS Code. Implementation: We will go there the Implementation by Steps, Step 1: Create the Cloud FireBase Database - Click Here Step 2: Add Web Client for Project via Steps Step 3: Copy th
Read more

Dockerize Angular App for Dev

Hi Friends, This is Lakshman here. Welcome back to the Series Angular Best Practices Today, We will Dockerize your angular app for Development . Now as days, we develop application with multiple developers. Each one have there own Node.JS Environment. To Solve this issue we can containerize your application to run inside Docker. Pre-requisites: The pre-requisites are Install Docker - Click Here Node.JS - Click Here Angular CLI - Click Here Once Install Docker & Node.JS install Angular CLI via NPM Package Manager. Implementation: On your Existing Angular Application, Create a File Called Dockerfile.Dev Dev indicates for Development Docker File. Inside that Dockerfile.Dev, Copy the below code # Create a new image from the base nodejs 12.7 image. FROM node:12.7-alpine # Create the target directory in the image RUN mkdir -p /usr/src/app # Set the created directory as the working directory WORKDIR /usr/src/app # Copy the package.json inside the working directory COPY
Read more