Add Next.js frontend and use vercel-dev-runtime (#8)

* Add Next.js frontend and use `vercel-dev-runtime`

* Update root tsconfig

* Ensure the `build.sh` and `bootstrap` files are executable

Author: TooTallNate

.gitignore

@@ -1,4 +1,5 @@
 /node_modules
 /dist
 /*.tgz
-.vercel
+/.next
+/.vercel

.vercelignore

@@ -1,10 +1,8 @@
 /node_modules
-/yarn.lock
-/package.json
-/tsconfig.json
 /README.md
-/src
 /dist
 /test
 /.*
 /*.tgz
+/.next
+/.vercel

next-env.d.ts

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

package.json

@@ -16,8 +16,9 @@
   ],
   "scripts": {
     "prebuild": "rimraf dist",
-    "build": "tsc",
+    "build": "tsc --project src/tsconfig.json",
     "postbuild": "cpy src '!**/*.ts' dist",
+    "now-build": "next build",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
@@ -26,6 +27,7 @@
   },
   "devDependencies": {
     "@types/node": "^12.12.17",
+    "@types/react": "^16.9.41",
     "@typescript-eslint/eslint-plugin": "1.6.0",
     "@typescript-eslint/parser": "1.1.0",
     "@vercel/build-utils": "^2.3.1",
@@ -39,7 +41,10 @@
     "eslint-plugin-import": "2.16.0",
     "eslint-plugin-jsx-a11y": "6.2.1",
     "eslint-plugin-react": "7.12.4",
+    "next": "^9.4.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "rimraf": "^3.0.0",
-    "typescript": "^3.5.3"
+    "typescript": "^3.9.3"
   }
 }

pages/index.tsx

@@ -0,0 +1,3 @@
+export default () => {
+	return <div>Hello Bash</div>;
+};

src/builder.sh renamed to src/build.sh

@@ -1,3 +1,4 @@
+import fs from 'fs';
 import execa from 'execa';
 import { join } from 'path';
 import { snakeCase } from 'snake-case';
@@ -11,6 +12,11 @@ import {
 	shouldServe
 } from '@vercel/build-utils';
 
+// `chmod()` is required for usage with `vercel-dev-runtime`
+// since file mode is not preserved in Vercel deployments.
+fs.chmodSync(join(__dirname, 'build.sh'), 0o755);
+fs.chmodSync(join(__dirname, 'bootstrap'), 0o755);
+
 // From this list: https://import.pw/importpw/import/docs/config.md
 const allowedConfigImports = new Set([
 	'CACHE',
@@ -66,7 +72,7 @@ export async function build({
 		ENTRYPOINT: entrypoint
 	};
 
-	const builderPath = join(__dirname, 'builder.sh');
+	const builderPath = join(__dirname, 'build.sh');
 
 	await execa(builderPath, [], {
 		env,

src/index.ts

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "module": "CommonJS",
+    "target": "es2018",
+    "esModuleInterop": true,
+    "lib": ["esnext"],
+    "outDir": "../dist",
+    "sourceMap": true,
+    "declaration": true
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules"]
+}

src/tsconfig.json

@@ -1,14 +1,29 @@
 {
   "compilerOptions": {
-    "strict": true,
-    "module": "CommonJS",
-    "target": "es2015",
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
     "esModuleInterop": true,
-    "lib": ["esnext"],
-    "outDir": "dist",
-    "sourceMap": true,
-    "declaration": true
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
   },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules",
+    "src"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "pages/*.tsx"
+  ]
 }

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "public": true,
   "functions": {
-    "api/*.sh": { "runtime": "vercel-bash@3.0.7" }
+    "api/*.sh": { "runtime": "vercel-dev-runtime@0.0.1" }
   }
 }