next-aelf - a minimalistic next framework demo for AELF

This project was bootstrapped with Create Next App.

Introduction

next-aelf is a collection of demo which allow you to set up your own aelf project in nextjs quickly and easily.
We have 3 parts related to manage a complete project.

• Example. It will guide you how to interact with wallet, use media query, use redux for managing application state, interact with a local or remote aelf node using a HTTP connection.
• MicroApp. It will guide you how to use aelf in a micro front-end framework. The following documentation will guide you through installing and running next-aelf. Of course it's optional.
• Monitor. It will guide you how to add monitor in your project. Of course it's optional.

How to use

In the project directory, you can run:

yarn

Install dependencies.

yarn start

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

The page will reload when you make changes.
You may also see any lint errors in the console.

yarn build

Builds the app for production to the .next 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!

yarn start

Start the application in production mode. The application should be compiled with yarn build first.

Monitor

Sentry

Features:

• Automatic Error Tracking with source maps for both JavaScript and TypeScript
• Events enriched with device data
• Breadcrumbs created for outgoing HTTP request with XHR and Fetch, and console logs
• Release health for tracking crash-free users and sessions
• Automatic Performance Monitoring for both the client and server, from version 6.5.0

Install

If you cannot install @sentry/nextjs successfully maybe because of network error and you can use the script SENTRYCLI_CDNURL=https://github.com/getsentry/sentry-cli/releases/download/ yarn add @sentry/nextjs.

Rewrite your own config files

• Two files in the root directory of your project, sentry.client.config.js and sentry.server.config.js.
  In these files, add your initialization code for the client-side SDK and server-side SDK. See more options detail here

• Use withSentryConfig to extend the default Next.js usage of Webpack. The file is in web/next-aelf/build/plugin.js.
  This will do two things:

  • Automatically call the code in sentry.server.config.js and sentry.client.config.js, at server start up and client page load, respectively. Using withSentryConfig is the only way to guarantee that the SDK is initialized early enough to catch all errors and start performance monitoring.
  • Generate and upload source maps to Sentry, so that your stacktraces contain original, demangled code.

• Configure Source Maps. If you want to upload sourcemap to sentry, you need to set the productionBrowserSourceMaps option to true in web/next-aelf/build/common.js. If you want to hidden sourcemap, add a sentry object to moduleExports above, and set the hideSourceMaps option to true in web/next-aelf/build/common.js.

• Configure sentry-cli. The SentryWebpackPlugin uses sentry-cli to manage releases and source maps. The URL, organization, and project properties identify your organization and project, and the auth tokenIn search, a key-value pair or raw search term. Also, a value used for authorization. authenticates your user account. You need change your own info in the root directory of your project, .sentryclirc

Firebase

Firebase helps you understand how people use your web, Apple, or Android app. At the heart of Firebase is Google Analytics which is an app measurement solution, available at no charge, that provides insight on app usage and user engagement. See more detail here

Install

The engine "node" expected version ">= 14.20.0".

Rewrite your own config files

Initialize Firebase in your app and create a Firebase App object in web/next-aelf/src/utils/firebase.ts.

Start logging events

After you have initialized the Analytics service, you can begin to log events with the logEvent() method. We show a situationdemonstrates how to log a recommended event to indicate a user has click a button in your app in web/next-aelf/src/page-components/Monitor/index.tsx.\

When uing React 18, if you want to gather PageView or UserView data through useEffect hook. Take care of that when project's mode is strict, useEffect hook is triggered twice just in development mode and only once in production mode.

Guide

Codespaces

Features:

• Can spin up Codespaces from any device with internet access.
• Codespaces starts instantly from any repository on GitHub with pre-configured, secure environments.
• Can code, develop models, and collaborate in powerful compute environments that spin up in seconds.
• Fix bugs and secure code right from an issue.

Creating your codespace

• Creating your codespace. Navigate to the https://github.com/AElfProject/aelf-boilerplate repository.
• Click Code, then select Codespaces, then click +button(Create a codespace on dev).

Running the application

Once your codespace is created, the repository will be automatically cloned into it. Now you can run the application and launch it in a browser.

• When the terminal becomes available, enter the command yarn & yarn dev. This command runs the script labeled "dev" in the package.json file, which starts up the web application defined in the sample repository.
• When your application starts, the codespace recognizes the port the application is running on and displays a prompt to let you know it has been forwarded.
• Click Open in Browser to view your running application in a new tab.

AELF chain node

We provide two chains which allow you to interact with a remote aelf node. You can load a wallet, get a system contract address, or get a contract instance by contract address etc.

• MainChain Aelf: https://explorer-test.aelf.io/
• SideChain Aelf: https://explorer-test-side02.aelf.io/