nautobot 2.0.0a3__py3-none-any.whl → 2.0.0b1__py3-none-any.whl

nautobot/project-static/docs/development/getting-started.html

@@ -1346,12 +1346,1166 @@
       
       
         <label class="md-nav__link" for="__nav_2_8" id="__nav_2_8_label" tabindex="0">
+          Model Details
+          <span class="md-nav__icon md-icon"></span>
+        </label>
+      
+      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_8_label" aria-expanded="false">
+        <label class="md-nav__title" for="__nav_2_8">
+          <span class="md-nav__icon md-icon"></span>
+          Model Details
+        </label>
+        <ul class="md-nav__list" data-md-scrollfix>
+          
+            
+              
+  
+  
+  
+    
+    <li class="md-nav__item md-nav__item--nested">
+      
+      
+      
+      
+      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_8_1" >
+      
+      
+      
+        <label class="md-nav__link" for="__nav_2_8_1" id="__nav_2_8_1_label" tabindex="0">
+          Circuits
+          <span class="md-nav__icon md-icon"></span>
+        </label>
+      
+      <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_8_1_label" aria-expanded="false">
+        <label class="md-nav__title" for="__nav_2_8_1">
+          <span class="md-nav__icon md-icon"></span>
+          Circuits
+        </label>
+        <ul class="md-nav__list" data-md-scrollfix>
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/circuits/circuit.html" class="md-nav__link">
+        Circuit
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/circuits/circuittermination.html" class="md-nav__link">
+        Circuit Termination
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/circuits/circuittype.html" class="md-nav__link">
+        Circuit Type
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/circuits/provider.html" class="md-nav__link">
+        Circuit Provider
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/circuits/providernetwork.html" class="md-nav__link">
+        Circuit Provider Network
+      </a>
+    </li>
+  
+
+            
+          
+        </ul>
+      </nav>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    
+    <li class="md-nav__item md-nav__item--nested">
+      
+      
+      
+      
+      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_8_2" >
+      
+      
+      
+        <label class="md-nav__link" for="__nav_2_8_2" id="__nav_2_8_2_label" tabindex="0">
+          DCIM
+          <span class="md-nav__icon md-icon"></span>
+        </label>
+      
+      <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_8_2_label" aria-expanded="false">
+        <label class="md-nav__title" for="__nav_2_8_2">
+          <span class="md-nav__icon md-icon"></span>
+          DCIM
+        </label>
+        <ul class="md-nav__list" data-md-scrollfix>
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/cable.html" class="md-nav__link">
+        Cable
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/consoleport.html" class="md-nav__link">
+        Console Port
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/consoleporttemplate.html" class="md-nav__link">
+        Console Port Template
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/consoleserverport.html" class="md-nav__link">
+        Console Server Port
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/consoleserverporttemplate.html" class="md-nav__link">
+        Console Server Port Template
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/device.html" class="md-nav__link">
+        Device
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/devicebay.html" class="md-nav__link">
+        Device Bay
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/devicebaytemplate.html" class="md-nav__link">
+        Device Bay Template
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/deviceredundancygroup.html" class="md-nav__link">
+        Device Redundancy Group
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/devicetype.html" class="md-nav__link">
+        Device Type
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/frontport.html" class="md-nav__link">
+        Front Port
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/frontporttemplate.html" class="md-nav__link">
+        Front Port Template
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/interface.html" class="md-nav__link">
+        Interface
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/interfacetemplate.html" class="md-nav__link">
+        Interface Template
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/inventoryitem.html" class="md-nav__link">
+        Inventory Item
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/location.html" class="md-nav__link">
+        Location
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/locationtype.html" class="md-nav__link">
+        Location Type
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/manufacturer.html" class="md-nav__link">
+        Manufacturer
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/platform.html" class="md-nav__link">
+        Platform
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/powerfeed.html" class="md-nav__link">
+        Power Feed
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/poweroutlet.html" class="md-nav__link">
+        Power Outlet
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/poweroutlettemplate.html" class="md-nav__link">
+        Power Outlet Template
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/powerpanel.html" class="md-nav__link">
+        Power Panel
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/powerport.html" class="md-nav__link">
+        Power Port
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/powerporttemplate.html" class="md-nav__link">
+        Power Port Template
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/rack.html" class="md-nav__link">
+        Rack
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/rackgroup.html" class="md-nav__link">
+        Rack Group
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/rackreservation.html" class="md-nav__link">
+        Rack Reservation
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/rearport.html" class="md-nav__link">
+        Rear Port
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/rearporttemplate.html" class="md-nav__link">
+        Rear Port Template
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/dcim/virtualchassis.html" class="md-nav__link">
+        Virtual Chassis
+      </a>
+    </li>
+  
+
+            
+          
+        </ul>
+      </nav>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    
+    <li class="md-nav__item md-nav__item--nested">
+      
+      
+      
+      
+      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_8_3" >
+      
+      
+      
+        <label class="md-nav__link" for="__nav_2_8_3" id="__nav_2_8_3_label" tabindex="0">
+          Extras
+          <span class="md-nav__icon md-icon"></span>
+        </label>
+      
+      <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_8_3_label" aria-expanded="false">
+        <label class="md-nav__title" for="__nav_2_8_3">
+          <span class="md-nav__icon md-icon"></span>
+          Extras
+        </label>
+        <ul class="md-nav__list" data-md-scrollfix>
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/extras/configcontext.html" class="md-nav__link">
+        Config Context
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/extras/configcontextschema.html" class="md-nav__link">
+        Config Context Schema
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/extras/graphqlquery.html" class="md-nav__link">
+        GraphQL Query
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/extras/imageattachment.html" class="md-nav__link">
+        Image Attachment
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/extras/job.html" class="md-nav__link">
+        Job
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/extras/joblogentry.html" class="md-nav__link">
+        Job Log Entry
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/extras/jobresult.html" class="md-nav__link">
+        Job Result
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/extras/role.html" class="md-nav__link">
+        Role
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/extras/secret.html" class="md-nav__link">
+        Secret
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/extras/secretsgroup.html" class="md-nav__link">
+        Secrets group
+      </a>
+    </li>
+  
+
+            
+          
+        </ul>
+      </nav>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    
+    <li class="md-nav__item md-nav__item--nested">
+      
+      
+      
+      
+      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_8_4" >
+      
+      
+      
+        <label class="md-nav__link" for="__nav_2_8_4" id="__nav_2_8_4_label" tabindex="0">
+          IPAM
+          <span class="md-nav__icon md-icon"></span>
+        </label>
+      
+      <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_8_4_label" aria-expanded="false">
+        <label class="md-nav__title" for="__nav_2_8_4">
+          <span class="md-nav__icon md-icon"></span>
+          IPAM
+        </label>
+        <ul class="md-nav__list" data-md-scrollfix>
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/ipam/ipaddress.html" class="md-nav__link">
+        IP Address
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/ipam/prefix.html" class="md-nav__link">
+        Prefix
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/ipam/rir.html" class="md-nav__link">
+        Rir
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/ipam/routetarget.html" class="md-nav__link">
+        Route Target
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/ipam/service.html" class="md-nav__link">
+        Service
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/ipam/vlan.html" class="md-nav__link">
+        VLAN
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/ipam/vlangroup.html" class="md-nav__link">
+        VLAN Group
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/ipam/vrf.html" class="md-nav__link">
+        VRF
+      </a>
+    </li>
+  
+
+            
+          
+        </ul>
+      </nav>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    
+    <li class="md-nav__item md-nav__item--nested">
+      
+      
+      
+      
+      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_8_5" >
+      
+      
+      
+        <label class="md-nav__link" for="__nav_2_8_5" id="__nav_2_8_5_label" tabindex="0">
+          Tenancy
+          <span class="md-nav__icon md-icon"></span>
+        </label>
+      
+      <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_8_5_label" aria-expanded="false">
+        <label class="md-nav__title" for="__nav_2_8_5">
+          <span class="md-nav__icon md-icon"></span>
+          Tenancy
+        </label>
+        <ul class="md-nav__list" data-md-scrollfix>
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/tenancy/tenant.html" class="md-nav__link">
+        Tenant
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/tenancy/tenantgroup.html" class="md-nav__link">
+        Tenant Group
+      </a>
+    </li>
+  
+
+            
+          
+        </ul>
+      </nav>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    
+    <li class="md-nav__item md-nav__item--nested">
+      
+      
+      
+      
+      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_8_6" >
+      
+      
+      
+        <label class="md-nav__link" for="__nav_2_8_6" id="__nav_2_8_6_label" tabindex="0">
+          Users
+          <span class="md-nav__icon md-icon"></span>
+        </label>
+      
+      <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_8_6_label" aria-expanded="false">
+        <label class="md-nav__title" for="__nav_2_8_6">
+          <span class="md-nav__icon md-icon"></span>
+          Users
+        </label>
+        <ul class="md-nav__list" data-md-scrollfix>
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/users/objectpermission.html" class="md-nav__link">
+        Object Permission
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/users/token.html" class="md-nav__link">
+        Token
+      </a>
+    </li>
+  
+
+            
+          
+        </ul>
+      </nav>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    
+    <li class="md-nav__item md-nav__item--nested">
+      
+      
+      
+      
+      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_8_7" >
+      
+      
+      
+        <label class="md-nav__link" for="__nav_2_8_7" id="__nav_2_8_7_label" tabindex="0">
+          Virtualization
+          <span class="md-nav__icon md-icon"></span>
+        </label>
+      
+      <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_8_7_label" aria-expanded="false">
+        <label class="md-nav__title" for="__nav_2_8_7">
+          <span class="md-nav__icon md-icon"></span>
+          Virtualization
+        </label>
+        <ul class="md-nav__list" data-md-scrollfix>
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/virtualization/cluster.html" class="md-nav__link">
+        Cluster
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/virtualization/clustergroup.html" class="md-nav__link">
+        Cluster Group
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/virtualization/clustertype.html" class="md-nav__link">
+        Cluster Type
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/virtualization/virtualmachine.html" class="md-nav__link">
+        Virtual Machine
+      </a>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../models/virtualization/vminterface.html" class="md-nav__link">
+        VM Interface
+      </a>
+    </li>
+  
+
+            
+          
+        </ul>
+      </nav>
+    </li>
+  
+
+            
+          
+        </ul>
+      </nav>
+    </li>
+  
+
+            
+          
+            
+              
+  
+  
+  
+    
+    <li class="md-nav__item md-nav__item--nested">
+      
+      
+      
+      
+      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_9" >
+      
+      
+      
+        <label class="md-nav__link" for="__nav_2_9" id="__nav_2_9_label" tabindex="0">
           Additional Features
           <span class="md-nav__icon md-icon"></span>
         </label>
       
-      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_8_label" aria-expanded="false">
-        <label class="md-nav__title" for="__nav_2_8">
+      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_9_label" aria-expanded="false">
+        <label class="md-nav__title" for="__nav_2_9">
           <span class="md-nav__icon md-icon"></span>
           Additional Features
         </label>
@@ -1683,17 +2837,17 @@
       
       
       
-      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_9" >
+      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_10" >
       
       
       
-        <label class="md-nav__link" for="__nav_2_9" id="__nav_2_9_label" tabindex="0">
+        <label class="md-nav__link" for="__nav_2_10" id="__nav_2_10_label" tabindex="0">
           REST API
           <span class="md-nav__icon md-icon"></span>
         </label>
       
-      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_9_label" aria-expanded="false">
-        <label class="md-nav__title" for="__nav_2_9">
+      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_10_label" aria-expanded="false">
+        <label class="md-nav__title" for="__nav_2_10">
           <span class="md-nav__icon md-icon"></span>
           REST API
         </label>
@@ -1741,6 +2895,20 @@
 
             
           
+            
+              
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../rest-api/ui-related-endpoints.html" class="md-nav__link">
+        UI Endpoints
+      </a>
+    </li>
+  
+
+            
+          
         </ul>
       </nav>
     </li>
@@ -1759,17 +2927,17 @@
       
       
       
-      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_10" >
+      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_11" >
       
       
       
-        <label class="md-nav__link" for="__nav_2_10" id="__nav_2_10_label" tabindex="0">
+        <label class="md-nav__link" for="__nav_2_11" id="__nav_2_11_label" tabindex="0">
           GraphQL API
           <span class="md-nav__icon md-icon"></span>
         </label>
       
-      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_10_label" aria-expanded="false">
-        <label class="md-nav__title" for="__nav_2_10">
+      <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_11_label" aria-expanded="false">
+        <label class="md-nav__title" for="__nav_2_11">
           <span class="md-nav__icon md-icon"></span>
           GraphQL API
         </label>
@@ -2330,6 +3498,13 @@
     Install markdownlint-cli
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#install-npm" class="md-nav__link">
+    Install npm
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -2410,6 +3585,20 @@
     Starting the Development Server
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#starting-the-nodejs-server" class="md-nav__link">
+    Starting the Node.js Server
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#starting-the-storybook-server" class="md-nav__link">
+    Starting the Storybook Server
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -3291,6 +4480,13 @@
     Install markdownlint-cli
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#install-npm" class="md-nav__link">
+    Install npm
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -3371,6 +4567,20 @@
     Starting the Development Server
   </a>
   
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#starting-the-nodejs-server" class="md-nav__link">
+    Starting the Node.js Server
+  </a>
+  
+</li>
+        
+          <li class="md-nav__item">
+  <a href="#starting-the-storybook-server" class="md-nav__link">
+    Starting the Storybook Server
+  </a>
+  
 </li>
         
           <li class="md-nav__item">
@@ -3690,25 +4900,28 @@
 <a id="__codelineno-17-14" name="__codelineno-17-14" href="#__codelineno-17-14"></a>  destroy                Destroy all containers and volumes.
 <a id="__codelineno-17-15" name="__codelineno-17-15" href="#__codelineno-17-15"></a>  docker-push            Tags and pushes docker images to the appropriate repos, intended for release use only.
 <a id="__codelineno-17-16" name="__codelineno-17-16" href="#__codelineno-17-16"></a>  dumpdata               Dump data from database to db_output file.
-<a id="__codelineno-17-17" name="__codelineno-17-17" href="#__codelineno-17-17"></a>  flake8                 Check for PEP8 compliance and other style issues.
-<a id="__codelineno-17-18" name="__codelineno-17-18" href="#__codelineno-17-18"></a>  hadolint               Check Dockerfile for hadolint compliance and other style issues.
-<a id="__codelineno-17-19" name="__codelineno-17-19" href="#__codelineno-17-19"></a>  integration-test       Run Nautobot integration tests.
-<a id="__codelineno-17-20" name="__codelineno-17-20" href="#__codelineno-17-20"></a>  loaddata               Load data from file.
-<a id="__codelineno-17-21" name="__codelineno-17-21" href="#__codelineno-17-21"></a>  makemigrations         Perform makemigrations operation in Django.
-<a id="__codelineno-17-22" name="__codelineno-17-22" href="#__codelineno-17-22"></a>  markdownlint           Lint Markdown files.
-<a id="__codelineno-17-23" name="__codelineno-17-23" href="#__codelineno-17-23"></a>  migrate                Perform migrate operation in Django.
-<a id="__codelineno-17-24" name="__codelineno-17-24" href="#__codelineno-17-24"></a>  nbshell                Launch an interactive Nautobot shell.
-<a id="__codelineno-17-25" name="__codelineno-17-25" href="#__codelineno-17-25"></a>  performance-test       Run Nautobot performance tests.
-<a id="__codelineno-17-26" name="__codelineno-17-26" href="#__codelineno-17-26"></a>  post-upgrade           Performs Nautobot common post-upgrade operations using a single entrypoint.
-<a id="__codelineno-17-27" name="__codelineno-17-27" href="#__codelineno-17-27"></a>  pylint                 Perform static analysis of Nautobot code.
-<a id="__codelineno-17-28" name="__codelineno-17-28" href="#__codelineno-17-28"></a>  restart                Gracefully restart containers.
-<a id="__codelineno-17-29" name="__codelineno-17-29" href="#__codelineno-17-29"></a>  serve-docs             Runs local instance of mkdocs serve (ctrl-c to stop).
-<a id="__codelineno-17-30" name="__codelineno-17-30" href="#__codelineno-17-30"></a>  start                  Start Nautobot and its dependencies in detached mode.
-<a id="__codelineno-17-31" name="__codelineno-17-31" href="#__codelineno-17-31"></a>  stop                   Stop Nautobot and its dependencies.
-<a id="__codelineno-17-32" name="__codelineno-17-32" href="#__codelineno-17-32"></a>  tests                  Run all linters and unit tests.
-<a id="__codelineno-17-33" name="__codelineno-17-33" href="#__codelineno-17-33"></a>  unittest               Run Nautobot unit tests.
-<a id="__codelineno-17-34" name="__codelineno-17-34" href="#__codelineno-17-34"></a>  unittest-coverage      Report on code test coverage as measured by &#39;invoke unittest&#39;.
-<a id="__codelineno-17-35" name="__codelineno-17-35" href="#__codelineno-17-35"></a>  vscode                 Launch Visual Studio Code with the appropriate Environment variables to run in a container.
+<a id="__codelineno-17-17" name="__codelineno-17-17" href="#__codelineno-17-17"></a>  eslint                 Check for ESLint rule compliance and other style issues.
+<a id="__codelineno-17-18" name="__codelineno-17-18" href="#__codelineno-17-18"></a>  flake8                 Check for PEP8 compliance and other style issues.
+<a id="__codelineno-17-19" name="__codelineno-17-19" href="#__codelineno-17-19"></a>  hadolint               Check Dockerfile for hadolint compliance and other style issues.
+<a id="__codelineno-17-20" name="__codelineno-17-20" href="#__codelineno-17-20"></a>  integration-test       Run Nautobot integration tests.
+<a id="__codelineno-17-21" name="__codelineno-17-21" href="#__codelineno-17-21"></a>  loaddata               Load data from file.
+<a id="__codelineno-17-22" name="__codelineno-17-22" href="#__codelineno-17-22"></a>  makemigrations         Perform makemigrations operation in Django.
+<a id="__codelineno-17-23" name="__codelineno-17-23" href="#__codelineno-17-23"></a>  markdownlint           Lint Markdown files.
+<a id="__codelineno-17-24" name="__codelineno-17-24" href="#__codelineno-17-24"></a>  migrate                Perform migrate operation in Django.
+<a id="__codelineno-17-25" name="__codelineno-17-25" href="#__codelineno-17-25"></a>  nbshell                Launch an interactive Nautobot shell.
+<a id="__codelineno-17-26" name="__codelineno-17-26" href="#__codelineno-17-26"></a>  performance-test       Run Nautobot performance tests.
+<a id="__codelineno-17-27" name="__codelineno-17-27" href="#__codelineno-17-27"></a>  post-upgrade           Performs Nautobot common post-upgrade operations using a single entrypoint.
+<a id="__codelineno-17-28" name="__codelineno-17-28" href="#__codelineno-17-28"></a>  prettier               Check Node.JS code style with Prettier.
+<a id="__codelineno-17-29" name="__codelineno-17-29" href="#__codelineno-17-29"></a>  pylint                 Perform static analysis of Nautobot code.
+<a id="__codelineno-17-30" name="__codelineno-17-30" href="#__codelineno-17-30"></a>  restart                Gracefully restart containers.
+<a id="__codelineno-17-31" name="__codelineno-17-31" href="#__codelineno-17-31"></a>  serve-docs             Runs local instance of mkdocs serve (ctrl-c to stop).
+<a id="__codelineno-17-32" name="__codelineno-17-32" href="#__codelineno-17-32"></a>  start                  Start Nautobot and its dependencies in detached mode.
+<a id="__codelineno-17-33" name="__codelineno-17-33" href="#__codelineno-17-33"></a>  stop                   Stop Nautobot and its dependencies.
+<a id="__codelineno-17-34" name="__codelineno-17-34" href="#__codelineno-17-34"></a>  tests                  Run all linters and unit tests.
+<a id="__codelineno-17-35" name="__codelineno-17-35" href="#__codelineno-17-35"></a>  unittest               Run Nautobot unit tests.
+<a id="__codelineno-17-36" name="__codelineno-17-36" href="#__codelineno-17-36"></a>  unittest-coverage      Report on code test coverage as measured by &#39;invoke unittest&#39;.
+<a id="__codelineno-17-37" name="__codelineno-17-37" href="#__codelineno-17-37"></a>  unittest-ui            Run Nautobot UI unit tests.
+<a id="__codelineno-17-38" name="__codelineno-17-38" href="#__codelineno-17-38"></a>  vscode                 Launch Visual Studio Code with the appropriate Environment variables to run in a container.
 </code></pre></div>
 <h4 id="using-docker-with-invoke">Using Docker with Invoke<a class="headerlink" href="#using-docker-with-invoke" title="Permanent link">&para;</a></h4>
 <p>A development environment can be easily started up from the root of the project using the following commands:</p>
@@ -3720,13 +4933,13 @@
 </ul>
 <p>Additional useful commands for the development environment:</p>
 <ul>
-<li><code>invoke start [-s servicename]</code> - Starts Docker containers for Nautobot, PostgreSQL, Redis, Celery, and Celery Beat (or a specific container/service, such as <code>invoke start -s redis</code>) to run in the background with debug disabled</li>
+<li><code>invoke start [-s servicename]</code> - Starts Docker containers for Nautobot, PostgreSQL, Redis, NGINX, Node.js, Celery, and Celery Beat (or a specific container/service, such as <code>invoke start -s redis</code>) to run in the background with debug disabled</li>
 <li><code>invoke cli [-s servicename]</code> - Launch a <code>bash</code> shell inside the specified service container (if none is specified, defaults to the Nautobot container)</li>
 <li><code>invoke stop [-s servicename]</code> - Stops all containers (or a specific container/service) created by <code>invoke start</code></li>
 </ul>
 <div class="admonition note">
 <p class="admonition-title">Note</p>
-<p>The mkdocs container must be started manually with <code>invoke start -s mkdocs</code>. It will not start automatically with the <code>invoke start</code> or <code>invoke debug</code> commands.</p>
+<p>The <code>mkdocs</code> and <code>storybook</code> containers (see later) are not started automatically by <code>invoke start</code> or <code>invoke debug</code>. If desired, these may be started manually with <code>invoke start -s mkdocs</code> or <code>invoke start -s storybook</code> as appropriate.</p>
 </div>
 <div class="admonition tip">
 <p class="admonition-title">Tip</p>
@@ -3771,11 +4984,19 @@
 <p><a href="https://github.com/igorshubovych/markdownlint-cli">markdownlint-cli</a> is a tool used to validate and lint Markdown files, such as Nautobot's documentation, to ensure that they are correctly constructed. On macOS with <a href="https://brew.sh/">Homebrew</a> you can install markdownlint-cli by running:</p>
 <div class="highlight"><pre><span></span><code><a id="__codelineno-20-1" name="__codelineno-20-1" href="#__codelineno-20-1"></a>brew install markdownlint-cli
 </code></pre></div>
+<h4 id="install-npm">Install npm<a class="headerlink" href="#install-npm" title="Permanent link">&para;</a></h4>
+<p><a href="https://www.npmjs.com/">npm</a> is the tool used to install and compile the Nautobot front-end UI. On macOS with <a href="https://brew.sh">Homebrew</a> you can install npm by running:</p>
+<div class="highlight"><pre><span></span><code><a id="__codelineno-21-1" name="__codelineno-21-1" href="#__codelineno-21-1"></a>brew install npm
+</code></pre></div>
+<p>You should then move to the <code>nautobot_ui/</code> subdirectory and run <code>npm install</code> to install all of the JS dependencies for local development of the Nautobot UI:</p>
+<div class="highlight"><pre><span></span><code><a id="__codelineno-22-1" name="__codelineno-22-1" href="#__codelineno-22-1"></a>npm install
+</code></pre></div>
+<p>Be sure to switch back to the base directory of the repository after you do this.</p>
 <h4 id="creating-a-python-virtual-environment">Creating a Python Virtual Environment<a class="headerlink" href="#creating-a-python-virtual-environment" title="Permanent link">&para;</a></h4>
 <p>A Python <a href="https://docs.python.org/3/tutorial/venv.html">virtual environment</a> (or <em>virtualenv</em>) is like a container for a set of Python packages. A virtualenv allow you to build environments suited to specific projects without interfering with system packages or other projects. When installed per the documentation, Nautobot uses a virtual environment in production.</p>
 <p>For Nautobot development, we have selected Poetry, which will transparently create a virtualenv for you, automatically install all dependencies required for Nautobot to operate, and will also install the <code>nautobot-server</code> CLI command that you will utilize to interact with Nautobot from here on out.</p>
 <p>Bootstrap your virtual environment using <code>poetry install</code>:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-21-1" name="__codelineno-21-1" href="#__codelineno-21-1"></a>poetry install
+<div class="highlight"><pre><span></span><code><a id="__codelineno-23-1" name="__codelineno-23-1" href="#__codelineno-23-1"></a>poetry install
 </code></pre></div>
 <div class="admonition hint">
 <p class="admonition-title">Hint</p>
@@ -3783,44 +5004,44 @@
 </div>
 <p>This will create automatically create a virtualenv in your home directory, which houses a virtual copy of the Python executable and its related libraries and tooling. When running Nautobot for development, it will be run using the Python binary at found within the virtualenv.</p>
 <p>Once created, you may activate the virtual environment using <code>poetry shell</code>:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-22-1" name="__codelineno-22-1" href="#__codelineno-22-1"></a>poetry shell
+<div class="highlight"><pre><span></span><code><a id="__codelineno-24-1" name="__codelineno-24-1" href="#__codelineno-24-1"></a>poetry shell
 </code></pre></div>
 <p>Example output:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-23-1" name="__codelineno-23-1" href="#__codelineno-23-1"></a>Spawning shell within /home/example/.cache/pypoetry/virtualenvs/nautobot-Ams_xyDt-py3.8
-<a id="__codelineno-23-2" name="__codelineno-23-2" href="#__codelineno-23-2"></a>
-<a id="__codelineno-23-3" name="__codelineno-23-3" href="#__codelineno-23-3"></a>. /home/example/.cache/pypoetry/virtualenvs/nautobot-Ams_xyDt-py3.8/bin/activate
-<a id="__codelineno-23-4" name="__codelineno-23-4" href="#__codelineno-23-4"></a>(nautobot-Ams_xyDt-py3.8) $
+<div class="highlight"><pre><span></span><code><a id="__codelineno-25-1" name="__codelineno-25-1" href="#__codelineno-25-1"></a>Spawning shell within /home/example/.cache/pypoetry/virtualenvs/nautobot-Ams_xyDt-py3.8
+<a id="__codelineno-25-2" name="__codelineno-25-2" href="#__codelineno-25-2"></a>
+<a id="__codelineno-25-3" name="__codelineno-25-3" href="#__codelineno-25-3"></a>. /home/example/.cache/pypoetry/virtualenvs/nautobot-Ams_xyDt-py3.8/bin/activate
+<a id="__codelineno-25-4" name="__codelineno-25-4" href="#__codelineno-25-4"></a>(nautobot-Ams_xyDt-py3.8) $
 </code></pre></div>
 <p>Notice that the console prompt changes to indicate the active environment. This updates the necessary system environment variables to ensure that any Python scripts are run within the virtual environment.</p>
 <p>Observe also that the <code>python</code> interpreter is bound within the virtualenv:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-24-1" name="__codelineno-24-1" href="#__codelineno-24-1"></a>which python
+<div class="highlight"><pre><span></span><code><a id="__codelineno-26-1" name="__codelineno-26-1" href="#__codelineno-26-1"></a>which python
 </code></pre></div>
 <p>Example output:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-25-1" name="__codelineno-25-1" href="#__codelineno-25-1"></a>(nautobot-Ams_xyDt-py3.8) $ /home/example/.cache/pypoetry/virtualenvs/nautobot-Ams_xyDt-py3.8/bin/python
+<div class="highlight"><pre><span></span><code><a id="__codelineno-27-1" name="__codelineno-27-1" href="#__codelineno-27-1"></a>(nautobot-Ams_xyDt-py3.8) $ /home/example/.cache/pypoetry/virtualenvs/nautobot-Ams_xyDt-py3.8/bin/python
 </code></pre></div>
 <p>To exit the virtual shell, use <code>exit</code>:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-26-1" name="__codelineno-26-1" href="#__codelineno-26-1"></a>exit
+<div class="highlight"><pre><span></span><code><a id="__codelineno-28-1" name="__codelineno-28-1" href="#__codelineno-28-1"></a>exit
 </code></pre></div>
 <p>Example output:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-27-1" name="__codelineno-27-1" href="#__codelineno-27-1"></a>$
+<div class="highlight"><pre><span></span><code><a id="__codelineno-29-1" name="__codelineno-29-1" href="#__codelineno-29-1"></a>$
 </code></pre></div>
 <h4 id="working-with-poetry">Working with Poetry<a class="headerlink" href="#working-with-poetry" title="Permanent link">&para;</a></h4>
 <p>Poetry automatically installs your dependencies. However, if you need to install any additional dependencies this can be done with <code>pip</code>. For example, if you really like using <code>ipython</code> for development:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-28-1" name="__codelineno-28-1" href="#__codelineno-28-1"></a>pip3 install ipython
+<div class="highlight"><pre><span></span><code><a id="__codelineno-30-1" name="__codelineno-30-1" href="#__codelineno-30-1"></a>pip3 install ipython
 </code></pre></div>
 <p>Example output:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-29-1" name="__codelineno-29-1" href="#__codelineno-29-1"></a>Collecting ipython
-<a id="__codelineno-29-2" name="__codelineno-29-2" href="#__codelineno-29-2"></a>  Using cached ipython-7.20.0-py3-none-any.whl (784 kB)
-<a id="__codelineno-29-3" name="__codelineno-29-3" href="#__codelineno-29-3"></a>  ...
+<div class="highlight"><pre><span></span><code><a id="__codelineno-31-1" name="__codelineno-31-1" href="#__codelineno-31-1"></a>Collecting ipython
+<a id="__codelineno-31-2" name="__codelineno-31-2" href="#__codelineno-31-2"></a>  Using cached ipython-7.20.0-py3-none-any.whl (784 kB)
+<a id="__codelineno-31-3" name="__codelineno-31-3" href="#__codelineno-31-3"></a>  ...
 </code></pre></div>
 <ul>
 <li>Install verify that you have the proper dependencies installed and are in the virtual environment via Poetry. This also ensures that you have the proper mkdocs themes installed.</li>
 </ul>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-30-1" name="__codelineno-30-1" href="#__codelineno-30-1"></a>poetry<span class="w"> </span>shell
-<a id="__codelineno-30-2" name="__codelineno-30-2" href="#__codelineno-30-2"></a>poetry<span class="w"> </span>install
+<div class="highlight"><pre><span></span><code><a id="__codelineno-32-1" name="__codelineno-32-1" href="#__codelineno-32-1"></a>poetry<span class="w"> </span>shell
+<a id="__codelineno-32-2" name="__codelineno-32-2" href="#__codelineno-32-2"></a>poetry<span class="w"> </span>install
 </code></pre></div>
 <p>It may not always be convenient to enter into the virtual shell just to run programs. You may also execute a given command ad hoc within the project's virtual shell by using <code>poetry run</code>:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-31-1" name="__codelineno-31-1" href="#__codelineno-31-1"></a>poetry run mkdocs serve
+<div class="highlight"><pre><span></span><code><a id="__codelineno-33-1" name="__codelineno-33-1" href="#__codelineno-33-1"></a>poetry run mkdocs serve
 </code></pre></div>
 <p>Check out the <a href="https://python-poetry.org/docs/basic-usage/">Poetry usage guide</a> for more tips.</p>
 <h4 id="configuring-nautobot">Configuring Nautobot<a class="headerlink" href="#configuring-nautobot" title="Permanent link">&para;</a></h4>
@@ -3835,23 +5056,23 @@
 <p>Nautobot's configuration file is <code>nautobot_config.py</code>.</p>
 <h5 id="initializing-a-config">Initializing a Config<a class="headerlink" href="#initializing-a-config" title="Permanent link">&para;</a></h5>
 <p>You may also initialize a new configuration using <code>nautobot-server init</code>:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-32-1" name="__codelineno-32-1" href="#__codelineno-32-1"></a>nautobot-server init
+<div class="highlight"><pre><span></span><code><a id="__codelineno-34-1" name="__codelineno-34-1" href="#__codelineno-34-1"></a>nautobot-server init
 </code></pre></div>
 <p>Example output:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-33-1" name="__codelineno-33-1" href="#__codelineno-33-1"></a>Configuration file created at &#39;/home/example/.nautobot/nautobot_config.py&#39;
+<div class="highlight"><pre><span></span><code><a id="__codelineno-35-1" name="__codelineno-35-1" href="#__codelineno-35-1"></a>Configuration file created at &#39;/home/example/.nautobot/nautobot_config.py&#39;
 </code></pre></div>
 <p>You may also specify alternate file locations. Please refer to <a href="../configuration/index.html">Configuring Nautobot</a> for how to do that.</p>
 <h5 id="using-the-development-config">Using the Development Config<a class="headerlink" href="#using-the-development-config" title="Permanent link">&para;</a></h5>
 <p>A <code>nautobot_config.py</code> suitable for development purposes can be found at <code>development/nautobot_config.py</code>. You may customize the values there or utilize environment variables to override the default values.</p>
 <p>If you want to use this file, initialize a config first, then copy this file to the default location Nautobot expects to find its config:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-34-1" name="__codelineno-34-1" href="#__codelineno-34-1"></a>cp development/nautobot_config.py ~/.nautobot/nautobot_config.py
+<div class="highlight"><pre><span></span><code><a id="__codelineno-36-1" name="__codelineno-36-1" href="#__codelineno-36-1"></a>cp development/nautobot_config.py ~/.nautobot/nautobot_config.py
 </code></pre></div>
 <h5 id="required-settings">Required Settings<a class="headerlink" href="#required-settings" title="Permanent link">&para;</a></h5>
 <p>A newly created configuration includes sane defaults. If you need to customize them, edit your <code>nautobot_config.py</code> and update the following settings as required:</p>
 <ul>
 <li><a href="../configuration/required-settings.html#allowed_hosts"><code>ALLOWED_HOSTS</code></a>: This can be set to <code>["*"]</code> for development purposes and must be set if <code>DEBUG=False</code></li>
 <li><a href="../configuration/required-settings.html#databases"><code>DATABASES</code></a>: Database connection parameters, if different from the defaults</li>
-<li><strong>Redis settings</strong>: Redis configuration requires multiple settings including <a href="../configuration/required-settings.html#cacheops_redis"><code>CACHEOPS_REDIS</code></a>. The defaults should be fine for development.</li>
+<li><strong>Redis settings</strong>: Redis configuration requires multiple settings. The defaults should be fine for development.</li>
 <li><a href="../configuration/optional-settings.html#debug"><code>DEBUG</code></a>: Set to <code>True</code> to enable verbose exception logging and, if installed, the <a href="https://django-debug-toolbar.readthedocs.io/en/latest/">Django debug toolbar</a></li>
 <li><a href="../configuration/optional-settings.html#extra-applications"><code>EXTRA_INSTALLED_APPS</code></a>: Optionally provide a list of extra Django apps/plugins you may desire to use for development</li>
 </ul>
@@ -3895,23 +5116,69 @@
 </tbody>
 </table>
 <p>For example:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-35-1" name="__codelineno-35-1" href="#__codelineno-35-1"></a>nautobot-server runserver
+<div class="highlight"><pre><span></span><code><a id="__codelineno-37-1" name="__codelineno-37-1" href="#__codelineno-37-1"></a>nautobot-server runserver
 </code></pre></div>
 <p>Example output:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-36-1" name="__codelineno-36-1" href="#__codelineno-36-1"></a>Performing system checks...
-<a id="__codelineno-36-2" name="__codelineno-36-2" href="#__codelineno-36-2"></a>
-<a id="__codelineno-36-3" name="__codelineno-36-3" href="#__codelineno-36-3"></a>System check identified no issues (0 silenced).
-<a id="__codelineno-36-4" name="__codelineno-36-4" href="#__codelineno-36-4"></a>November 18, 2020 - 15:52:31
-<a id="__codelineno-36-5" name="__codelineno-36-5" href="#__codelineno-36-5"></a>Django version 3.1, using settings &#39;nautobot.core.settings&#39;
-<a id="__codelineno-36-6" name="__codelineno-36-6" href="#__codelineno-36-6"></a>Starting development server at http://127.0.0.1:8080/
-<a id="__codelineno-36-7" name="__codelineno-36-7" href="#__codelineno-36-7"></a>Quit the server with CONTROL-C.
+<div class="highlight"><pre><span></span><code><a id="__codelineno-38-1" name="__codelineno-38-1" href="#__codelineno-38-1"></a>Performing system checks...
+<a id="__codelineno-38-2" name="__codelineno-38-2" href="#__codelineno-38-2"></a>
+<a id="__codelineno-38-3" name="__codelineno-38-3" href="#__codelineno-38-3"></a>System check identified no issues (0 silenced).
+<a id="__codelineno-38-4" name="__codelineno-38-4" href="#__codelineno-38-4"></a>November 18, 2020 - 15:52:31
+<a id="__codelineno-38-5" name="__codelineno-38-5" href="#__codelineno-38-5"></a>Django version 3.1, using settings &#39;nautobot.core.settings&#39;
+<a id="__codelineno-38-6" name="__codelineno-38-6" href="#__codelineno-38-6"></a>Starting development server at http://127.0.0.1:8080/
+<a id="__codelineno-38-7" name="__codelineno-38-7" href="#__codelineno-38-7"></a>Quit the server with CONTROL-C.
 </code></pre></div>
 <div class="admonition warning">
 <p class="admonition-title">Warning</p>
 <p>Do not use <code>poetry run nautobot-server runserver</code> as it will crash unless you also pass the <code>--noreload</code> flag, which somewhat defeats the purpose of using the development server. It is recommended to use <code>nautobot-server runserver</code> from within an active virtualenv (e.g. <code>poetry shell</code>). This is a <a href="https://github.com/python-poetry/poetry/issues/2435">known issue with Django and Poetry</a>.</p>
 </div>
 <p>Please see the <a href="https://docs.djangoproject.com/en/stable/ref/django-admin/#runserver">official Django documentation on <code>runserver</code></a> for more information.</p>
-<p>You can then log into the development server at <code>localhost:8080</code> with the <a href="#creating-a-superuser">superuser</a> you created.</p>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>When first started in Docker Compose, the Nautobot development server container will automatically install dependencies for building the React UI for Nautobot, then build this UI. This may take several minutes before the server becomes ready to accept web connections.</p>
+</div>
+<p>You can connect to the development server at <code>localhost:8080</code>, but normally you'll want to connect to the Node.js server instead (see below).</p>
+<h3 id="starting-the-nodejs-server">Starting the Node.js Server<a class="headerlink" href="#starting-the-nodejs-server" title="Permanent link">&para;</a></h3>
+<p>In development, you should run a Node.js server instance as well. This will handle automatically rebuilding the UI when you make changes in the <code>nautobot/ui</code> directory.</p>
+<table>
+<thead>
+<tr>
+<th>Docker Compose Workflow</th>
+<th>Virtual Environment Workflow</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>invoke start</code></td>
+<td><code>cd nautobot/ui; npm run start</code></td>
+</tr>
+</tbody>
+</table>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>In the Docker Compose workflow, the Node.js server will delay starting until the Nautobot development server has finished the initial UI build, which may take several minutes. This is normal.</p>
+</div>
+<p>You can connect to the Node.js server at <code>localhost:3000</code>.</p>
+<h3 id="starting-the-storybook-server">Starting the Storybook Server<a class="headerlink" href="#starting-the-storybook-server" title="Permanent link">&para;</a></h3>
+<p>When working on the UI, you may find it useful to run a <a href="https://storybook.js.org/">Storybook</a> instance that provides interactive documentation of the <code>nautobot-ui</code> library used by Nautobot's user interface.</p>
+<table>
+<thead>
+<tr>
+<th>Docker Compose Workflow</th>
+<th>Virtual Environment Workflow</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>invoke start -s storybook</code></td>
+<td><code>TODO</code></td>
+</tr>
+</tbody>
+</table>
+<div class="admonition note">
+<p class="admonition-title">Note</p>
+<p>This container is not started by default when using <code>invoke start</code>. You must individually start it using <code>invoke start -s storybook</code>.</p>
+</div>
+<p>You can connect to Storybook at <code>localhost:6006</code>.</p>
 <h3 id="starting-the-worker-server">Starting the Worker Server<a class="headerlink" href="#starting-the-worker-server" title="Permanent link">&para;</a></h3>
 <p>In order to run Nautobot Jobs or anything that requires a worker you must start a Celery worker.</p>
 <p>The worker is started in Docker Workflow with <a href="https://pythonhosted.org/watchdog/">watchdog</a> and can be setup to be started with watchdog in the Virtual Environment Workflow. Watchdog provides a similar experience to the Django lightweight HTTP/WSGI for restarting your application automatically. Watchdog can watch for changes on your filesystem, this is helpful when adjusting existing Python files to not have to restart the celery worker when testing jobs.</p>
@@ -3951,21 +5218,21 @@
 </tbody>
 </table>
 <p>For example:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-37-1" name="__codelineno-37-1" href="#__codelineno-37-1"></a>nautobot-server<span class="w"> </span>nbshell
+<div class="highlight"><pre><span></span><code><a id="__codelineno-39-1" name="__codelineno-39-1" href="#__codelineno-39-1"></a>nautobot-server<span class="w"> </span>nbshell
 </code></pre></div>
 <p>Example output:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-38-1" name="__codelineno-38-1" href="#__codelineno-38-1"></a># Shell Plus Model Imports
-<a id="__codelineno-38-2" name="__codelineno-38-2" href="#__codelineno-38-2"></a>...
-<a id="__codelineno-38-3" name="__codelineno-38-3" href="#__codelineno-38-3"></a># Shell Plus Django Imports
-<a id="__codelineno-38-4" name="__codelineno-38-4" href="#__codelineno-38-4"></a>...
-<a id="__codelineno-38-5" name="__codelineno-38-5" href="#__codelineno-38-5"></a># Django version 3.2.16
-<a id="__codelineno-38-6" name="__codelineno-38-6" href="#__codelineno-38-6"></a># Nautobot version 2.0.0a0
-<a id="__codelineno-38-7" name="__codelineno-38-7" href="#__codelineno-38-7"></a># Example Nautobot App version 1.0.0
-<a id="__codelineno-38-8" name="__codelineno-38-8" href="#__codelineno-38-8"></a>Python 3.8.16 (default, Mar 23 2023, 04:48:11)
-<a id="__codelineno-38-9" name="__codelineno-38-9" href="#__codelineno-38-9"></a>[GCC 10.2.1 20210110] on linux
-<a id="__codelineno-38-10" name="__codelineno-38-10" href="#__codelineno-38-10"></a>Type &quot;help&quot;, &quot;copyright&quot;, &quot;credits&quot; or &quot;license&quot; for more information.
-<a id="__codelineno-38-11" name="__codelineno-38-11" href="#__codelineno-38-11"></a>(InteractiveConsole)
-<a id="__codelineno-38-12" name="__codelineno-38-12" href="#__codelineno-38-12"></a>&gt;&gt;&gt;
+<div class="highlight"><pre><span></span><code><a id="__codelineno-40-1" name="__codelineno-40-1" href="#__codelineno-40-1"></a># Shell Plus Model Imports
+<a id="__codelineno-40-2" name="__codelineno-40-2" href="#__codelineno-40-2"></a>...
+<a id="__codelineno-40-3" name="__codelineno-40-3" href="#__codelineno-40-3"></a># Shell Plus Django Imports
+<a id="__codelineno-40-4" name="__codelineno-40-4" href="#__codelineno-40-4"></a>...
+<a id="__codelineno-40-5" name="__codelineno-40-5" href="#__codelineno-40-5"></a># Django version 3.2.16
+<a id="__codelineno-40-6" name="__codelineno-40-6" href="#__codelineno-40-6"></a># Nautobot version 2.0.0a0
+<a id="__codelineno-40-7" name="__codelineno-40-7" href="#__codelineno-40-7"></a># Example Nautobot App version 1.0.0
+<a id="__codelineno-40-8" name="__codelineno-40-8" href="#__codelineno-40-8"></a>Python 3.8.16 (default, Mar 23 2023, 04:48:11)
+<a id="__codelineno-40-9" name="__codelineno-40-9" href="#__codelineno-40-9"></a>[GCC 10.2.1 20210110] on linux
+<a id="__codelineno-40-10" name="__codelineno-40-10" href="#__codelineno-40-10"></a>Type &quot;help&quot;, &quot;copyright&quot;, &quot;credits&quot; or &quot;license&quot; for more information.
+<a id="__codelineno-40-11" name="__codelineno-40-11" href="#__codelineno-40-11"></a>(InteractiveConsole)
+<a id="__codelineno-40-12" name="__codelineno-40-12" href="#__codelineno-40-12"></a>&gt;&gt;&gt;
 </code></pre></div>
 <h3 id="post-upgrade-operations">Post-upgrade Operations<a class="headerlink" href="#post-upgrade-operations" title="Permanent link">&para;</a></h3>
 <p>There will be times where you're working with the bleeding edge of Nautobot from the <code>develop</code> branch or feature branches and will need to pull in database changes or run server operations.</p>
@@ -3992,22 +5259,22 @@
 </div>
 <p>Sometimes when files are renamed, moved, or deleted and you've been working in the same environment for a while, you can encounter weird behavior. If this happens, don't panic and nuke your environment.</p>
 <p>First, use <code>pip3</code> to explicitly uninstall the Nautobot package from the environment:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-39-1" name="__codelineno-39-1" href="#__codelineno-39-1"></a>pip3 uninstall -y nautobot
+<div class="highlight"><pre><span></span><code><a id="__codelineno-41-1" name="__codelineno-41-1" href="#__codelineno-41-1"></a>pip3 uninstall -y nautobot
 </code></pre></div>
 <p>Example output:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-40-1" name="__codelineno-40-1" href="#__codelineno-40-1"></a>Found existing installation: nautobot 1.0.0b2
-<a id="__codelineno-40-2" name="__codelineno-40-2" href="#__codelineno-40-2"></a>Uninstalling nautobot-1.0.0b2:
-<a id="__codelineno-40-3" name="__codelineno-40-3" href="#__codelineno-40-3"></a>  Successfully uninstalled nautobot-1.0.0b2
+<div class="highlight"><pre><span></span><code><a id="__codelineno-42-1" name="__codelineno-42-1" href="#__codelineno-42-1"></a>Found existing installation: nautobot 1.0.0b2
+<a id="__codelineno-42-2" name="__codelineno-42-2" href="#__codelineno-42-2"></a>Uninstalling nautobot-1.0.0b2:
+<a id="__codelineno-42-3" name="__codelineno-42-3" href="#__codelineno-42-3"></a>  Successfully uninstalled nautobot-1.0.0b2
 </code></pre></div>
 <p>Then try to just have Poetry do the right thing by telling it to install again:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-41-1" name="__codelineno-41-1" href="#__codelineno-41-1"></a>poetry install
+<div class="highlight"><pre><span></span><code><a id="__codelineno-43-1" name="__codelineno-43-1" href="#__codelineno-43-1"></a>poetry install
 </code></pre></div>
 <p>Example output:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-42-1" name="__codelineno-42-1" href="#__codelineno-42-1"></a>Installing dependencies from lock file
-<a id="__codelineno-42-2" name="__codelineno-42-2" href="#__codelineno-42-2"></a>
-<a id="__codelineno-42-3" name="__codelineno-42-3" href="#__codelineno-42-3"></a>No dependencies to install or update
-<a id="__codelineno-42-4" name="__codelineno-42-4" href="#__codelineno-42-4"></a>
-<a id="__codelineno-42-5" name="__codelineno-42-5" href="#__codelineno-42-5"></a>Installing the current project: nautobot (1.0.0-beta.2)
+<div class="highlight"><pre><span></span><code><a id="__codelineno-44-1" name="__codelineno-44-1" href="#__codelineno-44-1"></a>Installing dependencies from lock file
+<a id="__codelineno-44-2" name="__codelineno-44-2" href="#__codelineno-44-2"></a>
+<a id="__codelineno-44-3" name="__codelineno-44-3" href="#__codelineno-44-3"></a>No dependencies to install or update
+<a id="__codelineno-44-4" name="__codelineno-44-4" href="#__codelineno-44-4"></a>
+<a id="__codelineno-44-5" name="__codelineno-44-5" href="#__codelineno-44-5"></a>Installing the current project: nautobot (1.0.0-beta.2)
 </code></pre></div>
 <h3 id="running-tests">Running Tests<a class="headerlink" href="#running-tests" title="Permanent link">&para;</a></h3>
 <p>Throughout the course of development, it's a good idea to occasionally run Nautobot's test suite to catch any potential errors. Tests come in two primary flavors: Unit tests and integration tests.</p>
@@ -4125,7 +5392,7 @@
 </tbody>
 </table>
 <h3 id="verifying-code-style-and-static-analysis">Verifying Code Style and Static Analysis<a class="headerlink" href="#verifying-code-style-and-static-analysis" title="Permanent link">&para;</a></h3>
-<p>To enforce best practices around consistent <a href="style-guide.html">coding style</a>, Nautobot uses <a href="https://flake8.pycqa.org/">Flake8</a> and <a href="https://black.readthedocs.io/">Black</a>. Additionally, <a href="https://en.wikipedia.org/wiki/Static_program_analysis">static analysis</a> of Nautobot code is performed by <a href="https://pylint.pycqa.org/en/latest/">Pylint</a>. You should run all of these commands and ensure that they pass fully with regard to your code changes before opening a pull request upstream.</p>
+<p>To enforce best practices around consistent <a href="style-guide.html">coding style</a>, Nautobot uses <a href="https://flake8.pycqa.org/">Flake8</a>,  <a href="https://black.readthedocs.io/">Black</a>, <a href="https://eslint.org">ESLint</a>, and <a href="https://prettier.io">Prettier</a>. Additionally, <a href="https://en.wikipedia.org/wiki/Static_program_analysis">static analysis</a> of Nautobot code is performed by <a href="https://pylint.pycqa.org/en/latest/">Pylint</a>. You should run all of these commands and ensure that they pass fully with regard to your code changes before opening a pull request upstream.</p>
 <table>
 <thead>
 <tr>
@@ -4143,6 +5410,14 @@
 <td><code>black</code></td>
 </tr>
 <tr>
+<td><code>invoke eslint</code></td>
+<td><code>npx eslint .</code></td>
+</tr>
+<tr>
+<td><code>invoke prettier</code></td>
+<td><code>npx prettier -c .</code></td>
+</tr>
+<tr>
 <td><code>invoke pylint</code></td>
 <td><code>nautobot-server pylint nautobot tasks.py &amp;&amp; nautobot-server pylint --recursive development/ examples/</code></td>
 </tr>
@@ -4237,8 +5512,8 @@
 </table>
 <h2 id="submitting-pull-requests">Submitting Pull Requests<a class="headerlink" href="#submitting-pull-requests" title="Permanent link">&para;</a></h2>
 <p>Once you're happy with your work and have verified that all tests pass, commit your changes and push it upstream to your fork. Always provide descriptive (but not excessively verbose) commit messages. When working on a specific issue, be sure to reference it.</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-43-1" name="__codelineno-43-1" href="#__codelineno-43-1"></a>git commit -m &quot;Closes #1234: Add IPv5 support&quot;
-<a id="__codelineno-43-2" name="__codelineno-43-2" href="#__codelineno-43-2"></a>git push origin
+<div class="highlight"><pre><span></span><code><a id="__codelineno-45-1" name="__codelineno-45-1" href="#__codelineno-45-1"></a>git commit -m &quot;Closes #1234: Add IPv5 support&quot;
+<a id="__codelineno-45-2" name="__codelineno-45-2" href="#__codelineno-45-2"></a>git push origin
 </code></pre></div>
 <p>Once your fork has the new commit, submit a <a href="https://github.com/nautobot/nautobot/compare">pull request</a> to the Nautobot repo to propose the changes. Be sure to provide a detailed accounting of the changes being made and the reasons for doing so.</p>
 <p>Once submitted, a maintainer will review your pull request and either merge it or request changes. If changes are needed, you can make them via new commits to your fork: The pull request will update automatically.</p>
@@ -4250,11 +5525,11 @@
 <p>Below are common issues you might encounter in your development environment and how to address them.</p>
 <h3 id="fatal-sorry-too-many-clients-already">FATAL: sorry, too many clients already<a class="headerlink" href="#fatal-sorry-too-many-clients-already" title="Permanent link">&para;</a></h3>
 <p>When using <code>nautobot-server runserver</code> to do development you might run into a traceback that looks something like this:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-44-1" name="__codelineno-44-1" href="#__codelineno-44-1"></a>Exception Type: OperationalError at /extras/tags/
-<a id="__codelineno-44-2" name="__codelineno-44-2" href="#__codelineno-44-2"></a>Exception Value: FATAL:  sorry, too many clients already
+<div class="highlight"><pre><span></span><code><a id="__codelineno-46-1" name="__codelineno-46-1" href="#__codelineno-46-1"></a>Exception Type: OperationalError at /extras/tags/
+<a id="__codelineno-46-2" name="__codelineno-46-2" href="#__codelineno-46-2"></a>Exception Value: FATAL:  sorry, too many clients already
 </code></pre></div>
 <p>The <code>runserver</code> development server is multi-threaded by default, which means that every request is creating its own connection. If you are doing some local testing or development that is resulting in a lot of connections to the database, pass <code>--nothreading</code> to the runserver command to disable threading:</p>
-<div class="highlight"><pre><span></span><code><a id="__codelineno-45-1" name="__codelineno-45-1" href="#__codelineno-45-1"></a>nautobot-server runserver --nothreading
+<div class="highlight"><pre><span></span><code><a id="__codelineno-47-1" name="__codelineno-47-1" href="#__codelineno-47-1"></a>nautobot-server runserver --nothreading
 </code></pre></div>