Refactor/nextjs others ssr

.env.example

@@ -0,0 +1,13 @@
+# for handling environment variables
+# use .env on every environment
+NEXT_PUBLIC_APP_NAME = explorer.aelf.io
+NEXT_PUBLIC_BUNDLE_ANALYZER = false
+NEXT_PUBLIC_CSS_APP_PREFIX = ant
+NEXT_PUBLIC_SENTRY_DSN = your dsn
+__NEXT_REACT_ROOT = false
+# use .env.local on development
+# use .env.production on production
+BUILD_ENDPOINT=https://explorer-test.aelf.io
+BUILD_ENDPOINT_SOCKET=https://explorer-test.aelf.io
+BUILD_ENDPOINT_CMS=https://explorer-test.aelf.io
+BUILD_ENDPOINT_CHAIN=https://explorer-test.aelf.io

.gitignore

@@ -25,6 +25,8 @@ yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 
+#env
+.env
 # local env files
 .env*.local
 # production env files
@@ -38,3 +40,9 @@ yarn-error.log*
 
 # shell
 *.sh
+
+# cache
+.eslintcache
+
+.sentryclirc
+baseConfig.js

.sentryclirc.example

@@ -0,0 +1,14 @@
+[defaults]
+url=https://sentry.io/
+project=aelf-block-explorer
+org=ienyan
+
+[auth]
+token=your token
+
+[log]
+level=debug
+
+[http]
+verify_ssl=false
+check_ssl_revoke=false

README.md

@@ -2,6 +2,10 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Getting Started
 
+1. add .sentryclirc referring .sentryclirc.example
+2. add .env、.env.local refferring .env.example
+3. add baseConfig.js including prodRewrites and firebaseConfig, prodRewrites is just like `build/rewrites/development.js`, firebaseConfig can be found at firebase settings.
+
 ```bash
 # install dependencies
 $ yarn
@@ -29,4 +33,9 @@ The `pages/api` directory is mapped to `/api/*`. Files in this directory are tre
 
 ### Production
 
-Change the chain node URL in script such as `yarn build -- --CHAIN_ENDPOINT https://aelf-test-node.aelf.io`
+```bash
+# Change the chain node URL in script such as
+yarn beforeBuild -- --CHAIN_ENDPOINT https://aelf-test-node.aelf.io
+yarn build
+yarn start
+```

build/common.js

@@ -1,11 +1,63 @@
 const rewritesConfig = require('./rewrites/index');
+const { ROOT, getLessVariables } = require('./util.js');
+const path = require('path');
+const { NEXT_PUBLIC_CSS_APP_PREFIX, NEXT_PUBLIC_CSS_EXAMPLE_PREFIX } = process.env;
 module.exports = {
-  reactStrictMode: true,
+  // `Warning: findDOMNode is deprecated in StrictMode.` when use antd
+  reactStrictMode: false,
   concurrentFeatures: true,
+  i18n: {
+    locales: ['en'],
+    defaultLocale: 'en',
+  },
   async rewrites() {
     return rewritesConfig;
   },
+  lessLoaderOptions: {
+    lessOptions: {
+      javascriptEnabled: true,
+      modifyVars: Object.assign(getLessVariables(path.resolve(ROOT, 'src/assets/theme/color.less')), {
+        '@app-prefix': NEXT_PUBLIC_CSS_EXAMPLE_PREFIX,
+        '@ant-prefix': NEXT_PUBLIC_CSS_APP_PREFIX,
+      }),
+      lessVarsFilePath: 'src/assets/theme/color.less', // optional
+      lessVarsFilePathAppendToEndOfContent: false, // optional
+    },
+  },
   images: {
-    domains: ['raw.githubusercontent.com'],
+    disableStaticImages: true,
+  },
+  webpack: function (config) {
+    config.module.rules.push(
+      {
+        test: /\.(jpe?g|png|gif|svg|webp)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              name: 'static/img/[name]-[hash:5].[ext]',
+              limit: 8192,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(woff|woff2|ttf|eot|svg)(#.+)?$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              name: 'static/fonts/[name].[ext]',
+              limit: 8192,
+            },
+          },
+        ],
+      },
+    );
+    return config;
+  },
+  productionBrowserSourceMaps: true,
+  sentry: {
+    hideSourceMaps: true,
   },
 };

build/plugin.js

@@ -1,58 +1,23 @@
-const path = require('path');
 const withAntdLess = require('next-plugin-antd-less');
-const { NEXT_PUBLIC_CSS_APP_PREFIX, NEXT_PUBLIC_BUNDLE_ANALYZER, NEXT_PUBLIC_CSS_EXAMPLE_PREFIX } = process.env;
+const { NEXT_PUBLIC_BUNDLE_ANALYZER } = process.env;
+const { withSentryConfig } = require('@sentry/nextjs');
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: NEXT_PUBLIC_BUNDLE_ANALYZER === 'true',
 });
+const sentryWebpackPluginOptions = {
+  // Additional config options for the Sentry Webpack plugin. Keep in mind that
+  // the following options are set automatically, and overriding them is not
+  // recommended:
+  //   release, url, org, project, authToken, configFile, stripPrefix,
+  //   urlPrefix, include, ignore
 
-const { ROOT, getLessVariables } = require('./util.js');
-
+  silent: true, // Suppresses all logs
+  include: '.next',
+  configFile: '.sentryclirc',
+  urlPrefix: '~/_next',
+};
 module.exports = [
   [withBundleAnalyzer],
-  [
-    // withLess,
-    withAntdLess({
-      lessLoaderOptions: {
-        lessOptions: {
-          javascriptEnabled: true,
-          modifyVars: Object.assign(getLessVariables(path.resolve(ROOT, 'src/assets/theme/color.less')), {
-            '@app-prefix': NEXT_PUBLIC_CSS_EXAMPLE_PREFIX,
-            '@ant-prefix': NEXT_PUBLIC_CSS_APP_PREFIX,
-          }),
-        },
-      },
-      images: {
-        disableStaticImages: true,
-      },
-      webpack: function (config) {
-        config.module.rules.push(
-          {
-            test: /\.(jpe?g|png|gif|svg|webp)$/i,
-            use: [
-              {
-                loader: 'url-loader',
-                options: {
-                  name: 'static/img/[name]-[hash:5].[ext]',
-                  limit: 8192,
-                },
-              },
-            ],
-          },
-          {
-            test: /\.(woff|woff2|ttf|eot|svg)(#.+)?$/,
-            use: [
-              {
-                loader: 'url-loader',
-                options: {
-                  name: 'static/fonts/[name].[ext]',
-                  limit: 8192,
-                },
-              },
-            ],
-          },
-        );
-        return config;
-      },
-    }),
-  ],
+  [withAntdLess],
+  (nextConfig) => withSentryConfig(nextConfig, sentryWebpackPluginOptions),
 ];

build/rewrites/development.js

@@ -14,19 +14,19 @@ module.exports = [
     destination: 'https://explorer-test.aelf.io/cms/:path*',
   },
   {
-    source: '/api/blockChain',
-    destination: 'https://explorer-test.aelf.io/chain/api/blockChain',
+    source: '/api/blockChain/:path*',
+    destination: 'http://10.147.20.67:8888/chain/api/blockChain/:path*',
   },
   {
     source: '/api/:path*',
-    destination: 'https://explorer-test.aelf.io/api/:path*',
+    destination: 'http://10.147.20.67:8888/api/:path*',
   },
   {
     source: '/chain/:path*',
-    destination: 'https://explorer-test.aelf.io/chain/:path*',
+    destination: 'http://10.147.20.67:8888/chain/:path*',
   },
   {
     source: '/socket',
-    destination: 'https://explorer-test.aelf.io/socket',
+    destination: 'http://10.147.20.67:8888/socket',
   },
 ];

build/rewrites/production.js

@@ -1,22 +1,3 @@
-module.exports = [
-  {
-    source: '/api/blockChain',
-    destination: 'https://explorer-test.aelf.io/chain/api/blockChain',
-  },
-  {
-    source: '/api/:path*',
-    destination: 'https://explorer-test.aelf.io/api/:path*',
-  },
-  {
-    source: '/cms/:path*',
-    destination: 'https://explorer-test.aelf.io/cms/:path*',
-  },
-  {
-    source: '/chain/:path*',
-    destination: 'https://explorer-test.aelf.io/chain/:path*',
-  },
-  {
-    source: '/socket',
-    destination: 'https://explorer-test.aelf.io/socket',
-  },
-];
+// git ignore
+const prodRewrites = require('../../baseConfig').prodRewrites;
+module.exports = prodRewrites;

package.json

@@ -1,14 +1,12 @@
 {
-  "name": "next-demo",
+  "name": "aelf-block-explorer",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev:AELF": "CHAIN_ID='AELF' next dev",
-    "dev:tDVW": "CHAIN_ID='tDVW' next dev",
-    "build:AELF": "CHAIN_ID='AELF' next build",
-    "build:tDVW": "CHAIN_ID='tDVW' next build",
-    "start:AELF": "CHAIN_ID='AELF' next start",
-    "start:tDVW": "CHAIN_ID='tDVW' next start",
+    "dev": "next dev",
+    "beforeBuild": "node scripts/queryConfig.js",
+    "build": "next build",
+    "start": " next start",
     "lint": "next lint",
     "dev:analyze": "PORT=4000 ANALYZE=true next dev",
     "prepare": "husky install"
@@ -22,13 +20,13 @@
     "@monaco-editor/react": "^4.4.5",
     "@reduxjs/toolkit": "^1.8.5",
     "@sentry/apm": "^5.19.0",
-    "@sentry/node": "^5.19.0",
+    "@sentry/nextjs": "^7.19.0",
     "@sentry/react": "^5.19.0",
     "aelf-block-scan": "^0.4.1",
     "aelf-bridge": "^0.0.9",
     "aelf-sdk": "3.2.40",
     "aelf-sdk-cross-chain": "^1.0.14",
-    "antd": "4.21.0",
+    "antd": "^4.23.6",
     "apisauce": "^0.16.0",
     "axios": "^0.19.0",
     "axios-hooks": "^3.1.5",
@@ -45,6 +43,7 @@
     "eslint-config-prettier": "6.7.0",
     "eslint-plugin-prettier": "^4.2.1",
     "file-saver": "^2.0.2",
+    "firebase": "^9.13.0",
     "i18next": "^19.0.0",
     "i18next-browser-languagedetector": "^4.0.1",
     "ismobilejs": "^1.1.1",
@@ -56,6 +55,7 @@
     "lodash.throttle": "^4.1.1",
     "lru-cache": "^7.14.0",
     "memoize-one": "^5.1.1",
+    "memory-cache": "^0.2.0",
     "mobx": "^5.1.1",
     "mobx-react": "^5.2.8",
     "mobx-state-tree": "^3.3.0",
@@ -125,7 +125,7 @@
     "copy-webpack-plugin": "^5.0.5",
     "cross-env": "^5.2.1",
     "cssnano": "^4.1.10",
-    "dotenv": "^8.2.0",
+    "dotenv": "^16.0.3",
     "eslint": "^8.23.1",
     "eslint-config-airbnb": "18.0.1",
     "eslint-config-airbnb-base": "^14.0.0",