Setup for Vercel and Heroku

Author: koki-oe

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

.eslintignore

@@ -0,0 +1,8 @@
+node_modules
+.next
+dist
+out
+server/migration
+server/index.js
+server/lambda.js
+server/lambda_migration.js

.eslintrc.js

@@ -0,0 +1,38 @@
+module.exports = {
+  root: true,
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'prettier'
+  ],
+  plugins: ['@typescript-eslint', 'react'],
+  parser: '@typescript-eslint/parser',
+  env: {
+    browser: true,
+    node: true,
+    es6: true
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
+  parserOptions: {
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off'
+  },
+  overrides: [
+    {
+      files: ['*.js'],
+      rules: { '@typescript-eslint/no-var-requires': ['off'] }
+    }
+  ]
+}

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# server
+server/**/$*.ts
+server/**/*.db
+server/index.js
+server/upload/

.idea/.gitignore

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "trailingComma": "none",
+  "singleQuote": true
+}

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "prisma.prisma"]
+}

.idea/modules.xml

@@ -0,0 +1,9 @@
+{
+  "eslint.run": "onSave",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

.idea/vcs.xml

@@ -0,0 +1,14 @@
+FROM node:14.17.5
+
+RUN mkdir /src
+RUN mkdir /src/server
+
+WORKDIR /src
+
+COPY /server/package.json /server/yarn.lock ./server/
+RUN yarn install --cwd ./server
+
+COPY . .
+
+EXPOSE 8080
+CMD yarn migrate:dev && yarn generate:server && yarn build:server && yarn start:server

.idea/who-is-op.iml

@@ -0,0 +1,30 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:8000](http://localhost:8000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

.prettierrc

@@ -0,0 +1,6 @@
+require('dotenv').config({ path: 'server/.env' })
+
+module.exports = {
+  input: 'server/api',
+  baseURL: `${process.env.API_ORIGIN || ''}${process.env.API_BASE_PATH || ''}`
+}

.vscode/extensions.json

@@ -0,0 +1,69 @@
+import { useState, useCallback } from 'react'
+import styles from '~/styles/UserBanner.module.css'
+import { apiClient } from '~/utils/apiClient'
+import type { UserInfo } from '$/types'
+import type { ChangeEvent } from 'react'
+
+const UserBanner = () => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false)
+  const [token, setToken] = useState('')
+  const [userInfo, setUserInfo] = useState({} as UserInfo)
+
+  const editIcon = useCallback(
+    async (e: ChangeEvent<HTMLInputElement>) => {
+      if (!e.target.files?.length) return
+
+      setUserInfo(
+        await apiClient.user.$post({
+          headers: { authorization: token },
+          body: { icon: e.target.files[0] }
+        })
+      )
+    },
+    [token]
+  )
+
+  const login = useCallback(async () => {
+    const id = prompt('Enter the user id (See server/.env)')
+    const pass = prompt('Enter the user pass (See server/.env)')
+    if (!id || !pass) return alert('Login failed')
+
+    let newToken = ''
+
+    try {
+      newToken = `Bearer ${
+        (await apiClient.token.$post({ body: { id, pass } })).token
+      }`
+      setToken(newToken)
+    } catch (e) {
+      return alert('Login failed')
+    }
+
+    setUserInfo(
+      await apiClient.user.$get({ headers: { authorization: newToken } })
+    )
+    setIsLoggedIn(true)
+  }, [])
+
+  const logout = useCallback(() => {
+    setToken('')
+    setIsLoggedIn(false)
+  }, [])
+
+  return (
+    <div className={styles.userBanner}>
+      {isLoggedIn ? (
+        <>
+          <img src={userInfo.icon} className={styles.userIcon} />
+          <span>{userInfo.name}</span>
+          <input type="file" accept="image/*" onChange={editIcon} />
+          <button onClick={logout}>LOGOUT</button>
+        </>
+      ) : (
+        <button onClick={login}>LOGIN</button>
+      )}
+    </div>
+  )
+}
+
+export default UserBanner

.vscode/settings.json

@@ -0,0 +1,16 @@
+version: "3.8"
+
+services:
+  app:
+    build: .
+    ports:
+      - "8080:8080"
+    depends_on:
+      - db
+    links:
+      - db
+
+  db:
+    image: mysql:5.7
+    ports:
+      - "3306:3306"

Dockerfile

@@ -0,0 +1,3 @@
+build:
+  docker:
+    web: Dockerfile

README.md

@@ -0,0 +1,32 @@
+import { pathsToModuleNameMapper } from 'ts-jest/utils'
+import type { Config } from '@jest/types'
+import { compilerOptions } from './tsconfig.json'
+
+const config: { projects: Config.InitialOptions[] } = {
+  projects: [
+    {
+      testPathIgnorePatterns: ['<rootDir>/server'],
+      transform: {
+        '^.+\\.tsx$': 'babel-jest',
+        '^.+\\.ts$': 'ts-jest'
+      },
+      moduleNameMapper: {
+        '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
+        '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
+        ...pathsToModuleNameMapper(compilerOptions.paths, {
+          prefix: '<rootDir>/'
+        })
+      }
+    },
+    {
+      preset: 'ts-jest',
+      testEnvironment: 'node',
+      testMatch: ['<rootDir>/server/test/**/*.ts'],
+      moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
+        prefix: '<rootDir>/'
+      })
+    }
+  ]
+}
+
+export default config

aspida.config.js

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />