Admin UI static building

.changeset/2738beb1/changes.json

@@ -0,0 +1 @@
+{ "releases": [{ "name": "@keystone-alpha/keystone", "type": "minor" }], "dependents": [] }

.changeset/2738beb1/changes.md

@@ -0,0 +1 @@
+- Add `build` and `start` commands

.changeset/f951ae8b/changes.json

@@ -0,0 +1,10 @@
+{
+  "releases": [
+    { "name": "@keystone-alpha/admin-ui", "type": "minor" },
+    { "name": "@keystone-alpha/keystone", "type": "minor" },
+    { "name": "@keystone-alpha/server", "type": "minor" },
+    { "name": "@keystone-alpha/demo-project-blog", "type": "patch" },
+    { "name": "@keystone-alpha/demo-project-meetup", "type": "patch" }
+  ],
+  "dependents": []
+}

.changeset/f951ae8b/changes.md

@@ -0,0 +1 @@
+- Add Admin UI static building

Procfile

@@ -1 +1 @@
-web: yarn start:test
+web: cd demo-projects/blog && node node_modules/@keystone-alpha/keystone/bin/cli

README.md

@@ -205,35 +205,34 @@ For available options, see [Server Configuration](#server-configuration).
 When getting ready to deploy your app to production, there are performance
 optimisations which Keystone can prepare for you.
 
-Add this script to your `package.json`:
+Add these scripts to your `package.json`:
 
 ```json
 {
   "scripts": {
-    "build": "keystone build"
+    "build": "keystone build",
+    "start": "keystone start"
   }
 }
 ```
 
-Run `npm run build` to generate the following outputs:
+Run `npm run build` to generate the following outputs(this output could change in the future):
 
 ```
 .
 └── dist/
-    ├── api/
-    ├── admin/
-    └── index.js
+    └── admin/
 ```
 
-To run your keystone instance, execute the `index.js` file:
+To run your keystone instance, run the start script.
 
 ```
-cd dist
-node index.js
+npm run start
 ```
 
 #### Production Build Artifacts
 
+<!--
 ##### `dist/index.js`
 
 An all-in-one server which will start your Keystone API and Admin UI running on
@@ -250,14 +249,15 @@ the keystone instance, and a server to run the API.
 This folder contains an `index.js` file which when run via node
 (`node dist/api/index.js`) will serve the API. In this manner, it is possible to
 deploy the API independently of the [admin UI](#distadmin) by deploying the
-contents of the `dist/api/` folder only.
+contents of the `dist/api/` folder only. -->
 
 ##### `dist/admin/`
 
 A static export of the Admin UI lives here. Built from your code setting up the
 keystone instance, this export contains _list_ and _field_ config information
-tightly coupled to the API. It is therefore recommended to always deploy the
-Admin UI at the same time as deploying the API to avoid any inconsistencies.
+tightly coupled to the API.
+
+<!-- commented out for now because you currently have to deploy them at the same time right now: It is therefore recommended to always deploy the Admin UI at the same time as deploying the API to avoid any inconsistencies. -->
 
 ### Adding Authentication
 

demo-projects/blog/package.json

@@ -10,7 +10,7 @@
   },
   "scripts": {
     "start": "DISABLE_LOGGING=true node server.js",
-    "build": "next build"
+    "build": "next build app && keystone build"
   },
   "dependencies": {
     "@arch-ui/layout": "^0.2.0",

demo-projects/blog/server.js

@@ -13,7 +13,7 @@ const nextApp = next({
 
 Promise.all([keystone.prepare({ port }), nextApp.prepare()])
   .then(async ([{ server, keystone: keystoneApp }]) => {
-    await keystoneApp.connect();
+    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();

package.json

@@ -34,7 +34,7 @@
     "contributing-guide": "is-ci && exit 0 || chalk -t \"\n\n{bold 📝 Contributing to KeystoneJS?}\n\" && link '🔗 Read the full Contributing Guide' 'https://github.com/keystonejs/keystone-5/blob/master/CONTRIBUTING.md' && echo \"\n\"",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate",
-    "heroku-postbuild": "bolt && yarn build"
+    "heroku-postbuild": "bolt && yarn build && bolt w @keystone-alpha/demo-project-blog build"
   },
   "dependencies": {
     "@babel/cli": "^7.1.2",
@@ -99,6 +99,7 @@
     "endent": "^1.3.0",
     "ensure-error": "^1.0.0",
     "express": "^4.16.3",
+    "express-history-api-fallback": "^2.2.1",
     "express-pino-logger": "^4.0.0",
     "express-react-views": "^0.11.0",
     "express-session": "^1.15.6",

packages/admin-ui/package.json

@@ -62,6 +62,7 @@
     "compression": "^1.7.4",
     "cross-fetch": "^2.2.0",
     "express": "^4.16.3",
+    "express-history-api-fallback": "^2.2.1",
     "falsey": "^1.0.0",
     "file-loader": "^3.0.1",
     "graphql": "^14.0.2",
@@ -92,4 +93,4 @@
     "webpack-dev-middleware": "^3.6.1",
     "webpack-hot-middleware": "^2.24.3"
   }
-}
+}

packages/admin-ui/server/AdminUI.js

@@ -6,11 +6,13 @@ const webpackDevMiddleware = require('webpack-dev-middleware');
 const webpackHotMiddleware = require('webpack-hot-middleware');
 const compression = require('compression');
 const { createSessionMiddleware } = require('@keystone-alpha/session');
+const path = require('path');
+const fs = require('fs');
+const fallback = require('express-history-api-fallback');
 
 const pkgInfo = require('../package.json');
 
 const getWebpackConfig = require('./getWebpackConfig');
-const { mode } = require('./env');
 
 module.exports = class AdminUI {
   constructor(keystone, config = {}) {
@@ -60,6 +62,104 @@ module.exports = class AdminUI {
     );
   }
 
+  staticBuild({ distDir, apiPath, graphiqlPath }) {
+    const builtAdminRoot = path.join(distDir, 'admin');
+
+    const adminMeta = this.getAdminUIMeta({ apiPath, graphiqlPath });
+
+    const compilers = [];
+
+    const secureCompiler = webpack(
+      getWebpackConfig({
+        adminMeta,
+        entry: 'index',
+        outputPath: path.join(builtAdminRoot, 'secure'),
+      })
+    );
+    compilers.push(secureCompiler);
+
+    if (this.authStrategy) {
+      const publicCompiler = webpack(
+        getWebpackConfig({
+          // override lists so that schema and field views are excluded
+          adminMeta: { ...adminMeta, lists: {} },
+          entry: 'public',
+          outputPath: path.join(builtAdminRoot, 'public'),
+        })
+      );
+      compilers.push(publicCompiler);
+    }
+
+    return Promise.all(
+      compilers.map(
+        compiler =>
+          new Promise((resolve, reject) => {
+            compiler.run(err => {
+              if (err) {
+                reject(err);
+              } else {
+                resolve();
+              }
+            });
+          })
+      )
+    );
+  }
+
+  getAdminUIMeta({ apiPath, graphiqlPath }) {
+    const { adminPath } = this;
+
+    return {
+      adminPath,
+      apiPath,
+      graphiqlPath,
+      ...this.getAdminMeta(),
+      ...this.keystone.getAdminMeta(),
+    };
+  }
+
+  createProdMiddleware({ distDir }) {
+    const app = express.Router();
+
+    app.use(compression());
+
+    const builtAdminRoot = path.join(distDir, 'admin');
+    if (!fs.existsSync(builtAdminRoot)) {
+      throw new Error(
+        'There are no Admin UI build artifacts. Please run `keystone build` before running `keystone start`'
+      );
+    }
+    const secureBuiltRoot = path.join(builtAdminRoot, 'secure');
+    const secureStaticMiddleware = express.static(secureBuiltRoot);
+    const secureFallbackMiddleware = fallback('index.html', { root: secureBuiltRoot });
+
+    if (this.authStrategy) {
+      const publicBuiltRoot = path.join(builtAdminRoot, 'public');
+      const publicStaticMiddleware = express.static(publicBuiltRoot);
+      const publicFallbackMiddleware = fallback('index.html', { root: publicBuiltRoot });
+      app.use((req, res, next) => {
+        // TODO: Better security, should check some property of the user
+        return req.user
+          ? secureStaticMiddleware(req, res, next)
+          : publicStaticMiddleware(req, res, next);
+      });
+
+      app.use((req, res, next) => {
+        // TODO: Better security, should check some property of the user
+        return req.user
+          ? secureFallbackMiddleware(req, res, next)
+          : publicFallbackMiddleware(req, res, next);
+      });
+    } else {
+      app.use(secureStaticMiddleware);
+      app.use(secureFallbackMiddleware);
+    }
+
+    const _app = express().Router();
+    _app.use('/admin', app);
+    return _app;
+  }
+
   createDevMiddleware({ apiPath, graphiqlPath, port }) {
     const app = express();
     const { adminPath } = this;
@@ -73,12 +173,6 @@ module.exports = class AdminUI {
       console.log(`🔗 ${chalk.green('Keystone Admin UI:')} ${clickableUrl} (v${pkgInfo.version})`);
     }
 
-    if (mode === 'production') {
-      // only use compression in production because it breaks server sent events
-      // which is what webpack-hot-middleware uses
-      app.use(compression());
-    }
-
     app.use(adminPath, (req, res, next) => {
       // TODO: make sure that this change is OK. (regex was testing on url, not path)
       // Changed because this was preventing adminui pages loading when a querystrings
@@ -88,13 +182,9 @@ module.exports = class AdminUI {
     });
 
     // add the webpack dev middleware
-    const adminMeta = {
-      adminPath,
-      apiPath,
-      graphiqlPath,
-      ...this.getAdminMeta(),
-      ...this.keystone.getAdminMeta(),
-    };
+
+    let adminMeta = this.getAdminUIMeta({ apiPath, graphiqlPath });
+
     const webpackMiddlewareConfig = {
       publicPath: adminPath,
       stats: 'minimal',
@@ -128,32 +218,13 @@ module.exports = class AdminUI {
         return req.user ? secureMiddleware(req, res, next) : publicMiddleware(req, res, next);
       });
 
-      if (mode === 'development') {
-        app.use((req, res, next) => {
-          return req.user
-            ? secureHotMiddleware(req, res, next)
-            : publicHotMiddleware(req, res, next);
-        });
-      }
-
-      this.stopDevServer = () => {
-        return new Promise(resolve => {
-          publicMiddleware.close(() => {
-            secureMiddleware.close(resolve);
-          });
-        });
-      };
+      app.use((req, res, next) => {
+        return req.user ? secureHotMiddleware(req, res, next) : publicHotMiddleware(req, res, next);
+      });
     } else {
       // No auth required? Everyone can access the "secure" area
       app.use(secureMiddleware);
-      if (mode === 'development') {
-        app.use(secureHotMiddleware);
-      }
-      this.stopDevServer = () => {
-        return new Promise(resolve => {
-          secureMiddleware.close(resolve);
-        });
-      };
+      app.use(secureHotMiddleware);
     }
     // handle errors
     // eslint-disable-next-line no-unused-vars

packages/admin-ui/server/getWebpackConfig.js

@@ -6,7 +6,7 @@ const { enableDevFeatures, mode } = require('./env');
 
 const isHerokuEnv = process.env.HEROKU === 'true';
 
-module.exports = function({ adminMeta, entry }) {
+module.exports = function({ adminMeta, entry, outputPath }) {
   const templatePlugin = new HtmlWebpackPlugin({
     title: 'KeystoneJS',
     template: 'index.html',
@@ -87,8 +87,9 @@ module.exports = function({ adminMeta, entry }) {
     entry:
       mode === 'production' ? entryPath : [entryPath, 'webpack-hot-middleware/client?reload=true'],
     output: {
-      filename: `${entry}.js`,
-      publicPath: adminMeta.adminPath,
+      path: outputPath,
+      filename: 'js/[name].[hash].bundle.js',
+      publicPath: adminMeta.adminPath + '/',
     },
     // TODO: We should pay attention to our bundle size at some point, but
     // right now this is just noise

packages/core/lib/core.js

@@ -27,6 +27,7 @@ module.exports = {
     port = DEFAULT_PORT,
     entryFile = DEFAULT_ENTRY,
     serverConfig,
+    distDir,
     _cwd = process.cwd(),
   } = {}) =>
     new Promise((resolve, reject) => {
@@ -73,6 +74,7 @@ module.exports = {
         // Force the admin & port
         ...(appEntry.admin ? { adminUI: appEntry.admin } : {}),
         port,
+        distDir: distDir || appEntry.distDir || 'dist',
       });
 
       return resolve({ server, keystone: appEntry.keystone });