Icon HelpCircleForumIcon Link

⌘K

Icon HelpCircleForumIcon Link
Guides /
Frontend Quickstart

Icon LinkFrontend/Fullstack Quickstart

Getting started with Fuel as a frontend or fullstack developer is as simple as:

  1. Installing fuelup
  2. Generating a counter dapp
  3. Running the project locally

Icon LinkInstallation

To install the Fuel toolchain, you can use the fuelup-init script. This will install forc, forc-client, forc-fmt, forc-lsp, forc-wallet as well as fuel-core in ~/.fuelup/bin. 

curl https://install.fuel.network | sh
Icon InfoCircle

Having problems? Visit the installation guide or post your question in our forum Icon Link.

If you're using VSCode, we recommend installing the Sway extension Icon Link.

Icon LinkDevnet toolchain

To use the devnet toolchain, run the commands below: 

fuelup self update
fuelup toolchain install devnet
fuelup default devnet

Icon LinkGenerating a counter dapp

You can generate a full-stack counter dapp in seconds with the create fuels CLI: 

pnpm create fuels

Icon LinkRunning the project locally

Move into the project directory. Assuming you named the project my-fuel-project, you can run: 

cd my-fuel-project

Next, run the following command to start a local development node: 

pnpm fuels:dev

The local endpoint for node will be http://localhost:4000/graphql.

Next, open a new terminal in the project directory, and run the following command to start the frontend: 

pnpm dev

The frontend will be running at http://localhost:3000 Icon Link.

While the local node is running, any changes you make to the Sway contract inside the sway-contract folder will automatically trigger several updates:

  1. The contract gets rebuilt using the forc build command.
  2. The contract will be redeployed to the local node using the forc deploy command .
  3. New TypeScript types for the contract and a file called contract-ids.json with the new contract ID will be generated in the src/sway-api folder.

This means you don't need to worry about updating the contract ID, ABI, or TypeScript types while you develop.

Icon LinkNext Steps

Ready to learn more? Check out the following resources: