diff --git a/awx/ui_next/public/index.html b/awx/ui_next/public/index.html
index 510accb63e..59a709abbf 100644
--- a/awx/ui_next/public/index.html
+++ b/awx/ui_next/public/index.html
@@ -1,7 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script nonce="{{csp_nonce}}" type="text/javascript">window.NONCE_ID = '{{csp_nonce}}';</script>
+    <% if (process.env.NODE_ENV === 'production') { %>
+      <script nonce="{{ csp_nonce }}" type="text/javascript">
+        window.NONCE_ID = '{{ csp_nonce }}';
+      </script>
+      <meta
+        http-equiv="Content-Security-Policy"
+        content="default-src 'self'; connect-src 'self' ws: wss:; style-src 'self' 'nonce-{{ csp_nonce }}' *.pendo.io; script-src 'self' 'nonce-{{ csp_nonce }}' *.pendo.io; img-src 'self' *.pendo.io data:; report-uri /csp-violation/"
+      />
+    <% } %>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
@@ -9,11 +17,14 @@
       name="description"
       content="AWX"
     />
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' ws: wss:; style-src 'self' 'nonce-{{csp_nonce}}' *.pendo.io; script-src 'self' 'nonce-{{csp_nonce}}' *.pendo.io; img-src 'self' *.pendo.io data:; report-uri /csp-violation/">
     <title>AWX</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="app" style="height: 100%"></div>
+    <% if (process.env.NODE_ENV === 'production') { %>
+      <style nonce="{{ csp_nonce }}">.app{height: 100%;}</style><div id="app" class="app"></div>
+    <% } else { %>
+      <div id="app" style="height: 100%"></div>
+    <% } %>
   </body>
 </html>
diff --git a/awx/ui_next/src/index.jsx b/awx/ui_next/src/index.jsx
index a5203370ab..8bbeb9e866 100644
--- a/awx/ui_next/src/index.jsx
+++ b/awx/ui_next/src/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './nonce';
+import './setupCSP';
 import '@patternfly/react-core/dist/styles/base.css';
 import App from './App';
 import { BrandName } from './variables';
diff --git a/awx/ui_next/src/nonce.js b/awx/ui_next/src/nonce.js
deleted file mode 100644
index 81fed45c6d..0000000000
--- a/awx/ui_next/src/nonce.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/* global __webpack_nonce__ */ // eslint-disable-line no-unused-vars
-
-// CSP: Set a special variable to add `nonce` attributes to all styles/script tags
-// See https://github.com/webpack/webpack/pull/3210
-__webpack_nonce__ = window.NONCE_ID; // eslint-disable-line no-global-assign, camelcase
diff --git a/awx/ui_next/src/setupCSP.js b/awx/ui_next/src/setupCSP.js
new file mode 100644
index 0000000000..ee4e2465ac
--- /dev/null
+++ b/awx/ui_next/src/setupCSP.js
@@ -0,0 +1,5 @@
+/* eslint-disable */
+
+// Set a special variable to add `nonce` attributes to all styles/script tags
+// See https://github.com/webpack/webpack/pull/3210
+__webpack_nonce__ = window.NONCE_ID;
