Icon HelpCircleForumIcon Link

⌘K

Icon HelpCircleForumIcon Link
Guides /
Frontend Quickstart

Icon LinkNext.js Fullstack Quickstart

Icon InfoCircle

A non-NextJs app will be available once this issue Icon Link is resolved

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 LinkAlready have fuelup installed?

If you already have fuelup installed, run the commands below to make sure you are on the most up-to-date toolchain. 

fuelup self update
fuelup update
fuelup default latest

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/v1/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: