Revamping getting started docs

apps/docs/.vitepress/config.ts

@@ -51,16 +51,20 @@ 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-network',
               },
               {
-                text: 'Connecting to Testnet',
-                link: '/guide/getting-started/connecting-to-testnet',
+                text: 'Running a local Fuel node',
+                link: '/guide/getting-started/running-local-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: 'CDN Usage',
+                link: '/guide/getting-started/cdn-usage',
               },
               {
                 text: 'Further Resources',

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

@@ -0,0 +1,20 @@
+# 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>
+```

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

@@ -0,0 +1,30 @@
+# Connecting to the Network
+
+After [installing](./installation.md) the `fuels` package, it's easy to connect to the Network:
+
+<<< @./snippets/connecting-to-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` |
+
+# 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 |
+
+# More
+
+If you want to connect to `localhost`, check this:
+
+- [Running a local Fuel node](./running-local-node.md)

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

@@ -1,11 +1,8 @@
 # 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/). This guide covers:
+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 covers:
 
-1. Installing all tools needed to develop with the Fuel ecosystem.
-
-2. Writing your first Sway Project.
-
-3. Deploying your contract.
-
-4. Building a simple front-end dApp to interact with your deployed contract.
+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/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](/guide/getting-started/installation)
+1. [Connecting to the Network](/guide/getting-started/connecting-to-network)
+1. [Running a local Fuel node](/guide/getting-started/running-local-node)
+1. [React Example](/guide/getting-started/react-example)
+1. [CDN Usage](/guide/getting-started/cdn-usage)
+1. [Further Resources](/guide/getting-started/further-resources)

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-network.md)

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

@@ -0,0 +1,31 @@
+# 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;
+```

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

@@ -0,0 +1,46 @@
+# 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)

apps/docs/src/guide/getting-started/snippets/connecting-to-localnode.ts → apps/docs/src/guide/getting-started/snippets/connecting-to-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();