Skip to content

Commit

Permalink
docs: add create-fuels CLI docs under tooling (#2030)
Browse files Browse the repository at this point in the history
  • Loading branch information
Dhaiwat10 committed Apr 12, 2024
1 parent 498cffe commit 2ae1f8b
Show file tree
Hide file tree
Showing 5 changed files with 177 additions and 83 deletions.
4 changes: 4 additions & 0 deletions .changeset/two-crabs-switch.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
---

docs: add `create-fuels` CLI docs under tooling
11 changes: 9 additions & 2 deletions apps/docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -384,7 +384,7 @@ export default defineConfig({
{
text: 'Unit conversion',
link: '/guide/utilities/unit-conversion',
}
},
],
},
{
Expand Down Expand Up @@ -455,7 +455,14 @@ export default defineConfig({
items: [
{
text: 'npm create fuels',
link: '/guide/cli/npm-create-fuels',
link: '/guide/npm-create-fuels/',
collapsed: true,
items: [
{
text: 'Options',
link: '/guide/npm-create-fuels/options',
},
],
},
{
text: 'fuels',
Expand Down
81 changes: 0 additions & 81 deletions apps/docs/src/guide/cli/npm-create-fuels.md

This file was deleted.

113 changes: 113 additions & 0 deletions apps/docs/src/guide/npm-create-fuels/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
# npm create fuels

`npm create fuels` is a command line tool that helps you scaffold a new full-stack Fuel dApp.

## Getting Started

Run the following command in your terminal to get started:

::: code-group

```sh [npm]
npm create fuels
```

```sh [pnpm]
pnpm create fuels
```

:::

You will be greeted with a few simple questions about your project. Answer them as you see fit.

```md
◇ What is the name of your project?
│ my-fuel-project
◇ Select a package manager:
│ pnpm
◆ Which Sway programs do you want? (space to toggle)
│ ● Contract
│ ○ Predicate
│ ○ Script
```

The tool will then scaffold the project and install the necessary dependencies for you. The project's directory structure will look something like this:

```md
my-fuel-project
├── src
│ ├── pages
│ │ ├── index.tsx
│ │ └── ...
│ ├── components
│ │ └── ...
│ ├── styles
│ │ └── ...
│ └── lib.ts
├── public
│ └── ...
├── sway-programs
│ ├── contract
│ │ └── src
│ │ └── main.sw
│ ├── Forc.lock
│ └── Forc.toml
├── fuels.config.ts
├── package.json
└── ...
```

The most important file in this setup is the `./fuels.config.ts` file, which contains information about your Sway contracts, your local Fuel node, and where your TypeScript types are generated. You can read more about this file in the [Fuels CLI documentation](../fuels/config-file.md).

The `sway-programs` directory contains your Sway programs.

The `src` directory contains your frontend code.

## Running the Project

To run your new full-stack Fuel dApp, you will need to start two processes:

### 1. The `fuels:dev` process

This process will start a local Fuel node on your machine, and keep watch for any changes you make to your Sway smart contracts. Whenever you make a change, the node will automatically rebuild and deploy your contracts to the local Fuel node. It will also automatically keep generating TypeScript types for your contracts, so that you can use them in your frontend code.

To start the `fuels:dev` process, run the following command in your terminal:

::: code-group

```sh [npm]
npm run fuels:dev
```

```sh [pnpm]
pnpm fuels:dev
```

:::

### 2. The Frontend Dev Server

To run your frontend dev server, run the following command in your terminal:

::: code-group

```sh [npm]
npm run dev
```

```sh [pnpm]
pnpm dev
```

:::

Your frontend should now be running at `http://localhost:3000`.

---

You should now have a local full-stack Fuel development environment that looks like this:

![Fullstack Fuel Dev Workflow](../../public/creating-a-fuel-dapp-create-fuels-split-view.png)
51 changes: 51 additions & 0 deletions apps/docs/src/guide/npm-create-fuels/options.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# Options

The `npm create fuels` command has several command-line options that you can use to customize your project.

::: code-group

```sh [pnpm]
pnpm create fuels [project-name] [options]
```

```sh [npm]
npm create fuels [project-name] [options]
```

:::

## `-c, --contract`

Notifies the tool to include a Sway contract program in your project.

## `-p, --predicate`

Notifies the tool to include a Sway predicate program in your project.

## `-s, --script`

Notifies the tool to include a Sway script program in your project.

## `--pnpm`

Notifies the tool to use pnpm as the package manager to install the necessary dependencies.

## `--npm`

Notifies the tool to use npm as the package manager to install the necessary dependencies.

## `-cs, -cp, -sp, -cps`

Shorthand to include a combination of contract, script and predicate programs.

## `--verbose`

Enables verbose logging. Useful when debugging issues with the tool.

## `-h, --help`

Displays a help message with all available options.

## `-V, --version`

Displays the version number of the `npm create fuels` command.

0 comments on commit 2ae1f8b

Please sign in to comment.