DEV Community

Cover image for Create and configure different index files in an Angular Project
Renan Ferro
Renan Ferro

Posted on

Create and configure different index files in an Angular Project

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
β”‚ 
Enter fullscreen mode Exit fullscreen mode

✡ 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>
Enter fullscreen mode Exit fullscreen mode

✡ 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>
Enter fullscreen mode Exit fullscreen mode

πŸ“Œ 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"
              },
              ...
            }
          },
          ...
        },
      }
    }
  },
}
Enter fullscreen mode Exit fullscreen mode

✡ 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",
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

✡ 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>
Enter fullscreen mode Exit fullscreen mode

πŸ₯³πŸ₯³πŸ₯³

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 πŸ˜„

Top comments (0)