From 99fb191286f0061d7a42266148a4e29a3e9d6a56 Mon Sep 17 00:00:00 2001
From: Ibrahim Ansari <retrixe@users.noreply.github.com>
Date: Thu, 22 Feb 2018 20:59:47 +0530
Subject: [PATCH] Add custom-server-typescript example (see #3694) (#3838)

* Add custom-server-typescript example (see #3694)

* Fix linting errors in custom-server-typescript

* Provide proper arguments to ts-node.

* Fix import and fix all linting errors.

* Use import in server as well.

* Update nodemon.json
---
 examples/custom-server-typescript/README.md   | 40 +++++++++++++++++++
 .../custom-server-typescript/next.config.js   |  2 +
 .../custom-server-typescript/nodemon.json     |  6 +++
 .../custom-server-typescript/package.json     | 20 ++++++++++
 examples/custom-server-typescript/pages/a.tsx |  3 ++
 examples/custom-server-typescript/pages/b.tsx |  3 ++
 .../custom-server-typescript/pages/index.tsx  |  9 +++++
 .../custom-server-typescript/server/index.ts  | 28 +++++++++++++
 .../custom-server-typescript/tsconfig.json    | 29 ++++++++++++++
 test/integration/basic/components/hello.jsx   |  2 +-
 test/integration/basic/components/world.jsx   |  2 +-
 .../basic/pages/custom-extension.jsx          |  2 +-
 12 files changed, 143 insertions(+), 3 deletions(-)
 create mode 100644 examples/custom-server-typescript/README.md
 create mode 100644 examples/custom-server-typescript/next.config.js
 create mode 100644 examples/custom-server-typescript/nodemon.json
 create mode 100644 examples/custom-server-typescript/package.json
 create mode 100644 examples/custom-server-typescript/pages/a.tsx
 create mode 100644 examples/custom-server-typescript/pages/b.tsx
 create mode 100644 examples/custom-server-typescript/pages/index.tsx
 create mode 100644 examples/custom-server-typescript/server/index.ts
 create mode 100644 examples/custom-server-typescript/tsconfig.json

diff --git a/examples/custom-server-typescript/README.md b/examples/custom-server-typescript/README.md
new file mode 100644
index 00000000..017a3823
--- /dev/null
+++ b/examples/custom-server-typescript/README.md
@@ -0,0 +1,40 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/custom-server-typescript)
+
+# Custom server with TypeScript + Nodemon example
+
+## How to use
+
+### Using `create-next-app`
+
+Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
+
+```
+npm i -g create-next-app
+create-next-app --example custom-server-typescript custom-server-typescript-app
+```
+
+### Download manually
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/custom-server-typescript
+cd custom-server-typescript
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+The example shows how you can use [TypeScript](https://typescriptlang.com) on both the server and the client while using [Nodemon](https://nodemon.io/) to live reload the server code without affecting the Next.js universal code.
diff --git a/examples/custom-server-typescript/next.config.js b/examples/custom-server-typescript/next.config.js
new file mode 100644
index 00000000..d8b638bd
--- /dev/null
+++ b/examples/custom-server-typescript/next.config.js
@@ -0,0 +1,2 @@
+const withTypescript = require('@zeit/next-typescript')
+module.exports = withTypescript()
diff --git a/examples/custom-server-typescript/nodemon.json b/examples/custom-server-typescript/nodemon.json
new file mode 100644
index 00000000..24f3bee0
--- /dev/null
+++ b/examples/custom-server-typescript/nodemon.json
@@ -0,0 +1,6 @@
+{
+  "watch": ["server/**/*.ts"],
+  "execMap": {
+    "ts": "ts-node --compilerOptions '{\"module\":\"commonjs\"}'"
+  }
+}
diff --git a/examples/custom-server-typescript/package.json b/examples/custom-server-typescript/package.json
new file mode 100644
index 00000000..8c7e7b1e
--- /dev/null
+++ b/examples/custom-server-typescript/package.json
@@ -0,0 +1,20 @@
+{
+  "scripts": {
+    "dev": "nodemon server/index.ts",
+    "build": "next build && tsc --module commonjs",
+    "start": "NODE_ENV=production node lib/index.js"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
+  "devDependencies": {
+    "@types/next": "^2.4.7",
+    "@types/react": "^16.0.36",
+    "@zeit/next-typescript": "^0.0.8",
+    "nodemon": "^1.12.1",
+    "ts-node": "^4.1.0",
+    "typescript": "^2.7.1"
+  }
+}
diff --git a/examples/custom-server-typescript/pages/a.tsx b/examples/custom-server-typescript/pages/a.tsx
new file mode 100644
index 00000000..c5359797
--- /dev/null
+++ b/examples/custom-server-typescript/pages/a.tsx
@@ -0,0 +1,3 @@
+import React from 'react'
+
+export default () => <div>a</div>
diff --git a/examples/custom-server-typescript/pages/b.tsx b/examples/custom-server-typescript/pages/b.tsx
new file mode 100644
index 00000000..9bde4d9d
--- /dev/null
+++ b/examples/custom-server-typescript/pages/b.tsx
@@ -0,0 +1,3 @@
+import React from 'react'
+
+export default () => <div>b</div>
diff --git a/examples/custom-server-typescript/pages/index.tsx b/examples/custom-server-typescript/pages/index.tsx
new file mode 100644
index 00000000..d044fc1e
--- /dev/null
+++ b/examples/custom-server-typescript/pages/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import Link from 'next/link'
+
+export default () => (
+  <ul>
+    <li><Link href='/b' as='/a'><a>a</a></Link></li>
+    <li><Link href='/a' as='/b'><a>b</a></Link></li>
+  </ul>
+)
diff --git a/examples/custom-server-typescript/server/index.ts b/examples/custom-server-typescript/server/index.ts
new file mode 100644
index 00000000..fd8c573d
--- /dev/null
+++ b/examples/custom-server-typescript/server/index.ts
@@ -0,0 +1,28 @@
+import { createServer } from 'http'
+import { parse } from 'url'
+import * as next from 'next'
+
+const port = parseInt(process.env.PORT, 10) || 3000
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+app.prepare()
+.then(() => {
+  createServer((req, res) => {
+    const parsedUrl = parse(req.url, true)
+    const { pathname, query } = parsedUrl
+
+    if (pathname === '/a') {
+      app.render(req, res, '/b', query)
+    } else if (pathname === '/b') {
+      app.render(req, res, '/a', query)
+    } else {
+      handle(req, res, parsedUrl)
+    }
+  })
+  .listen(port, (err) => {
+    if (err) throw err
+    console.log(`> Ready on http://localhost:${port}`)
+  })
+})
diff --git a/examples/custom-server-typescript/tsconfig.json b/examples/custom-server-typescript/tsconfig.json
new file mode 100644
index 00000000..cb36798f
--- /dev/null
+++ b/examples/custom-server-typescript/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "removeComments": false,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "typeRoots": [
+      "./node_modules/@types"
+    ],
+    "lib": [
+      "dom",
+      "es2015",
+      "es2016"
+    ],
+    "outDir": "lib/"
+  },
+  "include": [
+    "server/**/*.ts"
+  ]
+}
\ No newline at end of file
diff --git a/test/integration/basic/components/hello.jsx b/test/integration/basic/components/hello.jsx
index ca4066c6..3a9fb038 100644
--- a/test/integration/basic/components/hello.jsx
+++ b/test/integration/basic/components/hello.jsx
@@ -1,3 +1,3 @@
 export const Hello = () => (
-    <div>Hello</div>
+  <div>Hello</div>
   )
diff --git a/test/integration/basic/components/world.jsx b/test/integration/basic/components/world.jsx
index f9320963..89737546 100644
--- a/test/integration/basic/components/world.jsx
+++ b/test/integration/basic/components/world.jsx
@@ -1,3 +1,3 @@
 export const World = () => (
-    <div>World</div>
+  <div>World</div>
   )
diff --git a/test/integration/basic/pages/custom-extension.jsx b/test/integration/basic/pages/custom-extension.jsx
index 13d7212b..b978c1e8 100644
--- a/test/integration/basic/pages/custom-extension.jsx
+++ b/test/integration/basic/pages/custom-extension.jsx
@@ -2,5 +2,5 @@ import {World} from '../components/world'
 import {Hello} from '../components/hello.jsx'
 
 export default () => (
-  <div><Hello/> <World/></div>
+  <div><Hello /> <World /></div>
 )