onflow / onflow/docs

Document how to properly configure React SDK Cadence imports

Open
#1,399 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
13
Forks
81
PR merge metrics
No merged PRs in 30d

Description

Problem

Currently, we don't clearly callout how users should configure their React SDK (/FCL) project to import files and configuration from their Cadence project. The "Simple Frontend" demo intentionally simplifies this import to a string literally directly in the JS code, but this feels to be a footgun instead of an advantage.

This impacts AI tooling, where after searching our docs, it will always write Cadence as string literals instead of importing from a *.cdc file.

Suggested Solution

Personally, I feel that we should just demonstrate the correct import syntax in the Simple Frontend tutorial. We should always attempt to guide developers through our normative development process, and teaching developers to interact with the network in this way rather than perpetuating patterns that inevitably become problemmatic down the line.

The corollary would be, If we feel that the setup of the import syntax is too complicated to describe in our "Simple Frontend", it should be a signal that it's time to re-evaluate these patterns and investigate any improvements we can make to tooling (e.g. binding generation potentially offers a more streamlined development process).

Alternative Solution

Create a standalone page/tutorial. This is a foundational aspect of developer experience that just feels underdocumented right now.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the Simple Frontend tutorial and the React SDK (/FCL) import guidance first. Document the normative way to import Cadence files and configuration, or determine whether a standalone tutorial is more appropriate; done means developers are no longer directed toward Cadence string literals.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
developer-experience, documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
Half a day
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.