Specify custom servers from within the index.js file

Closes #960
Refs #1150

.changeset/c417a04d/changes.json

@@ -0,0 +1,33 @@
+{
+  "releases": [
+    { "name": "@keystone-alpha/api-tests", "type": "patch" },
+    { "name": "@keystone-alpha/demo-project-blog", "type": "minor" },
+    { "name": "@keystone-alpha/demo-project-meetup", "type": "minor" },
+    { "name": "@keystone-alpha/demo-project-todo", "type": "minor" },
+    { "name": "@keystone-alpha/admin-ui", "type": "major" },
+    { "name": "@keystone-alpha/core", "type": "major" },
+    { "name": "create-keystone-app", "type": "minor" },
+    { "name": "@keystone-alpha/fields-wysiwyg-tinymce", "type": "major" },
+    { "name": "@keystone-alpha/keystone", "type": "major" },
+    { "name": "@keystone-alpha/server-graphql", "type": "major" },
+    { "name": "@keystone-alpha/server-next", "type": "major" },
+    { "name": "@keystone-alpha/server-static", "type": "major" },
+    { "name": "@keystone-alpha/test-utils", "type": "patch" },
+    { "name": "@keystone-alpha/cypress-project-access-control", "type": "minor" },
+    { "name": "@keystone-alpha/cypress-project-basic", "type": "minor" },
+    { "name": "@keystone-alpha/cypress-project-login", "type": "minor" },
+    { "name": "@keystone-alpha/cypress-project-social-login", "type": "minor" }
+  ],
+  "dependents": [
+    {
+      "name": "@keystone-alpha/adapter-knex",
+      "type": "patch",
+      "dependencies": ["@keystone-alpha/keystone"]
+    },
+    {
+      "name": "@keystone-alpha/adapter-mongoose",
+      "type": "patch",
+      "dependencies": ["@keystone-alpha/keystone"]
+    }
+  ]
+}

.changeset/c417a04d/changes.md

@@ -0,0 +1,27 @@
+Specify custom servers from within the index.js file
+  - Major Changes:
+    - The `index.js` export for `admin` must now be exported in the `servers`
+      array:
+      ```diff
+       module.exports = {
+         keystone,
+      -  admin,
+      +  servers: [admin],
+       }
+      ```
+    - The `keystone.prepare()` method (often used within a _Custom Server_
+      `server.js`) no longer returns a `server`, it now returns a `middlewares`
+      array:
+      ```diff
+      +const express = require('express');
+       const port = 3000;
+       keystone.prepare({ port })
+      -  .then(async ({ server, keystone: keystoneApp }) => {
+      +  .then(async ({ middlewares, keystone: keystoneApp }) => {
+           await keystoneApp.connect();
+      -    await server.start();
+      +    const app = express();
+      +    app.use(middlewares);
+      +    app.listen(port)
+         });
+      ```

api-tests/auth-header.test.js

@@ -1,7 +1,8 @@
 const supertest = require('supertest-light');
 const { Keystone, PasswordAuthStrategy } = require('@keystone-alpha/keystone');
 const { Text, Password } = require('@keystone-alpha/fields');
-const { WebServer } = require('@keystone-alpha/server');
+const GraphQLServer = require('@keystone-alpha/server-graphql');
+const express = require('express');
 const bodyParser = require('body-parser');
 const cookieSignature = require('cookie-signature');
 const { multiAdapterRunners } = require('@keystone-alpha/test-utils');
