Building an Angular Application in various environments using angular-CLI and server.

This blog explains how to build an angular application with multiple environments within the application and server side where the angular-CLI command is unknown. This also guides you in using custom terminal commands in the angular application.

……… Welcome to the Elevator of adventure { Angular Application } ………

Hi, I am the helper on this elevator and am here to guide you to use this efficiently. As it is not an ordinary one, it has some excellent benefits that you can’t imagine. For example, could you ever think of an elevator that can even work without power? If you don’t, I can show you that in this short journey in this elevator. Let’s get into the Elevator of Adventure.

One Additional piece of information, I will stop this elevator for each floor, and finally, we will reach the terrace. You can visit each floor patiently and I have a surprise for those who come to the terrace with me!

Building the application is a mandatory requirement before the deployment of the application. So I explained the building process for multiple environment files step by step below :

As with other usual elevators, our elevator will also drop you off on which floor you choose by pressing the button.

If we have more than one environment in our angular application, We need to additionally mention the configuration of the environment which we need to build.

ng build --configuration=environment_name 

Example:

Consider that I have three environments like qa for testing , dev for development, and prod for production as below:

If I want to build the development environment, I need to run the below command :

ng build --configuration=development

NOTE: We can find the environment_name in the angular.json file under configurations of the project build as below:

As I said earlier, this elevator has lots of things that can make you feel wow! Usual elevators will not move until you choose the floor. But the elevator of Adventure can drop you even if you don’t choose anything.

The “ ng build ” command builds the production environment as default for angular versions 12 and higher and for other versions it builds the development environment as default.

Example:

I have set up various base URLs for each environment as below. If run the ‘ng build’, the application will trigger the development environment URL as default because I am using the angular version 11.

We can find the setup for “defaultConfiguration” in the angular.json file in later versions ( version 12 and above ) as below:

Here we reached the FIRST floor! Go and visit 👇

Building an Angular application

Oh! oh! The power is gone in the elevator

Angular-CLI will not work on server

But don’t worry as it is a special one, we have an alternative button. It’s time to use that.

So we should use the below command to deploy an angular appliaction in the server .

npm run build

Okay, Listen! now I am going to press the alternative button which will make the elevator run without power.

The application is built successfully as below:

Did you notice the sound when I press the button?

A command is running as I run the ‘ npm run build ’ . This is defined in the scripts which is under package.json file as below :

This is a toolbox that controls the elevator even without power.

The “ scripts ” property under the package.json file supports the built-in scripts. To run the scripts we should use “ npm run “.

Example:

If we run “ npm run test “, the command for “ test ” will be executed that is “ ng test ”

We can go to any floor we want even without power when we press the desired button.

We can build any environment if we gave multiple, by specifying the configuration as we did for normal ng build as below:

npm run build -- --configuration environment_name OR
npm run build -- --c environment_name

Example:

If I need to build the “ qa ” testing environment through the server I must specify the command as follows:

npm run build -- --c qa

Here we reached the SECOND floor! Go and visit 👇

Handling multiple environment files in Angular Applications.

Can you believe that we can change the button according to our wish? We can do it as below:

We can set our custom commands with the help of the scripts property in the package.json file. So, we can now add the script that we expect to run as a value and the command is property name in the scripts property.

Example: 1 → Defining own word for the “ ls ” command in scripts

I believe Harry Potter fans can relate to this below command.

accio  ( example only )

Funs apart, this is useful when we use this in building various environments. We can specify our own commands as below in scripts as below:

Example: 2 → Defining the custom commands for server-side build :

If we want to build the application on the server side with easier terminal commands, we can set that like the below:

Here we reached the THIRD floor! Go and visit 👇

Angular project-Important files & folders.

Finally, we reached the terrace which is loved by all of us. So, as I already said that I have a surprise for those who traveled with me to this terrace. I believe everyone will love this too as we love the terrace.

Here I give you the Elevator of adventure to your home 👇 . Don’t ignore sharing your opinion on this journey. Have an adventurous journey 🥳.

Angular project setup

→→→→→→→→→→ Elevate your skills to the extreme ←←←←←←←←←←