React'de index.html Koşullu Render

Bazı durumlarda public/index.html dosyasında development ve production ortamı için ayrı kodlar çalıştırmak isteyebilirsiniz.

Örneğin analytics kodlarını sadece production ortamında yani build aldığınızda çalışsın isteyebilirsiniz, bu durumda şöyle koşullu işlem yapabilirsiniz:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
    
    <!-- Sadece production Ortamında yüklensin -->
    <% if (process.env.NODE_ENV === 'production') { %>
        <!-- Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=<YOUR_ID>"></script>
    <% } %>
    
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

Editörde Görüntüle