@@ -26,7 +27,7 @@ const initialData = {
 
 const COOKIE_SECRET = 'qwerty';
 
-function setupKeystone() {
+async function setupKeystone() {
   const keystone = new Keystone({
     name: `Jest Test Project For Login Auth ${cuid()}`,
     adapter: new MongooseAdapter(),
@@ -48,13 +49,17 @@ function setupKeystone() {
     list: 'User',
   });
 
-  const server = new WebServer(keystone, {
+  const app = express();
+
+  const graphQLServer = new GraphQLServer(keystone, {
     cookieSecret: COOKIE_SECRET,
     apiPath: '/admin/api',
     graphiqlPath: '/admin/graphiql',
   });
 
-  server.app.post(
+  app.use(await graphQLServer.prepareMiddleware({ keystone, dev: true }));
+
+  app.post(
     '/signin',
     bodyParser.json(),
     bodyParser.urlencoded({ extended: true }),
@@ -83,11 +88,11 @@ function setupKeystone() {
     }
   );
 
-  return { keystone, server };
+  return { keystone, app };
 }
 
-function login(server, username, password) {
-  return supertest(server.app)
+function login(app, username, password) {
+  return supertest(app)
     .set('Accept', 'application/json')
     .post('/signin', { username, password })
     .then(res => {
@@ -104,10 +109,10 @@ multiAdapterRunners().map(({ runner, adapterName }) =>
     describe('Auth testing', () => {
       test(
         'Gives access denied when not logged in',
-        runner(setupKeystone, async ({ keystone, server }) => {
+        runner(setupKeystone, async ({ keystone, app }) => {
           // seed the db
           await keystone.createItems(initialData);
-          return supertest(server.app)
+          return supertest(app)
             .set('Accept', 'application/json')
             .post('/admin/api', { query: '{ allUsers { id } }' })
             .then(function(res) {
@@ -122,18 +127,18 @@ multiAdapterRunners().map(({ runner, adapterName }) =>
       describe('logged in', () => {
         test(
           'Allows access with bearer token',
-          runner(setupKeystone, async ({ keystone, server }) => {
+          runner(setupKeystone, async ({ keystone, app }) => {
             await keystone.createItems(initialData);
             const { success, token } = await login(
-              server,
+              app,
               initialData.User[0].email,
               initialData.User[0].password
             );
 
             expect(success).toBe(true);
             expect(token).toBeTruthy();
 
-            return supertest(server.app)
+            return supertest(app)
               .set('Authorization', `Bearer ${token}`)
               .set('Accept', 'application/json')
               .post('/admin/api', { query: '{ allUsers { id } }' })
@@ -149,18 +154,18 @@ multiAdapterRunners().map(({ runner, adapterName }) =>
 
         test(
           'Allows access with cookie',
-          runner(setupKeystone, async ({ keystone, server }) => {
+          runner(setupKeystone, async ({ keystone, app }) => {
             await keystone.createItems(initialData);
             const { success, token } = await login(
-              server,
+              app,
               initialData.User[0].email,
               initialData.User[0].password
             );
 
             expect(success).toBe(true);
             expect(token).toBeTruthy();
 
-            return supertest(server.app)
+            return supertest(app)
               .set('Cookie', `keystone.sid=${signCookie(token)}`)
               .set('Accept', 'application/json')
               .post('/admin/api', { query: '{ allUsers { id } }' })

api-tests/package.json

@@ -12,13 +12,16 @@
     "@keystone-alpha/adapter-mongoose": "^2.0.0",
     "@keystone-alpha/fields": "^6.1.1",
     "@keystone-alpha/keystone": "^4.0.0",
-    "@keystone-alpha/server": "^5.0.0",
+    "@keystone-alpha/server-graphql": "^5.0.0",
     "@keystone-alpha/session": "^1.0.2",
     "@keystone-alpha/test-utils": "^2.0.2",
     "body-parser": "^1.18.2",
     "cookie-signature": "^1.1.0",
     "cuid": "^2.1.6",
     "supertest-light": "^1.0.2",
     "testcheck": "^1.0.0-rc.2"
+  },
+  "dependencies": {
+    "express": "^4.16.3"
   }
 }

demo-projects/blog/app/pages/index.js

@@ -25,16 +25,16 @@ const Post = ({ post }) => {
         }}
       >
         {post.image ? <img src={post.image.publicUrl} css={{ width: '100%' }} /> : null}
-        <div css={{ padding: '1em' }}>
+        <article css={{ padding: '1em' }}>
           <h3 css={{ marginTop: 0 }}>{post.title}</h3>
-          <p>{post.body}</p>
+          <section dangerouslySetInnerHTML={{ __html: post.body }} />
           <div css={{ marginTop: '1em', borderTop: '1px solid hsl(200, 20%, 80%)' }}>
             <p css={{ fontSize: '0.8em', marginBottom: 0, color: 'hsl(200, 20%, 50%)' }}>
               Posted by {post.author ? post.author.name : 'someone'} on{' '}
               {format(post.posted, 'DD/MM/YYYY')}
             </p>
           </div>
-        </div>
+        </article>
       </div>
     </Link>
   );

demo-projects/blog/app/pages/post.js

@@ -235,9 +235,9 @@ class PostPage extends React.Component {
                       <title>{post.title}</title>
                     </Head>
                     {post.image ? <img src={post.image.publicUrl} css={{ width: '100%' }} /> : null}
-                    <div css={{ padding: '1em' }}>
+                    <article css={{ padding: '1em' }}>
                       <h1 css={{ marginTop: 0 }}>{post.title}</h1>
-                      <p>{post.body}</p>
+                      <section dangerouslySetInnerHTML={{ __html: post.body }} />
                       <div css={{ marginTop: '1em', borderTop: '1px solid hsl(200, 20%, 80%)' }}>
                         <p
                           css={{ fontSize: '0.8em', marginBottom: 0, color: 'hsl(200, 20%, 50%)' }}
@@ -246,7 +246,7 @@ class PostPage extends React.Component {
                           {format(post.posted, 'DD/MM/YYYY')}
                         </p>
                       </div>
-                    </div>
+                    </article>
                   </div>
 
                   <Comments data={data} id={id} />

demo-projects/blog/index.js

@@ -2,6 +2,8 @@
 const { AdminUI } = require('@keystone-alpha/admin-ui');
 const { Keystone, PasswordAuthStrategy } = require('@keystone-alpha/keystone');
 const { MongooseAdapter } = require('@keystone-alpha/adapter-mongoose');
+const NextServer = require('@keystone-alpha/server-next');
+const StaticServer = require('@keystone-alpha/server-static');
 
 const { staticRoute, staticPath } = require('./config');
 const { User, Post, PostCategory, Comment } = require('./schema');
@@ -43,11 +45,14 @@ const admin = new AdminUI(keystone, {
       children: ['User'],
     },
   ],
+  disableDefaultRoute: true,
 });
 
 module.exports = {
-  staticRoute,
-  staticPath,
   keystone,
-  admin,
+  servers: [
+    admin,
+    new StaticServer({ route: staticRoute, path: staticPath }),
+    new NextServer({ dir: 'app' }),
+  ],
 };

demo-projects/blog/package.json

@@ -9,7 +9,7 @@
     "node": ">=8.4.0"
   },
   "scripts": {
-    "start": "DISABLE_LOGGING=true node server.js",
+    "start": "NODE_ENV=development DISABLE_LOGGING=true node server.js",
     "build": "next build app && keystone build"
   },
   "dependencies": {
@@ -24,14 +24,16 @@
     "@keystone-alpha/fields-wysiwyg-tinymce": "^2.0.1",
     "@keystone-alpha/file-adapters": "^1.0.2",
     "@keystone-alpha/keystone": "^4.0.0",
+    "@keystone-alpha/server-next": "^0.0.0",
+    "@keystone-alpha/server-static": "^0.0.0",
     "apollo-boost": "^0.3.1",
     "apollo-client": "^2.5.1",
     "apollo-upload-client": "^10.0.0",
     "date-fns": "^1.30.1",
+    "express": "^4.16.3",
     "graphql-tag": "^2.10.1",
     "isomorphic-unfetch": "^3.0.0",
     "next": "^8.0.3",
-    "next-apollo": "^2.0.9",
     "node-fetch": "^2.3.0",
     "react": "^16.8.6",
     "react-apollo": "2.4.0"

demo-projects/blog/server.js

@@ -1,30 +1,28 @@
+const express = require('express');
 const keystone = require('@keystone-alpha/core');
-const { Wysiwyg } = require('@keystone-alpha/fields-wysiwyg-tinymce');
-const next = require('next');
 
-const { port, staticRoute, staticPath } = require('./config');
+const { port } = require('./config');
 const initialData = require('./initialData');
 
-const nextApp = next({
-  dir: 'app',
-  distDir: 'build',
-  dev: process.env.NODE_ENV !== 'production',
-});
-
-Promise.all([keystone.prepare({ port }), nextApp.prepare()])
-  .then(async ([{ server, keystone: keystoneApp }]) => {
+keystone
+  .prepare({ port, dev: process.env.NODE_ENV !== 'production' })
+  .then(async ({ middlewares, keystone: keystoneApp }) => {
     await keystoneApp.connect(process.env.MONGODB_URI);
+
     // Initialise some data.
     // NOTE: This is only for demo purposes and should not be used in production
     const users = await keystoneApp.lists.User.adapter.findAll();
     if (!users.length) {
       await keystoneApp.createItems(initialData);
     }
 
-    Wysiwyg.bindStaticMiddleware(server);
-    server.app.use(staticRoute, server.express.static(staticPath));
-    server.app.use(nextApp.getRequestHandler());
-    await server.start();
+    const app = express();
+
+    app.use(middlewares);
+
+    app.listen(port, error => {
+      if (error) throw error;
+    });
   })
   .catch(error => {
     console.error(error);

demo-projects/meetup/index.js

@@ -2,6 +2,8 @@
 const { AdminUI } = require('@keystone-alpha/admin-ui');
 const { Keystone, PasswordAuthStrategy } = require('@keystone-alpha/keystone');
 const { MongooseAdapter } = require('@keystone-alpha/adapter-mongoose');
+const NextServer = require('@keystone-alpha/server-next');
+const routes = require('./routes');
 
 const { Event, Talk, User, Rsvp, Organiser, Sponsor } = require('./schema');
 
@@ -37,9 +39,10 @@ const admin = new AdminUI(keystone, {
       children: ['User', 'Rsvp'],
     },
   ],
+  disableDefaultRoute: true,
 });
 
 module.exports = {
   keystone,
-  admin,
+  servers: [admin, new NextServer({ dir: 'site', nextRoutes: routes })],
 };

demo-projects/meetup/package.json

@@ -9,8 +9,8 @@
     "node": ">=8.4.0"
   },
   "scripts": {
-    "start": "DISABLE_LOGGING=true node server.js",
-    "build": "next build"
+    "start": "NODE_ENV=development DISABLE_LOGGING=true node server.js",
+    "build": "NODE_ENV=production next build"
   },
   "dependencies": {
     "@emotion/core": "^10.0.10",
@@ -21,6 +21,7 @@
     "@keystone-alpha/fields-wysiwyg-tinymce": "^2.0.1",
     "@keystone-alpha/file-adapters": "^1.0.2",
     "@keystone-alpha/keystone": "^4.0.0",
+    "@keystone-alpha/server-next": "^0.0.0",
     "@keystone-alpha/session": "^1.0.2",
     "apollo-boost": "^0.3.1",
     "apollo-client": "^2.5.1",
@@ -32,8 +33,8 @@
     "graphql-tag": "^2.10.1",
     "isomorphic-unfetch": "^3.0.0",
     "next": "^8.0.3",
-    "prop-types": "^15.7.2",
     "next-routes": "^1.4.2",
+    "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-apollo": "2.4.0",
     "react-apollo-hooks": "^0.4.4",