Angular 14 Build Once Deploy Any Server

In general, when we develop software, it passes through several stages such as UAT, QA, and Pilot, and finally goes live. It is also necessary to deploy the project across multiple servers. As a result, a technique known as “Build once, deploy anywhere” has emerged. It saves all of your server credentials in an environment file. When it comes time to deploy it, you build it once, modify the server credentials, and simply deploy it.

As it happened, I was thinking about it and found some ideas on the internet, some of which made sense and others that didn’t. I’ll try to give a brief overview of how I achieved it in my project.

Before we start, first read one of the most sacred quotes about programming, “Programming isn’t about what you know, it’s about what you can figure out.”

Let’s Start,

Create an Angular Project:

create a new angular project: ng new app-name

run the project: ng serve -o

After you run the project it will show you an angular default template containing documentation on Angular.

As it was my requirement, I’m going to add the server-side IP and port dynamically. You can simply add any variables you want to use for the various deployments you require. Such as the Project Name, the Server Side IP and PORT, and so on.

To do that you need to create an env.js file.

2. Create an env.js File in your src directory and link it to your project:

Create an env.js file in your project’s src folder, and include the following lines of code in the file. Make sure the variable name’s prefix begins with windows. __env.variableName.

Next, you need to add this js file to your index.html and angular.json files.

Now you’re gonna need a service to inject your variables into your application after the build.

3. Create a Service and Service provider for your env:

create a service in your src/app directory, ng g s app/service/env

it will create a service and make one more file manually in the service directory named, env.service.provider.ts

now your service(env.service) gonna need to have all the variables you put in your env.js file for your default variables basically these variables will be used during your development time.

now you need to add codes for your service provider which will be adding your env variables to your application after the build.

4. Register and Import your Service to the app module:

since I used 2 variables in the env.service and env.js files I will use one for the name of my project and another one will for the server-side API calls.

dynamic project name in the app.component file

Note: By the time I finished writing this, I moved my codes to my main project if you’re wondering about the last screenshot it was taken from a webstorm project. :)

Lastly, if you are wondering what happened to environment.ts and environment.prod.ts, Here it is,