Skip to content

Commit

Permalink
[optimize] sync Upstream Scaffold
Browse files Browse the repository at this point in the history
  • Loading branch information
TechQuery committed Mar 2, 2024
1 parent b1e6ae9 commit 583ba77
Show file tree
Hide file tree
Showing 19 changed files with 1,688 additions and 1,018 deletions.
6 changes: 5 additions & 1 deletion .env
Original file line number Diff line number Diff line change
@@ -1,2 +1,6 @@
NEXT_PUBLIC_SITE_NAME=Next-Bootstrap.ts
NEXT_PUBLIC_SITE_SUMMARY=React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.
NEXT_PUBLIC_SITE_SUMMARY=React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.

NEXT_PUBLIC_SENTRY_DSN =
SENTRY_ORG =
SENTRY_PROJECT =
4 changes: 0 additions & 4 deletions .husky/pre-commit
100644 → 100755
Original file line number Diff line number Diff line change
@@ -1,5 +1 @@
#!/bin/sh

. "$(dirname "$0")/_/husky.sh"

npm test
4 changes: 0 additions & 4 deletions .husky/pre-push
100644 → 100755
Original file line number Diff line number Diff line change
@@ -1,5 +1 @@
#!/bin/sh

. "$(dirname "$0")/_/husky.sh"

