admin ui fails to load correctly with custom server setup

[abhijithvijayan]

Bug report

Describe the bug

I am using custom express server with keystone(in typescript) I can't load up the admin ui after setting up custom server

I followed the article on https://www.keystonejs.com/guides/custom-server#all-in-one-custom-server

To Reproduce

`app.ts`

``` import { Keystone } from '@keystonejs/keystone'; import { KnexAdapter } from '@keystonejs/adapter-knex'; import { Text, Checkbox, Password } from '@keystonejs/fields'; import { genRandomString } from './util/string'; import secrets, { ENVIRONMENT, PRODUCTION } from './config/secrets'; import { userIsAdmin, userIsAdminOrOwner } from './util/accessControl'; const { DATABASE_URL, PROJECT_NAME } = secrets; export const dev: boolean = ENVIRONMENT !== PRODUCTION; // drop db in development const shouldDropDb: boolean = dev; // Create keystone instance export const keystone: Keystone = new Keystone({ name: PROJECT_NAME, adapter: new KnexAdapter({ knexOptions: { client: 'postgres', connection: DATABASE_URL, }, // ToDo: https://github.com/keystonejs/keystone/pull/2414 dropDatabase: shouldDropDb, }), onConnect: initialiseData, // eslint-disable-line @typescript-eslint/no-use-before-define }); // callback efter onconnect() async function initialiseData(): Promise { // Count existing users const { data: { _allUsersMeta: { count }, }, // eslint-disable-next-line @typescript-eslint/no-use-before-define } = await keystone.executeQuery( `query { _allUsersMeta { count } }` ); if (count === 0) { const password = genRandomString(); const email = 'admin@example.com'; // eslint-disable-next-line @typescript-eslint/no-use-before-define await keystone.executeQuery( `mutation initialUser($password: String, $email: String) { createUser(data: {name: "Admin", email: $email, isAdmin: true, password: $password}) { id } }`, { variables: { password, email, }, } ); // eslint-disable-next-line no-console console.log(` User created: email: ${email} password: ${password} Please change these details after initial login. `); } } // create initial list keystone.createList('User', { fields: { name: { type: Text }, email: { type: Text, isUnique: true, }, isAdmin: { type: Checkbox, // Field-level access controls // Here, we set more restrictive field access so a non-admin cannot make themselves admin. access: { update: userIsAdmin, }, }, password: { type: Password, }, }, // List-level access controls access: { read: userIsAdminOrOwner, update: userIsAdminOrOwner, create: userIsAdmin, delete: userIsAdmin, auth: true, }, }); ```

`server.ts`

``` import express, { Express } from 'express'; import { BaseApp } from '@keystonejs/keystone'; // import { NextApp } from '@keystonejs/app-next'; import { GraphQLApp } from '@keystonejs/app-graphql'; import { AdminUIApp } from '@keystonejs/app-admin-ui'; import { PasswordAuthStrategy } from '@keystonejs/auth-password'; import logger from './util/logger'; import { keystone, dev } from './app'; import setUpExpress from './config/express'; // create authentication strategy const authStrategy = keystone.createAuthStrategy({ type: PasswordAuthStrategy, list: 'User', config: { identityField: 'email', // default: 'email' secretField: 'password', // default: 'password' }, }); const apps: BaseApp[] = [ new GraphQLApp(), new AdminUIApp({ enableDefaultRoute: true, authStrategy, }), // new NextApp({ // dir: 'client', // }), ]; // prepare middlewares for each app keystone.prepare({ apps, dev }).then(async ({ middlewares }) => { await keystone.connect(); const app: Express = express(); setUpExpress(app, middlewares); // set up routes app.listen(app.get('port'), () => { logger.info(`Express is running at http://localhost:${app.get('port')} in ${app.get('env')} mode`); }); }); ```

Keystone keeps on logging into terminal

logs

``` {"level":30,"time":1584856458764,"pid":16116,"hostname":"archlinux","req":{"id":1,"method":"GET","url":"/admin/signin","headers":{"host":"localhost:3001","user-agent":"Mozilla/5.0 (X11; Linux x86_64; rv:74.0) Gecko/20100101 Firefox/74.0","accept":"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8","accept-language":"en-US,en;q=0.5","accept-encoding":"gzip, deflate","dnt":"1","connection":"keep-alive","upgrade-insecure-requests":"1"},"remoteAddress":"::ffff:127.0.0.1","remotePort":59600},"res":{"statusCode":200,"headers":{"x-powered-by":"Express","x-keystone-app-version":"1.0.0","vary":"Origin, Accept","access-control-allow-credentials":"true","content-type":"text/html; charset=utf-8","accept-ranges":"bytes","content-length":"424","etag":"W/\"1a8-q0KhDnwcw/PhurEpSz+XWN3wtiQ\""}},"responseTime":13,"msg":"request completed","v":1} {"level":30,"time":1584856458839,"pid":16116,"hostname":"archlinux","req":{"id":2,"method":"GET","url":"/admin/js/main.2fba0732dfc5d32a4771.bundle.js","headers":{"host":"localhost:3001","user-agent":"Mozilla/5.0 (X11; Linux x86_64; rv:74.0) Gecko/20100101 Firefox/74.0","accept":"*/*","accept-language":"en-US,en;q=0.5","accept-encoding":"gzip, deflate","dnt":"1","connection":"keep-alive","referer":"http://localhost:3001/admin/signin"},"remoteAddress":"::ffff:127.0.0.1","remotePort":59600},"res":{"statusCode":200,"headers":{"x-powered-by":"Express","x-keystone-app-version":"1.0.0","vary":"Origin, Accept","access-control-allow-credentials":"true","content-type":"*/*","accept-ranges":"bytes","content-length":"7198005","etag":"W/\"6dd535-FeSow/7XUvHCcM252Pn2E/lgJGM\""}},"responseTime":19,"msg":"request completed","v":1} ```

Expected behaviour

The login page should be loaded

Screenshots

Browser console:

System information

• OS: Arch Linux
• Browser: firefox

Additional context

[abhijithvijayan]

I deleted node_modules and lock file and reinstalled

Now the page seems to load but the terminal is littered with logs on each route change

A sample log is attached above.

[gautamsi]

set env DISABLE_LOGGING=true for disabling such logs.

[abhijithvijayan]

Thanks.

Initially this issue was about not loading the dashboard ui. It was throwing nothing but these errors.