Merge pull request #28 from AElfProject/feature/author

Feature/author

.gitignore

@@ -32,6 +32,7 @@ dist-ssr
 
 # lock
 *-lock.yarl
+*-lock.yaml
 *-lock.json
 
 apps/aelf-template/.next

apps/aelf-template/.gitignore

@@ -29,6 +29,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
@@ -39,3 +40,9 @@ next-env.d.ts
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+# npm pack local test
+package
+
+# git ls-files > filelist.txt
+filelist.txt

apps/aelf-template/appsettings.ts

@@ -3,7 +3,7 @@ export const APP_SETTINGS: IAppSettings = {
     "serviceName": "create-aelf-dapp",
     "serviceVersion": "v1.0",
     // https://opentelemetry.io/docs/languages/sdk-configuration/otlp-exporter/
-    "collectorEndpoint": "http://localhost:8093/v1/traces",
+    "collectorEndpoint": "/v1/traces",
     "tracerName": "create-aelf-dapp-tracer",
     ignoreUrls: [
       /localhost:8093\/sockjs-node/,

apps/aelf-template/next.config.mjs

@@ -35,4 +35,4 @@ disableLogger: true,
 // https://docs.sentry.io/product/crons/
 // https://vercel.com/docs/cron-jobs
 automaticVercelMonitors: true,
-});
+});

apps/aelf-template/nginx.template.md

@@ -0,0 +1,83 @@
+# 1. Prepare
+```bash
+brew install nginx
+
+# turn to the directory of nginx
+mkdir https
+openssl req -nodes -new -x509 -keyout server.key -out server.crt
+```
+
+# 2. Config
+```nginx
+server {
+    listen 443 ssl;
+    server_name localhost;
+
+    ssl_certificate     /opt/homebrew/etc/nginx/https/server.crt;
+    ssl_certificate_key /opt/homebrew/etc/nginx/https/server.key;
+
+    # template
+    location / {
+        proxy_pass http://localhost:3005;
+        proxy_ssl_verify off;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    # https://github.com/AElfProject/backend-templates
+    location /v1/token {
+        proxy_pass https://localhost:44376/token;
+        proxy_ssl_verify off;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    # https://github.com/AElfProject/backend-templates
+    location /v1/api {
+        proxy_set_header host $host;
+        proxy_set_header X-real-ip $remote_addr;
+        proxy_set_header X-forward-for $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_ssl_verify off;
+        proxy_pass https://localhost:44376/api;
+    }
+    
+    # https://github.com/AElfProject/aelf-observability-setup
+    location /v1/traces {
+        proxy_set_header host $host;
+        proxy_set_header X-real-ip $remote_addr;
+        proxy_set_header X-forward-for $proxy_add_x_forwarded_for;
+        proxy_pass http://127.0.0.1:4316/v1/traces;
+    }
+
+    # packages/server-socket-io
+    location /socket-io/ {
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header Host $host;
+
+        proxy_pass http://localhost:3006;
+
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+    }
+
+    # packages/server-chaingpt
+    location /api/chaingpt {
+        proxy_set_header host $host;
+        proxy_set_header X-real-ip $remote_addr;
+        proxy_set_header X-forward-for $proxy_add_x_forwarded_for;
+        proxy_pass http://127.0.0.1:3007/chaingpt;
+    }
+}
+```
+
+# 3. Run
+```bash
+nginx -t
+nginx -s reload
+```