npm run build
9 changes: 7 additions & 2 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
FROM node:18-slim AS base
RUN apt-get update && \
apt-get install curl -y --no-install-recommends
apt-get install ca-certificates curl libjemalloc-dev -y --no-install-recommends && \
rm -rf /var/lib/apt/lists/*
# set environment variable to preload JEMalloc
ENV LD_PRELOAD="/usr/lib/x86_64-linux-gnu/libjemalloc.so.2"
# set GC time, set arenas number, set background_thread run GC
ENV MALLOC_CONF=dirty_decay_ms:1000,narenas:2,background_thread:true
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
COPY . /app
WORKDIR /app

FROM base AS prod-deps
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm i --P --frozen-lockfile --ignore-scripts
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm i -P --frozen-lockfile --ignore-scripts

FROM base AS build
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm i --frozen-lockfile
Expand Down
66 changes: 40 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
- PWA framework: [Workbox v6][14]
- State management: [MobX v6][15]
- CI / CD: GitHub [Actions][16] + [Vercel][17]
- Monitor service: [Sentry][18]

## Major examples

Expand All @@ -25,19 +26,19 @@

## Best practice

1. Install **[Settings][18] GitHub app** in your account or organization
1. Install **[Settings][19] GitHub app** in your account or organization

2. Click the **[<kbd>Use this template</kbd>][19] button** on the top of this GitHub repository's home page, then create your own repository in the app-installed namespace above
2. Click the **[<kbd>Use this template</kbd>][20] button** on the top of this GitHub repository's home page, then create your own repository in the app-installed namespace above

3. Click the **[<kbd>Open in GitHub codespaces</kbd>][20] button** on the top of ReadMe file, then an **online VS Code development environment** will be started immediately
3. Click the **[<kbd>Open in GitHub codespaces</kbd>][21] button** on the top of ReadMe file, then an **online VS Code development environment** will be started immediately

4. Set [Vercel variables][21] as [Repository secrets][22], then every commit will get an independent **Preview URL**
4. Set [Vercel variables][22] as [Repository secrets][23], then every commit will get an independent **Preview URL**

5. Recommend to add a [Notification step in GitHub actions][23] for your Team IM app
5. Recommend to add a [Notification step in GitHub actions][24] for your Team IM app

6. Remind the PMs & users of your product to submit **Feature/Enhancement** requests or **Bug** reports with [Issue forms][24] instead of IM messages or Mobile Phone calls
6. Remind the PMs & users of your product to submit **Feature/Enhancement** requests or **Bug** reports with [Issue forms][25] instead of IM messages or Mobile Phone calls

7. Collect all these issues into [Project kanbans][25], then create **Pull requests** & add `closes #issue_number` into its description for automation
7. Collect all these issues into [Project kanbans][26], then create **Pull requests** & add `closes #issue_number` into its description for automation

## Getting Started

Expand All @@ -52,26 +53,35 @@ Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

[API routes][26] can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in `pages/api/hello.ts`.
[API routes][27] can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in `pages/api/hello.ts`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes][27] instead of React pages.
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes][28] instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation][28] - learn about Next.js features and API.
- [Learn Next.js][29] - an interactive Next.js tutorial.
- [Next.js Documentation][29] - learn about Next.js features and API.
- [Learn Next.js][30] - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository][30] - your feedback and contributions are welcome!
You can check out [the Next.js GitHub repository][31] - your feedback and contributions are welcome!

## Deployment

### Environment variables

| name | file | description |
| :----------------------: | :----------: | :---------------------: |
| `SENTRY_AUTH_TOKEN` | `.env.local` | [Official document][32] |
| `SENTRY_ORG` | `.env` | [Official document][33] |
| `SENTRY_PROJECT` | `.env` | [Official document][33] |
| `NEXT_PUBLIC_SENTRY_DSN` | `.env` | [Official document][34] |

### Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform][17] from the creators of Next.js.

Check out our [Next.js deployment documentation][31] for more details.
Check out our [Next.js deployment documentation][35] for more details.

### Docker

Expand All @@ -97,17 +107,21 @@ pnpm container
[15]: https://mobx.js.org/
[16]: https://github.com/features/actions
[17]: https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme
[18]: https://github.com/apps/settings
[19]: https://github.com/new?template_name=Next-Bootstrap-ts&template_owner=idea2app
[20]: https://codespaces.new/idea2app/Next-Bootstrap-ts
[21]: https://github.com/idea2app/Next-Bootstrap-ts/blob/80967ed49045af9dbcf4d3695a2c39d53a6f71f1/.github/workflows/pull-request.yml#L9-L12
[22]: https://github.com/idea2app/Next-Bootstrap-ts/settings/secrets/actions
[23]: https://github.com/kaiyuanshe/kaiyuanshe.github.io/blob/bb4675a56bf1d6b207231313da5ed0af7cf0ebd6/.github/workflows/pull-request.yml#L32-L56
[24]: https://github.com/idea2app/Next-Bootstrap-ts/issues/new/choose
[25]: https://github.com/idea2app/Next-Bootstrap-ts/projects
[26]: https://nextjs.org/docs/api-routes/introduction
[18]: https://sentry.io/
[19]: https://github.com/apps/settings
[20]: https://github.com/new?template_name=Next-Bootstrap-ts&template_owner=idea2app
[21]: https://codespaces.new/idea2app/Next-Bootstrap-ts
[22]: https://github.com/idea2app/Next-Bootstrap-ts/blob/80967ed49045af9dbcf4d3695a2c39d53a6f71f1/.github/workflows/pull-request.yml#L9-L11
[23]: https://github.com/idea2app/Next-Bootstrap-ts/settings/secrets/actions
[24]: https://github.com/kaiyuanshe/kaiyuanshe.github.io/blob/bb4675a56bf1d6b207231313da5ed0af7cf0ebd6/.github/workflows/pull-request.yml#L32-L56
[25]: https://github.com/idea2app/Next-Bootstrap-ts/issues/new/choose
[26]: https://github.com/idea2app/Next-Bootstrap-ts/projects
[27]: https://nextjs.org/docs/api-routes/introduction
[28]: https://nextjs.org/docs
[29]: https://nextjs.org/learn
[30]: https://github.com/vercel/next.js/
[31]: https://nextjs.org/docs/deployment
[28]: https://nextjs.org/docs/api-routes/introduction
[29]: https://nextjs.org/docs
[30]: https://nextjs.org/learn
[31]: https://github.com/vercel/next.js/
[32]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-configuration-files-for-source-map-upload
[33]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-environment-variables
[34]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#create-initialization-config-files
[35]: https://nextjs.org/docs/deployment
26 changes: 26 additions & 0 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
module.exports = {
presets: [
// https://babeljs.io/docs/babel-preset-react
[
'@babel/preset-react',
{
runtime: 'automatic',
development: process.env.BABEL_ENV === 'development',
},
],
],
plugins: [
// https://github.com/babel/babel/issues/16262#issuecomment-1962832499
[
'@babel/plugin-transform-typescript',
{
allowDeclareFields: true,
allowNamespaces: true,
allExtensions: true,
isTSX: true,
},
],
// https://babeljs.io/docs/babel-plugin-proposal-decorators#note-compatibility-with-babelplugin-transform-class-properties
['@babel/plugin-proposal-decorators', { version: '2023-05' }],
],
};
11 changes: 3 additions & 8 deletions components/Git/Logo.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as MobX from 'mobx';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import { PureComponent } from 'react';
import { Image } from 'react-bootstrap';
Expand All @@ -9,13 +9,8 @@ export interface GitLogoProps {

@observer
export class GitLogo extends PureComponent<GitLogoProps> {
constructor(props: GitLogoProps) {
super(props);
MobX.makeObservable?.(this);
}

@MobX.observable
path = '';
@observable
accessor path = '';

async componentDidMount() {
const { name } = this.props;
Expand Down
5 changes: 5 additions & 0 deletions docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@ services:
labels:
- 'autoheal=true'
restart: always
deploy:
resources:
limits:
cpus: '0.80'
memory: 500M
logging:
driver: 'json-file'
options:
Expand Down
26 changes: 23 additions & 3 deletions next.config.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import NextMDX from '@next/mdx';
import { withSentryConfig } from '@sentry/nextjs';
import CopyPlugin from 'copy-webpack-plugin';
import { readdirSync, statSync } from 'fs';
import setPWA from 'next-pwa';
Expand All @@ -8,7 +9,8 @@ import RemarkGfm from 'remark-gfm';
import RemarkMdxFrontMatter from 'remark-mdx-frontmatter';
import webpack from 'webpack';

const { NODE_ENV } = process.env;
const { NODE_ENV, SENTRY_AUTH_TOKEN, SENTRY_ORG, SENTRY_PROJECT } = process.env;
const isDev = NODE_ENV === 'development';

const withMDX = NextMDX({
extension: /\.mdx?$/,
Expand All @@ -21,11 +23,11 @@ const withPWA = setPWA({
dest: 'public',
register: true,
skipWaiting: true,
disable: NODE_ENV === 'development',
disable: isDev,
});

/** @type {import('next').NextConfig} */
export default withPWA(
const nextConfig = withPWA(
withLess(
withMDX({
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
Expand Down Expand Up @@ -73,3 +75,21 @@ export default withPWA(
}),
),
);

export default isDev || !SENTRY_AUTH_TOKEN
? nextConfig
: withSentryConfig(
{
...nextConfig,
sentry: {
transpileClientSDK: true,
autoInstrumentServerFunctions: false,
},
},
{
org: SENTRY_ORG,
project: SENTRY_PROJECT,
authToken: SENTRY_AUTH_TOKEN,
silent: true,
},
);
62 changes: 33 additions & 29 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,63 +1,67 @@
{
"name": "@idea2app/next-bootstrap-ts",
"version": "1.5.0",
"version": "1.6.0",
"description": "React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.",
"private": true,
"engines": {
"node": ">=18"
},
"dependencies": {
"@editorjs/code": "^2.9.0",
"@editorjs/editorjs": "^2.28.2",
"@editorjs/editorjs": "^2.29.0",
"@editorjs/header": "^2.8.1",
"@editorjs/image": "^2.9.0",
"@editorjs/link": "^2.6.2",
"@editorjs/list": "^1.9.0",
"@editorjs/paragraph": "^2.11.3",
"@editorjs/quote": "^2.6.0",
"@mdx-js/loader": "^3.0.0",
"@mdx-js/react": "^3.0.0",
"@next/mdx": "^14.0.4",
"copy-webpack-plugin": "^11.0.0",
"@mdx-js/loader": "^3.0.1",
"@mdx-js/react": "^3.0.1",
"@next/mdx": "^14.1.1",
"@sentry/nextjs": "^7.104.0",
"copy-webpack-plugin": "^12.0.2",
"editorjs-html": "^3.4.3",
"idea-react": "^1.0.0-rc.30",
"idea-react": "^2.0.0-rc.2",
"koajax": "^0.9.6",
"less": "^4.2.0",
"less-loader": "^11.1.3",
"less-loader": "^12.2.0",
"lodash": "^4.17.21",
"mobx": "~6.10.2",
"mobx-i18n": "^0.4.2",
"mobx-react": "~9.0.2",
"mobx-restful": "^0.6.12",
"mobx-restful-table": "^1.2.2",
"next": "^14.0.4",
"mobx": "^6.12.0",
"mobx-i18n": "^0.5.0",
"mobx-react": "^9.1.0",
"mobx-restful": "^0.7.0-rc.0",
"mobx-restful-table": "^2.0.0-rc.0",
"next": "^14.1.1",
"next-pwa": "~5.6.0",
"next-ssr-middleware": "^0.6.1",
"next-ssr-middleware": "^0.7.0",
"next-with-less": "^3.0.1",
"prismjs": "^1.29.0",
"react": "^18.2.0",
"react-bootstrap": "^2.9.1",
"react-bootstrap-editor": "^1.0.5",
"react-bootstrap": "^2.10.1",
"react-bootstrap-editor": "^2.0.1",
"react-dom": "^18.2.0",
"react-editor-js": "^2.1.0",
"remark-frontmatter": "^5.0.0",
"remark-gfm": "^4.0.0",
"remark-mdx-frontmatter": "^4.0.0",
"web-utility": "^4.1.3",
"webpack": "^5.89.0"
"web-utility": "^4.3.0",
"webpack": "^5.90.3"
},
"devDependencies": {
"@octokit/openapi-types": "^19.1.0",
"@babel/plugin-proposal-decorators": "^7.24.0",
"@babel/plugin-transform-typescript": "^7.23.6",
"@babel/preset-react": "^7.23.3",
"@octokit/openapi-types": "^20.0.0",
"@types/lodash": "^4.14.202",
"@types/node": "^18.19.3",
"@types/react": "^18.2.45",
"eslint": "^8.56.0",
"eslint-config-next": "^14.0.4",
"@types/node": "^18.19.21",
"@types/react": "^18.2.61",
"eslint": "^8.57.0",
"eslint-config-next": "^14.1.1",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-simple-import-sort": "^10.0.0",
"husky": "^8.0.3",
"lint-staged": "^15.2.0",
"prettier": "^3.1.1",
"eslint-plugin-simple-import-sort": "^12.0.0",
"husky": "^9.0.11",
"lint-staged": "^15.2.2",
"prettier": "^3.2.5",
"typescript": "~5.3.3"
},
"prettier": {
Expand All @@ -70,7 +74,7 @@
"*.{js,mjs,ts,tsx}": "eslint --fix"
},
"scripts": {
"prepare": "husky install",
"prepare": "husky",
"dev": "next dev",
"build": "next build",
"export": "next build && next export",
Expand Down
19 changes: 19 additions & 0 deletions pages/_error.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import * as Sentry from '@sentry/nextjs';
import type { NextPage } from 'next';
import type { ErrorProps } from 'next/error';
import Error from 'next/error';

const CustomErrorComponent: NextPage<ErrorProps> = ({ statusCode }) => (
<Error statusCode={statusCode} />
);

CustomErrorComponent.getInitialProps = async contextData => {
await Sentry.captureUnderscoreErrorException(contextData);

return Error.getInitialProps(contextData);
};

export default process.env.NODE_ENV === 'development' ||
!process.env.SENTRY_AUTH_TOKEN
? Error
: CustomErrorComponent;
Loading

1 comment on commit 583ba77

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for oss-toolbox ready!

✅ Preview
https://oss-toolbox-3bj3sk2gm-techquery.vercel.app

Built with commit 583ba77.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.