docs: improving getting started docs for mainnet

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/getting-started/cdn-usage.md

@@ -0,0 +1,24 @@
+# CDN Usage (browser only)
+
+```html
+<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-the-network.md

@@ -0,0 +1,34 @@
+# 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:
+
+| Mainnet                                   | Testnet                                   |
+| ----------------------------------------- | ----------------------------------------- |
+| `https://mainnet.fuel.network/v1/graphql` | `https://testnet.fuel.network/v1/graphql` |
+
+You can also connect to `localhost`:
+
+- [Running a local Fuel node](./running-a-local-fuel-node.md)
+
+# Resources
+
+You can also 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 |
+
+# Next
+
+You can also connect to `localhost`:
+
+- [Running a local Fuel node](./running-a-local-fuel-node.md)

apps/docs/src/guide/getting-started/index.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 a couple 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/installation.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/next-steps.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 details 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

apps/docs/src/guide/getting-started/react-example.md

@@ -0,0 +1,35 @@
+# React Example
+
+<!-- TODO: Create properly code snippet on new package: `app/react-app` after https://github.com/FuelLabs/fuels-ts/pull/827 got merged -->
+
+```tsx
+import { BN, Provider, Wallet } from "fuels";
+import { useEffect, useState } from "react";
+
+function App() {
+  const [balance, setBalance] = useState(0);
+
+  useEffect(() => {
+    const main = async () => {
+      const provider = await Provider.create(
+        "https://mainnet.fuel.network/v1/graphql",
+      );
+
+      const wallet = Wallet.fromAddress("0x...", provider);
+      const { balances } = await wallet.getBalances();
+
+      setBalance(new BN(balances[0].amount).toNumber());
+    };
+
+    main();
+  }, []);
+
+  return <div>My Balance: {balance}</div>;
+}
+
+export default App;
+```
+
+# More
+
+- [CDN Usage](./cdn-usage.md)

apps/docs/src/guide/getting-started/running-a-local-fuel-node.md

@@ -0,0 +1,51 @@
+# Running a local Fuel node
+
+Remember to first install the [Fuel Toolchain](https://docs.fuel.network/guides/installation/).
+
+Then check the command self documentation:
+
+::: code-group
+
+```sh-vue [Fuel Binary]
+fuel-core
+```
+
+<!-- ```sh-vue [Forc]
+forc node
+``` -->
+
+```sh-vue [TS SDK]
+fuels node
+```
+
+:::
+
+Check also the online docs:
+
+|             | Command      | Documentation                                                                                          |
+| ----------- | ------------ | ------------------------------------------------------------------------------------------------------ |
+| Fuel Binary | `fuel-core`  | [docs](https://docs.fuel.network/guides/running-a-node/running-a-local-node/) — Running a local node   |
+| TS SDK      | `fuels node` | [docs](https://docs.fuel.network/docs/fuels-ts/fuels-cli/commands/#fuels-node) — Using the `fuels` CLI |
+
+<!-- | Forc | `forc node` | [docs](https://docs.fuel.network/docs/forc/commands/forc_node/) | -->
+
+# Testing Utilities
+
+You can run a Fuel node from within your `.ts` unit tests:
+
+- [Launching a test node](../testing/launching-a-test-node.md)
+
+# Developer Utilities
+
+Configure your project for the `fuels` CLI using a `fuels.config.ts` file:
+
+- [Using the `fuels init` command](../fuels-cli/commands.md#fuels-init)
+
+It makes development easier with a hot-reload experience:
+
+- [Using the `fuels dev` command](../fuels-cli/commands.md#fuels-dev)
+
+# More
+
+- [React Example](./react-example.md)
+- [CDN Usage](./cdn-usage.md)

apps/docs/src/guide/getting-started/snippets/connecting-to-localnode.ts → apps/docs/src/guide/getting-started/snippets/connecting-to-the-network.ts

@@ -1,12 +1,14 @@
 // #region main
 import { Provider, Wallet } from 'fuels';
 
-import { LOCAL_NETWORK_URL } from '../../../env';
+const NETWORK_URL = 'https://mainnet.fuel.network/v1/graphql';
+// const NETWORK_URL = 'https://testnet.fuel.network/v1/graphql';
+// const NETWORK_URL = 'https://localhost:<port>/v1/graphql';
 
 const ADDRESS =
   '0x767caf5b08eba21c561078a4d5be09bbd7f16b9eca22699a61f1edd9e456126f';
 
-const provider = await Provider.create(LOCAL_NETWORK_URL);
+const provider = await Provider.create(NETWORK_URL);
 const wallet = Wallet.fromAddress(ADDRESS, provider);
 
 const { balances } = await wallet.getBalances();

apps/docs/src/guide/provider/index.md

@@ -1,6 +1,6 @@
 # Provider
 
-The [`Provider`](https://fuels-ts-docs-api.vercel.app/classes/_fuel_ts_account.Provider.html) lets you connect to a Fuel node ([_*local*_](../getting-started/connecting-to-a-local-node.md) or [_*external*_](../getting-started/connecting-to-testnet.md)) and interact with it, encapsulating common client operations in the SDK. Those operations include querying the blockchain for network, block, and transaction-related info (and [more](https://fuels-ts-docs-api.vercel.app/classes/_fuel_ts_account.Provider.html)), as well as sending [transactions](../transactions/index.md) to the blockchain.
+The [`Provider`](https://fuels-ts-docs-api.vercel.app/classes/_fuel_ts_account.Provider.html) lets you connect to a Fuel node ([_*docs*_](../getting-started/connecting-to-the-network.md)) and interact with it, encapsulating common client operations in the SDK. Those operations include querying the blockchain for network, block, and transaction-related info (and [more](https://fuels-ts-docs-api.vercel.app/classes/_fuel_ts_account.Provider.html)), as well as sending [transactions](../transactions/index.md) to the blockchain.
 
 All higher-level abstractions (e.g. [`Wallet`](../wallets/index.md), [`Contract`](../contracts/index.md)) that interact with the blockchain go through the `Provider`, so it's used for various actions like getting a wallet's balance, deploying contracts, querying their state, etc.
 

apps/docs/src/guide/provider/querying-the-chain.md

@@ -2,10 +2,7 @@
 
 Once you have set up a provider, you're ready to interact with the Fuel blockchain.
 
-We can connect to either a _*local*_ or an _*external*_ node:
-
-> 1. _Running a [local node](../getting-started/connecting-to-a-local-node.md)_
-> 1. _Connecting to an [external node](../getting-started/connecting-to-testnet.md)_
+- [Connecting to the Network](../getting-started/connecting-to-the-network.md)
 
 Let's look at a few examples below.