Hey guys, how are you!?

In this article, you'll learn how to create and configure different index files to use in your Angular project!

This can be useful for you, because if you have a staging/testing environment and a production environment, you can isolate scripts (like GTM - Google Tag Manager, HotJar or whatever!) in each environment of your project for each one of them have the script they need!

For example, if you have a GTM (Google Tag Manager) for approval/tests and one for production!

Let's start it!

📌 Configuring the structure files

✵ Create the index file:

First, in your src folder you need to create two files: index.stg.html for our homologation/test environment and index.prd.html for our production environment!

Our application structure will look like below:

├── src
│   ├── app
│   ├── assets
│   ├── environment
│   ├── index.html
│   ├── index.stg.html
│   ├── index.prd.html
│

✵ Index code for Homologation/Test environment:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Angular Project</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

✵ Index code for Production environment:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Angular Project</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

📌 Configuring the build/scripts

In your angular.json file, we need to create a build configuration for the homologation/test and production environment, so that the configurations are applied!
In our case, we will configure an input and output for the index file and the code will look like below:

✵ Configuring the `angular.json` file:

{
 "projects": {
    ...
    "my-angular-app": {
      "architect": {
        "build": {
          "configurations": {
            "environment-stg": {
              ...
              "index": {
                "input": "src/index.stg.html",
                "output": "index.html"
              },
              ...
            },
            "environment-prd": {
              ...
              "index": {
                "input": "src/index.prd.html",
                "output": "index.html"
              },
              ...
            }
          },
          ...
        },
      }
    }
  },
}

✵ Configuring the `package.json` file:

Now, we need to create some scripts to run the approval/tests and production build configuration, so the code is as below:

{
  ...
  "scripts": {
    ...
    "build:environment-stg": "ng build --configuration=environment-stg",
    "build:environment-prd": "ng build --configuration=environment-prd",
  }
}

Now we can use the index file of each environment for the proper environment and use scripts or anything else, like a GTM (Google Tag Manager) and that the configuration placed is only used in the environment we want!

📌 Use case with different index files:

✵ Staging Code:

<!doctype html>
<html lang="en">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-STAGING-CODE');    
 </script>
  <!-- End Google Tag Manager -->
  <meta charset="utf-8">
  <title>My Angular Project</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-STAGING-CODE"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
  <app-root></app-root>
</body>
</html>

✵ Production Code:

<!doctype html>
<html lang="en">
<head>
  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||. [];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PRODUCTION-CODE');</script>
<!-- End Google Tag Manager -->
  <meta charset="utf-8">
  <title>My Angular Project</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PRODUCTION-CODE"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
  <app-root></app-root>
</body>
</html>

🥳🥳🥳

And that's all folks! We now have different index files to use with each environment of our application, like staging and production!

With that we don't need to be doing validations, methods to insert scripts because we have the proper index files!

I hope you guys enjoyed it, and if you have anything to say/suggest/criticize please comment!

See you soon 😄

Create and configure different index files in an Angular Project