apps/aelf-template/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "license": "MIT",
   "scripts": {
-    "dev": "next dev -p 3005",
+    "dev": "NODE_OPTIONS='--trace-warnings' next dev -p 3005",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

apps/aelf-template/src/app/demos/api-all-in-one/author/csrfTokenProvider.tsx

@@ -0,0 +1,34 @@
+"use client"
+import {createContext, ReactNode, useEffect, useState} from 'react';
+import {RequestAllInOne} from 'request-all-in-one';
+interface Props {
+  readonly children: ReactNode;
+}
+export const CSRFTokenContext = createContext<string>('');
+
+export const CSRFTokenProvider = ({ children }: Props) => {
+  const [token, setToken] = useState<string>();
+  useEffect(() => {
+    const token = localStorage.getItem('csrfToken');
+    if (token) {
+      setToken(token);
+    }
+    const fetchToken = async () => {
+      const client = new RequestAllInOne({});
+      const response = await client.post('/v1/token');
+      if (response.code && response.code === '20000') {
+        localStorage.setItem('csrfToken', response.data);
+        setToken(response.data);
+        return response.data;
+      }
+      throw Error('fetch token error');
+    }
+    fetchToken().then(token => {
+      console.log('fetch token done', token);
+    }).catch(error => {
+      console.log('fetch token error: ', error);
+    });
+  }, []);
+
+  return <CSRFTokenContext.Provider value={token}>{children}</CSRFTokenContext.Provider>;
+};

apps/aelf-template/src/app/demos/api-all-in-one/author/layout.tsx

@@ -0,0 +1,9 @@
+import { CSRFTokenProvider } from '@/app/demos/api-all-in-one/author/csrfTokenProvider';
+
+export default function Layout({
+  children, // will be a page or nested layout
+}: {
+  children: React.ReactNode
+}) {
+  return <CSRFTokenProvider>{children}</CSRFTokenProvider>;
+}

apps/aelf-template/src/app/demos/api-all-in-one/author/page.tsx

@@ -0,0 +1,42 @@
+'use client';
+import {RequestAllInOne} from 'request-all-in-one';
+import {useContext, useState} from 'react';
+import {Button} from 'antd';
+import {CSRFTokenContext} from '@/app/demos/api-all-in-one/author/csrfTokenProvider';
+
+const client = new RequestAllInOne({});
+export default function Author() {
+  const csrfToken = useContext(CSRFTokenContext);
+  console.log('csrfToken: ', csrfToken);
+  const [data, setData] = useState<any>('');
+
+  return <>
+    <div>
+      <Button onClick={async () => {
+        const response = await client.post('/v1/api/app/author', {
+          body: {
+            "name": "string",
+            "birthDate": "2024-08-08T10:55:44.335Z",
+            "shortBio": "string"
+          },
+          headers: {
+            RequestVerificationToken: csrfToken
+          }
+        });
+        setData(JSON.stringify(response));
+      }}>Post Author</Button>
+      <Button onClick={async () => {
+        const response = await client.get('/v1/api/app/author/620a13a3-0d9e-e900-2b28-3a143e37d66d');
+        setData(JSON.stringify(response));
+      }}>Get Author Info</Button>
+      <div>{data}</div>
+    </div>
+    <div>
+      <div>Request token and storage in local by default</div>
+      <Button onClick={async () => {
+        const response = await client.post('/token');
+        setData(JSON.stringify(response));
+      }}>Post to Get Token</Button>
+    </div>
+  </>;
+}

apps/aelf-template/src/app/demos/api-all-in-one/layout.tsx

@@ -1,14 +1,15 @@
 import { Menu } from 'antd';
 import Link from 'next/link';
-import type { MenuProps } from 'antd';
+// import type { MenuProps } from 'antd';
 
-type MenuItem = Required<MenuProps>['items'][number];
+// type MenuItem = Required<MenuProps>['items'][number];
 
-const items: MenuItem[] = [
+const items: ({ label: JSX.Element; key: string })[] = [
   { key: '1', label: <Link href="/demos/api-all-in-one/fetch">Fetch</Link> },
   { key: '2', label: <Link href="/demos/api-all-in-one/graphql">Graphql</Link> },
   { key: '3', label: <Link href="/demos/api-all-in-one/socket">Socket</Link> },
   { key: '4', label: <Link href="/demos/api-all-in-one/stream">Stream</Link> },
+  { key: '5', label: <Link href="/demos/api-all-in-one/author">Author</Link> },
 ];
 export default function APIAllInOneLayout({
   children, // will be a page or nested layout

apps/aelf-template/src/app/demos/api-all-in-one/stream/page.tsx

@@ -10,7 +10,8 @@ export default function Fetch() {
     <div>
       <Button
         onClick={async () => {
-          await fetchEventSource('http://localhost:3100/api/chaingpt', {
+          // await fetchEventSource('http://localhost:3100/api/chaingpt', {
+          await fetchEventSource('/api/chaingpt', {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',

apps/aelf-template/src/app/demos/opentelemetry-request/page.tsx

@@ -39,7 +39,7 @@ const getData = (url: string) => new Promise((resolve, reject) => {
   req.send();
 });
 // const URL_TEST = 'https://httpbin.org/get?trace=233333';
-const URL_TEST = 'http://localhost:8093/sharp/api/app/book';
+const URL_TEST = '/v1/sharp/api/app/book';
 export default function Page() {
   return <>
    <Button onClick={() => {

apps/aelf-template/src/app/demos/opentelemetry/page.tsx

@@ -22,9 +22,11 @@ const getData = (url: string) => new Promise((resolve, reject) => {
   req.send();
 });
 // const URL_TEST = 'https://httpbin.org/get?trace=233333';
-const URL_TEST = 'http://localhost:8093/sharp/api/app/book';
+const URL_TEST = '/v1/api/app/book';
 export default function Page() {
+  // Solution1: use useContext
   // const webTracerWithZone = useContext(OpentelemetryContext);
+  // Solution2: use useOpentelemetry
   const webTracerWithZone = useOpentelemetry();
 
   return <>

apps/aelf-template/src/app/demos/sentry/page.jsx

@@ -24,7 +24,7 @@ const getData = (url) => new Promise((resolve, reject) => {
   req.send();
 });
 // const URL_TEST = 'https://httpbin.org/get';
-const URL_TEST = 'http://localhost:8093/sharp/api/app/book';
+const URL_TEST = '/v1/api/app/book';
 
 export default function Page() {
   return (

apps/aelf-template/src/config/demo/configMenu.ts

@@ -53,14 +53,14 @@ export const menuList: IMenuItemData[] = [
     label: 'ChainGPT',
     href: '/demos/chaingpt',
   },
-  {
-    label: 'socket',
-    href: '/demos/socket',
-  },
-  {
-    label: 'Graphql',
-    href: '/demos/graphql/server',
-  },
+  // {
+  //   label: 'socket',
+  //   href: '/demos/socket',
+  // },
+  // {
+  //   label: 'Graphql',
+  //   href: '/demos/graphql/server',
+  // },
   {
     label: 'API All in one',
     href: '/demos/api-all-in-one',
@@ -69,8 +69,8 @@ export const menuList: IMenuItemData[] = [
     label: 'opentelemetry',
     href: '/demos/opentelemetry',
   },
-  {
-    label: 'opentelemetry-request',
-    href: '/demos/opentelemetry-request',
-  },
+  // {
+  //   label: 'opentelemetry-request',
+  //   href: '/demos/opentelemetry-request',
+  // },
 ];

apps/create-aelf-dapp/lib/generator/templates/.github/workflows/jestTest.yml

@@ -7,9 +7,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: '20'  # Your node version, default 20 in 2024
 

apps/create-aelf-dapp/lib/generator/templates/.github/workflows/nextLint.yml

@@ -7,14 +7,14 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: '20'  # Your node version, default 20 in 2024
 
       - name: Cache node modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         env:
           cache-name: cache-node-modules
         with:

apps/create-aelf-dapp/lib/generator/templates/.gitignore

@@ -13,6 +13,8 @@
 /.next/
 /out/
 
+/.idea/
+
 # production
 /build
 
@@ -27,6 +29,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
@@ -37,3 +40,9 @@ next-env.d.ts
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+# npm pack local test
+package
+
+# git ls-files > filelist.txt
+filelist.txt