Create React web3 App

Create React web3 apps with no build configuration.

• Creating an App – How to create a new app.

Create React App works on macOS, Windows, and Linux. If something doesn’t work, please file an issue.

Quick Overview

npx @ari2692/create-react-web3-app my-app
cd my-app
npm start

Then open http://localhost:3000/ to see your app. When you’re ready to deploy to production, create a minified bundle with npm run build.

Get Started Immediately

You don’t need to install or configure tools like webpack or Babel. They are preconfigured and hidden so that you can focus on the code.

Create a project, and you’re good to go.

Creating an App

You’ll need to have Node 14.0.0 or later version on your local development machine (but it’s not required on the server). We recommend using the latest LTS version. You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

To create a new app, you may choose one of the following methods:

npx

npx @ari2692/create-react-web3-app my-app

(npx is a package runner tool that comes with npm 5.2+ and higher, see instructions for older npm versions)

It will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── contract
    ├── contracts
        ├── Lock.sol
    ├── node_modules
    ├── scripts
        ├── deploy.js
    ├── test
        ├── Lock.js
    ├── .gitignore
    ├── hardhat.config.js
    └── package.json
    └── README.md
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.jsx
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

No configuration or complicated folder structures, only the files you need to build your app. In the contract directory add your contracts in the designated "contracts" folder and adhere to the instructions outlined in the README.md within the contract directory. Once the installation is done, you can open your project folder:

cd my-app

Before we move ahead with the next steps, it's important to ensure that the PROJECT_ID is configured accurately.

Here's a straightforward guide to follow:

Begin by launching your preferred web browser and navigating to 
[https://cloud.walletconnect.com/sign-in]. Once there, log in and initiate the creation of a new project. This will provide you with the essential PROJECT_ID.

Now, delve into your project files and locate the src folder. Within this folder, pinpoint the app.jsx file.

Open the app.jsx file using the code editor you're most comfortable with.

Within the app.jsx file, keep an eye out for the specific section designated for inserting the YOUR_PROJECT_ID. It's in this spot that you'll be inserting the distinctive PROJECT_ID you acquired earlier. This ID plays a critical role in facilitating connections and ensuring authentication through the WalletConnect service.

Once you've seamlessly integrated your PROJECT_ID in place of "YOUR_PROJECT_ID", make sure to save the app.jsx file.

By successfully carrying out these steps, we'll be fully equipped on the project setup front.

Inside the newly created project, you can run some built-in commands:

npm start or yarn start

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.

npm test or yarn test

Runs the test watcher in an interactive mode. By default, runs tests related to files changed since the last commit.

Read more about testing.

npm run build or yarn build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed.

License

Create React App is open source software.