How to include script tag inside react app based on environment variable

Question

I am trying to include a script tag with some code inside based on an environment variable on a react project.

Let's say that I want the following code to load if the certain env variable is matched.

<script type="text/javascript">

var something = function() {
 // some code
}

something()

</script>

I can access the value of evn variable in the HTML file so I could create a script tag using document.createElement('script') dynamically based on the value but that way I am only able to create a script tag but not content inside the script tag. Is there any way I can create the script tag and also insert some code inside that script tag?

I basically want to load the script tag above including the code inside on domcontentloaded event.

Why can't you just execute the code inside the script tag within React? — ceejayoz
– ceejayoz, Commented Aug 6, 2019 at 20:49
You can import your script instead of creating DOM element with script. See import — Jax-p
– Jax-p, Commented Aug 6, 2019 at 20:51
You can create content inside the result of document.createElement('script') by setting its textContent property... — Heretic Monkey
– Heretic Monkey, Commented Aug 6, 2019 at 20:52

Michael · Accepted Answer · 2019-08-06 20:54:48Z

1

Here is one way:

 <script type="text/javascript">
 if(navigator.appName == 'Microsoft Internet Explorer') {
    document.write("<script tag here>");
 } else {
 document.write("<other script tag here>");
 }
</script>

Another way is to define whatever source is and assign attributes dynamically using JS:

// Create 2 .JS files and apply whatever conditional logic here to 
set the src attribute
var src = navigator.appName == "Load one.js" ?

"one.js" : "two.js";

var script = document.createElement("script");
script.setAttribute("src", src);
document.getElementsByTagName("head")[0].appendChild(script);

And finally, if you're already using JQuery in your project you can use $.getScript() to load a JS file from the server using GET: https://api.jquery.com/jQuery.getScript/

answered Aug 6, 2019 at 20:54

Michael

1673 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jaisa Ram · Accepted Answer · 2020-03-10 03:13:55Z

1

Its support ejs there although. add this in head tag, it works-

<% if (process.env.NODE_ENV === 'production') { %>
  <script>
    // my GA script
  </script>
<% } %>

answered Mar 10, 2020 at 3:13

Jaisa Ram

1,76715 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to include script tag inside react app based on environment variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related