Add debug explainer.

danskernesdigitalebibliotek · Jun 2, 2021 · d5b5ca5 · d5b5ca5
1 parent 04a8e77
commit d5b5ca5
Showing 1 changed file with 17 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -462,7 +462,7 @@ This overwrites your global user settings for this workspace and suggests som ex
 There are two ways to use the components provided by this project:
 
 1. As standalone JavaScript applications mounted within HTML pages generated by a separate system.
-2. As components within a larger JavaScript application (Under development)
+2. As components within a larger JavaScript application (Under development).
 
 ### Naive app mount
 
@@ -487,7 +487,7 @@ A simple example of the required artifacts and how they are used looks like this
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Naive mount</title>
     <!-- Include CSS files to provide default styling -->
-    <link rel="stylesheet" href="/dist/components.css">
+    <link rel="stylesheet" href="/dist/production/components.css">
 </head>
 <body>
     <b>Here be dragons!</b>
@@ -496,12 +496,12 @@ A simple example of the required artifacts and how they are used looks like this
     <div data-ddb-app='a-none-existing-app'></div>
 
     <!-- Load order og scripts is of importance here -->
-    <script src="/dist/runtime.js"></script>
-    <script src="/dist/polyfills.js"></script>
-    <script src="/dist/bundle.js"></script>
-    <script src="/dist/mount.js"></script>
+    <script src="/dist/production/runtime.js"></script>
+    <script src="/dist/production/polyfills.js"></script>
+    <script src="/dist/production/bundle.js"></script>
+    <script src="/dist/production/mount.js"></script>
     <!-- After the necessary scripts you can start loading applications -->
-    <script src="/dist/add-to-checklist.js"></script>
+    <script src="/dist/production/add-to-checklist.js"></script>
     <script>
       // For making successful requests to the different services we need one or more valid tokens.
      window.ddbReact.setToken("user","XXXXXXXXXXXXXXXXXXXXXX");
@@ -592,6 +592,11 @@ export function WithoutData() {
 ```
 </details>
 
+#### Debug
+
+Replace `/dist/production/` with `/dist/debug/` and you will have inline
+source-maps, React Developer Tools and Redux DevTools.
+
 ### React components
 
 Applications in the project may also be used within larger React applications.
@@ -619,11 +624,11 @@ import "@danskernesdigitalebibliotek/ddb-react/components.css";
 
 const rootElement = document.getElementById("root");
 ReactDOM.render(
-        <React.StrictMode>
-          <b>Here be dragons!</b>
-          <AddToCheckListEntry text="Chromatic dragon" errorText="Minor mistake" />
-        </React.StrictMode>,
-        rootElement
+  <React.StrictMode>
+    <b>Here be dragons!</b>
+    <AddToCheckListEntry text="Chromatic dragon" errorText="Minor mistake" />
+  </React.StrictMode>,
+  rootElement
 );
 ```
 </details>