A basic React/NextJS project showing how to use the Flow Client Library (FCL)

Related tags

React react flow template nextjs starter cadence
Overview

How to use the Flow Client Library (FCL) with SvelteKit

Everything you need to build a SvelteKit project with the Flow Client Library (FCL).

For a SvelteKit example, see my other repo: https://github.com/muttoni/fcl-sveltekit

Live demo

image

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

Before creating a production version of your app, install an adapter for your target environment. Then:

npm run build

You can preview the built app with npm run preview, regardless of whether you installed an adapter. This should not be used to serve your app in production.

You might also like...

Webpack is an open-source JavaScript module bundler. This includes basic setup files to help me not redo all the setups for webpack when starting a new project.

Webpack Setup Webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript, but it can transform front-end assets such as

Jun 23, 2022

A portfolio built in React and NextJS. Simple, clean, and fast.

A portfolio built in React and NextJS. Simple, clean, and fast.

Personal Portfolio A portfolio built in React and NextJS. Simple, clean and fast. Note: The logo and banner used in the project are my intellectual pr

Jan 2, 2023

Nextjs CRUD with React Context API and Tailwind CSS

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Sep 25, 2022

Twitter-Clone-Nextjs - Twitter Clone Built With React JS, Next JS, Recoil for State Management and Firebase as Backend

Twitter Clone This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn de

Feb 7, 2022

Nextjs-components: A collection of React components

Nextjs-components: A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation Blog post from 01/09/2022 Todo's Unit tes

Nov 30, 2022

This is a movie app project using imdb database created by nextjs and tailwind css.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Dec 24, 2021

Boilerplate for a NextJS and Supabase Project. Including full authentication with sign up, login and password recovery.

NextJS x Supabase Boilerplate Getting Started Environment variables Create the enviroment variables with the following command cp .env.local.dist .env

Jun 13, 2022

react-dialog is a custom react hook to use a dialog easily

react-dialog react-dialog is a custom react hook to use a dialog easily. Documentation To use react-dialog follow the documentation. useDialog Returns

Mar 29, 2022

Hello, world! :) Welcome to this project. This is a free web repository that you can use as a blog for your website. This project is dedicated to "Sina Sattari" as an honorary title.

QURNO News/Technology Web Application Greetings and courtesy to all of you dear colleagues and friends of the DarkDragons team. We came back with anot

Sep 8, 2022
Comments
  • feat: add flow emulator and dev-wallet

    feat: add flow emulator and dev-wallet

    Here is my first attempt at adding the flow emulator and dev-wallet. Is there an alternative to manually deploying the Profile contract after starting the emulator? https://docs.onflow.org/flow-cli/project-contracts/ seems to imply that by adding the Profile contract to the deployment section of the flow.json should deploy the contract upon starting the emulator; however, that is currently not occurring.

    opened by fubz 5
  • Example of emulator and dev-wallet?

    Example of emulator and dev-wallet?

    I'd love to see an example integrated with the emulator and dev-wallet. I can't for the life of me get them hooked up into a dev environment. Even the Kitty-items example is unable to connect to the dev api.

    enhancement good first issue 
    opened by fubz 3
Owner
Andrea Muttoni
Andrea Muttoni
GitHub https://fcl-nextjs-quickstart.vercel.app
A simple project showing the usage of useState, useEffect and conditional rendering in React

Getting Started with Tour-sample React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can ru

Amaechi johnkingsley 1 Jul 30, 2022
Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Kyrillos Hany 5 Mar 11, 2022
Basic React Project with React Router, ContextAPI and Login

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 26 Jan 3, 2023
🔄 Basic project to start studying React and Typescript. With it you can translate text to binary or morse language. This project addresses the creation of routes and components.

max-conversion Projeto criado para iniciar nos estudos de React e Typescript Basic project to gain knowledge in react Na plataforma é possível convert

Igor Neves 3 Feb 12, 2022
Shopify app using NextJS. No custom NextJS server needed.

Shopify NextJS App Example An example app built with NextJS that can be setup and deployed to production in seconds on Vercel. All the glory goes back

reda 35 Nov 29, 2022
IPL Loader to load IPL's as soon as Player is in range. This also fixes, IPL's not showing on reconnect in debug mode.

ALT-V IPL-Loader IPL Loader to load IPL’s as soon as Player is in range of the IPL Coordinates. This also fixes, IPL’s not showing on reconnect in deb

null 3 Oct 9, 2022
Math Magicians is a website for performing basic maths calculations, This website is built using REACT and JavaScript libraries.

Math Magicians Math Magicians is a website for performing basic maths calculations, This website is built using REACT and JavaScript libraries. Screen

Ranjeet Singh 12 Oct 20, 2022
here in this git repo you will get react js basic layout, having in responsive mode.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 3 Feb 23, 2022
Twitter-client - client for twitter-clone

Twitter (Client-Side Rendering) Please star this repo if you like ⭐ It's motivates me a lot! Getting Started This project was bootstrapped with Create

Ruslan Shvetsov 3 Jul 29, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023