[UI] Updated Backend config Info section (#2125)

[Docs] Updated FRONTEND development guide
dstackai · Dec 21, 2024 · d756387 · d756387
1 parent 9f00cdc
commit d756387
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 15 deletions.
diff --git a/contributing/FRONTEND.md b/contributing/FRONTEND.md
@@ -49,8 +49,8 @@ For frontend development, run a `webpack` dev server:
 npm run start
 ```
 
-The `webpack` dev server expects the API to be running on `http://127.0.0.1:3001`. So ensure to run the API on port `3001`:
+The `webpack` dev server expects the API to be running on `http://127.0.0.1:8000`. So ensure to run the API on port `8000`:
 
 ```shell
-dstack server --port 3001
+dstack server --port 8000
 ```
diff --git a/frontend/src/pages/Project/Backends/YAMLForm/constants.tsx b/frontend/src/pages/Project/Backends/YAMLForm/constants.tsx
@@ -1,45 +1,67 @@
 import React from 'react';
 
 export const CONFIG_YAML_HELP_SKY = {
-    header: <h2>SKy Backend config</h2>,
+    header: <h2>Backend config</h2>,
     body: (
         <>
             <p>
-                The backend config is defined in the <code>YAML</code> format. It specifies the backend's <code>type</code> and
-                settings, such as <code>creds</code>, <code>regions</code>, and so on.
+                The backend config is defined in the YAML format. It specifies the backend's <code>type</code> and settings,{' '}
+                such as <code>creds</code>, <code>regions</code>, and so on.
+            </p>
+            <h4>Marketplace</h4>
+            <p>
+                If you set <code>creds</code>'s <code>type</code> to <code>dstack</code>, you'll get compute from{' '}
+                <code>dstack</code>'s marketplace and will pay for it via your <code>dstack Sky</code> user billing. Example:
             </p>
-            <p>Example:</p>
             <p>
                 <pre>
                     type: aws{'\n'}
                     creds:{'\n'}
-                    {'  '}type: default{'\n'}
-                    {'  '}access_key: AIZKISCVKUK{'\n'}
-                    {'  '}secret_key: QSbmpqJIUBn1
+                    {'  '}type: dstack{'\n'}
                 </pre>
             </p>
             <p>
-                Each backend type may support different properties. See the{' '}
-                <a href={'https://dstack.ai/docs/reference/server/config.yml/#examples'}>reference page</a> for more examples.
+                You can see all supported backend types at the{' '}
+                <a href={'https://dstack.ai/docs/reference/server/config.yml/#examples'} target={'_blank'}>
+                    documentation
+                </a>
+                .
+            </p>
+            <h4>Your own cloud account</h4>
+            <p>
+                If you want to use your own cloud account, configure <code>creds</code> and other settings according to the{' '}
+                <a href={'https://dstack.ai/docs/reference/server/config.yml/#examples'} target={'_blank'}>
+                    documentation
+                </a>
+                . Example:
+            </p>
+            <p>
+                <pre>
+                    type: aws{'\n'}
+                    creds:{'\n'}
+                    {'  '}type: access_key{'\n'}
+                    {'  '}access_key: AIZKISCVKUK{'\n'}
+                    {'  '}secret_key: QSbmpqJIUBn1
+                </pre>
             </p>
         </>
     ),
 };
 
 export const CONFIG_YAML_HELP_ENTERPRISE = {
-    header: <h2>Enterprise Backend config</h2>,
+    header: <h2>Backend config</h2>,
     body: (
         <>
             <p>
-                The backend config is defined in the <code>YAML</code> format. It specifies the backend's <code>type</code> and
-                settings, such as <code>creds</code>, <code>regions</code>, and so on.
+                The backend config is defined in the YAML format. It specifies the backend's <code>type</code> and settings,
+                such as <code>creds</code>, <code>regions</code>, and so on.
             </p>
             <p>Example:</p>
             <p>
                 <pre>
                     type: aws{'\n'}
                     creds:{'\n'}
-                    {'  '}type: default{'\n'}
+                    {'  '}type: access_key{'\n'}
                     {'  '}access_key: AIZKISCVKUK{'\n'}
                     {'  '}secret_key: QSbmpqJIUBn1
                 </pre>