docs: improving getting started docs for mainnet (#3500)

Author: arboleya

.changeset/brave-lies-relax.md

@@ -0,0 +1,5 @@
+---
+"fuels": patch
+---
+
+docs: improving getting started docs for `mainnet`

README.md

@@ -1,92 +1,107 @@
-<picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/FuelLabs/fuels-ts/master/apps/docs/src/public/fuels-ts-logo-dark.png">
-    <img alt="Fuels-ts SDK logo" width="400px" src="https://raw.githubusercontent.com/FuelLabs/fuels-ts/master/apps/docs/src/public/fuels-ts-logo-light.png">
-</picture>
+# fuels-ts
 
-**fuels-ts** is a library for interacting with **Fuel v2**.
+Typescript SDK for Fuel.
 
 [![test](https://github.com/FuelLabs/fuels-ts/actions/workflows/test.yaml/badge.svg)](https://github.com/FuelLabs/fuels-ts/actions/workflows/test.yaml)
-[![npm](https://img.shields.io/npm/v/fuels)](https://www.npmjs.com/package/fuels)
 [![docs](https://img.shields.io/badge/docs-fuels.ts-brightgreen.svg?style=flat)](https://docs.fuel.network/docs/fuels-ts/)
+[![npm](https://img.shields.io/npm/v/fuels)](https://www.npmjs.com/package/fuels)
 [![discord](https://img.shields.io/badge/chat%20on-discord-orange?&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/xfpK4Pe)
 
-# Resources
-
-The [documentation](https://docs.fuel.network/docs/fuels-ts/) site is your main stop for resources.
+# Install ([docs](https://docs.fuel.network/docs/fuels-ts/getting-started/installation))
 
-- [Quickstart](https://docs.fuel.network/docs/intro/quickstart-contract/)
-- [Documentation](https://docs.fuel.network/docs/fuels-ts/)
-  - [Wallets](https://docs.fuel.network/docs/fuels-ts/wallets/)
-  - [Contracts](https://docs.fuel.network/docs/fuels-ts/contracts/)
-  - [Scripts](https://docs.fuel.network/docs/fuels-ts/scripts/)
-  - [Predicates](https://docs.fuel.network/docs/fuels-ts/predicates/)
-  - [ABI Typegen](https://docs.fuel.network/docs/fuels-ts/fuels-cli/abi-typegen/)
-- [Contributing](https://github.com/FuelLabs/fuels-ts/blob/master/CONTRIBUTING.md)
-- [The Fuel Forum](https://forum.fuel.network/)
-- [The Fuel Ecosystem](#the-fuel-ecosystem)
-
-# Install
-
-```sh
+```console
 npm install fuels --save
 ```
 
-> If you are a Windows user, you will need to be running Windows Subsystem for Linux (WSL) to install and use the Fuel toolchain, including the TypeScript SDK. We don't support Windows natively at this time.
+# Connect ([docs](https://docs.fuel.network/docs/fuels-ts/getting-started/connecting-to-the-network/))
 
-# Import
-
-Simple example usages.
+| Network   | URL                                                                                                              |
+| --------- | --------------------------------------------------------------------------------------------------------------- |
+| Mainnet   | `https://mainnet.fuel.network/v1/graphql`                                                                       |
+| Testnet   | `https://testnet.fuel.network/v1/graphql`                                                                       |
+| Localhost | [Running a local Fuel node](https://docs.fuel.network/docs/fuels-ts/getting-started/running-a-local-fuel-node/) |
 
 ```ts
-import { Wallet } from "fuels";
+import { Provider } from 'fuels';
 
-// Random Wallet
-console.log(Wallet.generate());
+const NETWORK_URL = 'https://mainnet.fuel.network/v1/graphql';
 
-// Using privateKey Wallet
-console.log(new Wallet("0x0000...0000"));
-```
+const provider = await Provider.create(NETWORK_URL);
 
-# CLI
+const chainId = provider.getChainId();
+const gasConfig = provider.getGasConfig();
+const baseAssetId = provider.getBaseAssetId();
 
-Fuels include some utility commands via built-in CLI tool.
+console.log({ chainId, gasConfig, baseAssetId });
+```
 
-Check the [docs](https://docs.fuel.network/docs/fuels-ts/) for more info.
+# Create a new dApp ([docs](https://docs.fuel.network/docs/fuels-ts/creating-a-fuel-dapp/))
 
 ```console
-$ npm add fuels
-$ npx fuels --help
-Usage: fuels [options] [command]
+$ npm create fuels
+
+◇ What is the name of your project? #
+│ my-fuel-project
+└
+
+⚡️ Success! Created a fullstack Fuel dapp at: my-fuel-project.
+```
 
-Options:
-  -D, --debug        Enables verbose logging (default: false)
-  -S, --silent       Omit output messages (default: false)
-  -v, --version      Output the version number
-  -h, --help         Display help
+# Enjoy the `fuels` CLI ([docs](https://docs.fuel.network/docs/fuels-ts/fuels-cli/))
+
+```console
+$ npm install fuels --save
+$ npm fuels --help
 
 Commands:
-  init [options]     Create a sample `fuel.config.ts` file
-  node [options]     Start a Fuel node
-  dev [options]      Start a Fuel node and run build + deploy on every file change
-  build [options]    Build Sway programs and generate Typescript for them
-  deploy [options]   Deploy contracts to the Fuel network
-  typegen [options]  Generate Typescript from Sway ABI JSON files
-  versions           Check for version incompatibilities
-  help [command]     Display help for command
+  init [options]      Create a sample `fuel.config.ts` file
+  build [options]     Build Sway programs and generate Typescript for them
+  deploy [options]    Deploy contracts to the Fuel network
+  dev [options]       Start a Fuel node with hot-reload capabilities
+  node [options]      Start a Fuel node using project configs
+  typegen [options]   Generate Typescript from Sway ABI JSON files
+  versions [options]  Check for version incompatibilities
+  help [command]      Display help for command
 ```
 
-# The Fuel Ecosystem
+In-depth docs:
+- [`fuels init`](https://docs.fuel.network/docs/fuels-ts/fuels-cli/commands#fuels-init) — Creates a new `fuels.config.ts` file
+- [`fuels build`](https://docs.fuel.network/docs/fuels-ts/fuels-cli/commands#fuels-build) — Build `forc` workspace and generate Typescript types for everything
+- [`fuels deploy`](https://docs.fuel.network/docs/fuels-ts/fuels-cli/commands#fuels-deploy) — Deploy workspace contracts and save their IDs to JSON file
+- [`fuels dev`](https://docs.fuel.network/docs/fuels-ts/fuels-cli/commands#fuels-dev) — Start a Fuel node with hot-reload capabilities
+
+
+# Official Docs
+
+- Install The Fuel Toolchain — https://docs.fuel.network/guides/installation/
+---
+- Typescript SDK — https://docs.fuel.network/docs/fuels-ts
+- Fuel Wallet SDK — https://docs.fuel.network/docs/wallet
+- Rust SDK — https://docs.fuel.network/docs/fuels-rs
+- GraphQL Playground — https://docs.fuel.network/docs/graphql
+---
+- Forc — https://docs.fuel.network/docs/forc
+- Sway — https://docs.fuel.network/docs/sway
+- Fuel Core — https://github.com/FuelLabs/fuel-core
+- Fuel VM — https://docs.fuel.network/docs/specs/fuel-vm
+- Fuel Specs — https://docs.fuel.network/docs/specs
+
+# Apps & Ecosystem
+
+- Fuel Bridge — https://app.fuel.network/bridge
+- Block Explorer — https://app.fuel.network
+- Ecosystem Apps — https://app.fuel.network/ecosystem
+
+# Get in Touch
+
+- `Forum` — https://forum.fuel.network
+- `Discord` — https://discord.gg/xfpK4Pe
+
+
+# Contribute
 
-Learn more about the Fuel Ecosystem.
+- [./CONTRIBUTING.md](https://github.com/FuelLabs/fuels-ts/blob/master/CONTRIBUTING.md)
 
-- [🌴 Sway](https://docs.fuel.network/docs/sway/) — The new language, empowering everyone to build reliable and efficient smart contracts
-- [🧰 Forc](https://docs.fuel.network/docs/forc/) — The Fuel toolbox: _Build, deploy and manage your sway projects_
-- [⚙️ Fuel Core](https://github.com/FuelLabs/fuel-core) — The new FuelVM, a blazingly fast blockchain VM
-- [🔗 Fuel Specs](https://github.com/FuelLabs/fuel-specs) — The Fuel protocol specifications
-- [💼 Fuels Wallet](https://github.com/FuelLabs/fuels-wallet) — The Official Fuels Wallet
-- [🦀 Rust SDK](https://github.com/FuelLabs/fuels-rs) — A robust SDK in rust
-- [⚡ Fuel Network](https://fuel.network/) — The project
-- [📚 The Fuel Forum](https://forum.fuel.network/) — Ask questions, get updates, and contribute to a modular future
 
 # License
 

apps/docs/.vitepress/config.ts

@@ -51,20 +51,24 @@ export default defineConfig({
                 link: '/guide/getting-started/installation',
               },
               {
-                text: 'Usage',
-                link: '/guide/getting-started/usage',
+                text: 'Connecting to the Network',
+                link: '/guide/getting-started/connecting-to-the-network',
               },
               {
-                text: 'Connecting to Testnet',
-                link: '/guide/getting-started/connecting-to-testnet',
+                text: 'Running a local Fuel node',
+                link: '/guide/getting-started/running-a-local-fuel-node',
               },
               {
-                text: 'Connecting to a Local Node',
-                link: '/guide/getting-started/connecting-to-a-local-node',
+                text: 'React Example',
+                link: '/guide/getting-started/react-example',
               },
               {
-                text: 'Further Resources',
-                link: '/guide/getting-started/further-resources',
+                text: 'CDN Usage',
+                link: '/guide/getting-started/cdn-usage',
+              },
+              {
+                text: 'Next Steps',
+                link: '/guide/getting-started/next-steps',
               },
             ],
           },

apps/docs/src/guide/fuels-cli/commands.md

@@ -143,7 +143,11 @@ The `fuels dev` command does three things:
 npx fuels@{{fuels}} node
 ```
 
-The `fuels node` command starts a short-lived `fuel-core` node ([docs](./config-file.md#autostartfuelcore)).
+Starts a short-lived `fuel-core` node and requires a `fuels.config.ts` config file.
+
+Generate one with [`fuels init`](#fuels-init):
+
+<<< @/../../demo-fuels/fuels.config.minimal.ts#config{ts:line-numbers}
 
 ## `fuels typegen`
 

apps/docs/src/guide/getting-started/cdn-usage.md

@@ -0,0 +1,29 @@
+<script setup>
+  import { data } from '../../versions.data'
+  const { fuels } = data
+</script>
+
+# CDN Usage (browser only)
+
+```html-vue
+<script type="module">
+  import {
+    Wallet,
+    Provider,
+  } from "https://cdnjs.cloudflare.com/ajax/libs/fuels/{{fuels}}/browser.mjs";
+
+  const main = async () => {
+    const provider = await Provider.create(
+      "https://mainnet.fuel.network/v1/graphql",
+    );
+    const { name } = provider.getChain();
+    console.log(name);
+  };
+
+  main();
+</script>
+```
+
+# More
+
+- [React Example](./react-example.md)

apps/docs/src/guide/getting-started/connecting-to-a-local-node.md

@@ -0,0 +1,26 @@
+# Connecting to the Network
+
+After [installing](./installation.md) the `fuels` package, it's easy to connect to the Network:
+
+<<< @./snippets/connecting-to-the-network.ts#main{ts:line-numbers}
+
+# RPC URLs
+
+These are our official RPC URLs:
+
+| Network   | URL                                                         |
+| --------- | ----------------------------------------------------------- |
+| Mainnet   | `https://testnet.fuel.network/v1/graphql`                   |
+| Testnet   | `https://mainnet.fuel.network/v1/graphql`                   |
+| Localhost | [Running a local Fuel node](./running-a-local-fuel-node.md) |
+
+# Resources
+
+Access all our apps directly:
+
+|          | Mainnet                                    | Testnet                                    |
+| -------- | ------------------------------------------ | ------------------------------------------ |
+| Faucet   | —                                          | https://faucet-testnet.fuel.network/       |
+| Explorer | https://app.fuel.network                   | https://app-testnet.fuel.network           |
+| Bridge   | https://app.fuel.network/bridge            | https://app-testnet.fuel.network/bridge    |
+| GraphQL  | https://mainnet.fuel.network/v1/playground | https://testnet.fuel.network/v1/playground |

apps/docs/src/guide/getting-started/connecting-to-testnet.md

@@ -1,3 +1,12 @@
 # Getting Started
 
-This guide will walk you through the process of setting up and using the Fuels-ts library in your front-end project.
+Welcome to `fuels` Typescript SDK!
+
+We prepared some guides to walk you through your first steps:
+
+1. [Installation](./installation.md)
+1. [Connecting to the Network](./connecting-to-the-network.md)
+1. [Running a local Fuel node](./running-a-local-fuel-node.md)
+1. [React Example](./react-example.md)
+1. [CDN Usage](./cdn-usage.md)
+1. [Next Steps](./next-steps.md)

apps/docs/src/guide/getting-started/connecting-to-the-network.md

@@ -5,24 +5,26 @@
 
 # Installation
 
-We expect you to install the [Fuel Toolchain](https://docs.fuel.network/docs/sway/introduction/fuel_toolchain/#the-fuel-toolchain) before using this library. Follow [this guide](https://docs.fuel.network/guides/installation/) to get this installed.
+You must install the [Fuel Toolchain](https://docs.fuel.network/guides/installation/) before using this library.
 
-The next step is to add the `fuels` dependency to your project. You can do this using the following command:
+Then add the `fuels` dependency to your project:
 
 ::: code-group
 
-```sh-vue [npm]
-npm install fuels@{{fuels}} --save
+```sh-vue [bun]
+bun add fuels@{{fuels}}
 ```
 
 ```sh-vue [pnpm]
 pnpm add fuels@{{fuels}}
 ```
 
-```sh-vue [bun]
-bun add fuels@{{fuels}}
+```sh-vue [npm]
+npm install fuels@{{fuels}} --save
 ```
 
 :::
 
-**Note**: Use version `{{fuels}}` to ensure compatibility with `testnet` network—check the [docs](https://docs.fuel.network/guides/installation/#using-the-latest-toolchain).
+Now you are ready to:
+
+- [Connect to the Network](./connecting-to-the-network.md)

apps/docs/src/guide/getting-started/further-resources.md

@@ -0,0 +1,14 @@
+# Done!
+
+Wait no more, let's build your first Fuel dApp!
+
+- [Creating a Fuel dApp](../creating-a-fuel-dapp/)
+
+## Further Resources
+
+For a more in-depth, step-by-step guide on working with the wider Fuel ecosystem, check out the [Developer Quickstart](https://docs.fuel.network/guides/quickstart/), which uses a more procedural and detailed approach:
+
+1. Installing all tools needed to develop with the Fuel ecosystem
+1. Writing your first Sway Project
+1. Deploying your contract
+1. Building a simple front-end dApp to interact with your deployed contract