[legacy-framework] Live Demo Deployment

README.md

@@ -10,9 +10,11 @@ Framework for building monolithic, full-stack, serverless React apps with zero d
 
 The Blitz community is warm, safe, diverse, inclusive, and fun! LGBTQ+, women, and minorities are especially welcome. Please read our [Code of Conduct](https://github.com/blitz-js/blitz/blob/canary/CODE_OF_CONDUCT.md).
 
-## Demo
+## LIVE Demo
 
-The initial Blitz demo app is at [examples/first-demo](https://github.com/blitz-js/blitz/blob/canary/examples/first-demo/README.md). NOTE: The API is very alpha, and will change.
+The initial Blitz demo is live at [first-demo.blitzjs.com](https://first-demo.blitzjs.com/)!
+
+It's source code is at [examples/first-demo](https://github.com/blitz-js/blitz/blob/canary/examples/first-demo). NOTE: The API is very alpha, and will change.
 
 ## I invite you to join me — let’s build the future of web dev together. 🤝
 

examples/first-demo/README.md

@@ -1,5 +1,7 @@
 # First Blitz Demo
 
+NOTE: The Blitz API is very alpha and will change! This demo is an early prototype
+
 ## Setup
 
 - You must have postgres installed and running
@@ -11,4 +13,4 @@
 
 ## Production Deployment
 
-WARNING: Production deployment works, but does not work correctly. There's a bug in the unreleased, canary feature Blitz uses. Will update once that's fixed.
+This demo is live at [first-demo.blitzjs.com](https://first-demo.blitzjs.com/)

examples/first-demo/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@blitzjs/core": "*",
-    "@prisma/client": "2.0.0-preview022",
+    "@prisma/client": "2.0.0-alpha.836",
     "next": "9.2.3-canary.13",
     "next-transpile-modules": "3.0.2",
     "react": "16.12.0",
@@ -19,9 +19,13 @@
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "2.1.0",
+    "@types/node": "13.7.6",
     "@types/react": "16.9.23",
     "autoprefixer": "9.7.4",
-    "prisma2": "2.0.0-preview022",
+    "prisma2": "2.0.0-alpha.833",
     "typescript": "3.8.2"
+  },
+  "browser": {
+    "@prisma/client": false
   }
 }

examples/first-demo/pages/index.js

@@ -8,10 +8,25 @@ const Home = props => (
       <title>First Blitz Demo</title>
       <link rel="icon" href="/favicon.ico" />
     </Head>
+    <p className="fixed top-0 right-0 pt-3 px-4">
+      <a href="https://github.com/blitz-js/blitz" className="text-purple-700 underline text-md">
+        View on GitHub
+      </a>
+    </p>
 
-    <div className="container flex flex-col items-center py-20">
+    <div className="container flex flex-col items-center py-20 max-w-md mx-auto">
       <h1 className="text-3xl">First Ever Blitz ⚡️ Demo!</h1>
-      <p className="italic mt-10">Notice the URL bar as you navigate</p>
+      <p className="mt-10">
+        This demo is deployed on{' '}
+        <a href="https://zeit.co" target="_blank" rel="noreferer,noopener" className="underline">
+          Zeit
+        </a>
+        , as a combo of static pages and serverless functions.
+        <br />
+        <br />
+        It has <strong>no client-side data fetching or state management</strong>. All data reads & writes are
+        server-side using Prisma 2.
+      </p>
       <p className="mt-10">
         <Link href="/posts">
           <a className="underline text-purple-700 text-2xl">View Posts</a>

examples/first-demo/pages/posts/[id].tsx

@@ -9,6 +9,12 @@ export default Page
 function Page({post}) {
   return (
     <div className="container flex flex-col items-center py-20 max-w-lg mx-auto px-2">
+      <p className="fixed top-0 right-0 pt-3 px-4">
+        <a href="https://github.com/blitz-js/blitz" className="text-purple-700 underline text-md">
+          View on GitHub
+        </a>
+      </p>
+
       <h1 className="text-3xl">{post.title}</h1>
       <p className="my-5">
         <Link href="/posts">

examples/first-demo/pages/posts/[id]/edit.js

@@ -9,6 +9,12 @@ export default Page
 function Page({post}) {
   return (
     <div className="container flex flex-col items-center py-20 max-w-md mx-auto px-2">
+      <p className="fixed top-0 right-0 pt-3 px-4">
+        <a href="https://github.com/blitz-js/blitz" className="text-purple-700 underline text-md">
+          View on GitHub
+        </a>
+      </p>
+
       <h1 className="text-3xl">{post.title}</h1>
 
       <Form action={`/api/posts/${post.id}`} method="PATCH" className="min-w-full">

examples/first-demo/pages/posts/index.tsx

@@ -9,6 +9,12 @@ export default Page
 function Page({posts}) {
   return (
     <div className="container flex flex-col items-center max-w-md  mx-auto py-20 px-2">
+      <p className="fixed top-0 right-0 pt-3 px-4">
+        <a href="https://github.com/blitz-js/blitz" className="text-purple-700 underline text-md">
+          View on GitHub
+        </a>
+      </p>
+
       <h1 className="text-3xl">{posts.length} Posts</h1>
       <p className="mt-5">
         <Link href="/">

examples/first-demo/pages/posts/new.js

@@ -6,6 +6,12 @@ export default Page
 function Page() {
   return (
     <div className="container flex flex-col items-center py-20 max-w-md mx-auto px-2">
+      <p className="fixed top-0 right-0 pt-3 px-4">
+        <a href="https://github.com/blitz-js/blitz" className="text-purple-700 underline text-md">
+          View on GitHub
+        </a>
+      </p>
+
       <h1 className="text-3xl">New Post</h1>
 
       <Form action={`/api/posts`} method="POST" className="min-w-full">

examples/first-demo/tsconfig.json

@@ -1,16 +1,30 @@
 {
-  "extends": "../../tsconfig.json",
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"],
   "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "../../",
+    "strict": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "downlevelIteration": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "esnext",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",

packages/core/src/controller.ts

@@ -9,9 +9,11 @@ export {default as Form} from './components/Form'
 
 let db: PrismaClient
 if (isServer) {
-  // db = new PrismaClient({log: ['info', 'query']})
-  const Client = eval("require('@prisma/client')").PrismaClient
-  db = new Client({log: ['info', 'query']})
+  db = new PrismaClient({log: ['info', 'query']})
+  // const Client = eval("require('@prisma/client')").PrismaClient
+  // db = new Client({log: ['info', 'query']})
+  // Go ahead and connect to the DB so that HEAD requests can warm the lambda and db connection
+  db.connect()
 }
 
 export function Controller(getController: ControllerInput) {
@@ -37,7 +39,9 @@ export const harnessController = (Controller: ControllerInstance) => async (
 ) => {
   const startTime = new Date().getTime()
   console.log('')
-  console.log(`Started ${req.method} "${req.url}" for ${req.connection.remoteAddress} at ${new Date()}`)
+  console.log(
+    `Started ${req.method} "${req.url}" for ${req.socket?.remoteAddress || 'unknown'} at ${new Date()}`,
+  )
 
   const stringId = req.query && (Array.isArray(req.query.id) ? req.query.id[0] : req.query.id)
   delete req.query.id
@@ -66,6 +70,7 @@ export const harnessController = (Controller: ControllerInstance) => async (
     console.log(`  Processing by ${Controller.name}.delete`)
     result = await Controller.delete(params, permit(data, ...Controller.permit))
   } else if (req.method === 'HEAD') {
+    // This is used to warm the lamba before it's actually needed
     return res.status(204).end()
   } else {
     res.status(404)

yarn.lock

@@ -2270,10 +2270,10 @@
   dependencies:
     "@types/node" ">= 8"
 
-"@prisma/client@2.0.0-preview022":
-  version "2.0.0-preview022"
-  resolved "https://registry.yarnpkg.com/@prisma/client/-/client-2.0.0-preview022.tgz#89c95b2ba17d151edb5891f0a114a2b000ed4e02"
-  integrity sha512-VVjwodKA7f/xIw704ZP5aAmaVXbcOa0g69E0RWDsMc/mSJlQyBjUtAnQy1QPvjaEA2V8+x+A85zW5JwrIs6qQg==
+"@prisma/client@2.0.0-alpha.836":
+  version "2.0.0-alpha.836"
+  resolved "https://registry.yarnpkg.com/@prisma/client/-/client-2.0.0-alpha.836.tgz#673c75c0a7a09d8d58f9da38348f59cd3c59a110"
+  integrity sha512-LRO4dz50M7iPrBJx9N0+IcSeNmniKkQ5BAaj6irYB6TzBMNnv6WwwQ8lzNKvKm0vtPIhuBcd22ZoilZiIUWuhg==
 
 "@rollup/plugin-commonjs@^11.0.0":
   version "11.0.2"
@@ -2443,6 +2443,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-13.7.4.tgz#76c3cb3a12909510f52e5dc04a6298cdf9504ffd"
   integrity sha512-oVeL12C6gQS/GAExndigSaLxTrKpQPxewx9bOcwfvJiJge4rr7wNaph4J+ns5hrmIV2as5qxqN8YKthn9qh0jw==
 
+"@types/node@13.7.6":
+  version "13.7.6"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.7.6.tgz#cb734a7c191472ae6a2b3a502b4dfffcea974113"
+  integrity sha512-eyK7MWD0R1HqVTp+PtwRgFeIsemzuj4gBFSQxfPHY5iMjS7474e5wq+VFgTcdpyHeNxyKSaetYAjdMLJlKoWqA==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -10499,6 +10504,11 @@ pretty-quick@2.0.1:
     mri "^1.1.4"
     multimatch "^4.0.0"
 
+prisma2@2.0.0-alpha.833:
+  version "2.0.0-alpha.833"
+  resolved "https://registry.yarnpkg.com/prisma2/-/prisma2-2.0.0-alpha.833.tgz#f62ac2096efa63a1e7b084c8f7c5bea1c5bb0ec6"
+  integrity sha512-vO8UDdrcZh60xfU48RbvC/5Y1QsnUwFaY3Q8MRXzNj8ATMQlDwpMNF/QNSLHYEzP8Djb422dU6Agpf/NHgEoRw==
+
 prisma2@2.0.0-preview022:
   version "2.0.0-preview022"
   resolved "https://registry.yarnpkg.com/prisma2/-/prisma2-2.0.0-preview022.tgz#959770a89696004411785cfb27a76ebc3eb889aa"