AdminUIPlugin's devMode unusable

[manuelaguirre]

Describe the bug When running AdminUIPlugin with devMode: true I get the log in page and I cannot login because the app is making requests to localhost:4200/admin-api that return a 404 error. Maybe it should be rewrited to point to localhost:3000/admin-api instead?

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Environment (please complete the following information):

• @vendure/core version:1.3.0
• Nodejs version: 14.16.0
• Database (mysql/postgres etc): PostgreSQL

[michaelbromley]

Hi, Can you please share your config?

[manuelaguirre]

import {
    dummyPaymentHandler,
    DefaultJobQueuePlugin,
    DefaultSearchPlugin,
    VendureConfig,
} from '@vendure/core';
import { defaultEmailHandlers, EmailPlugin } from '@vendure/email-plugin';
import { AssetServerPlugin } from '@vendure/asset-server-plugin';
import { AdminUiPlugin } from '@vendure/admin-ui-plugin';
import { compileUiExtensions } from '@vendure/ui-devkit/compiler';
import path from 'path';

export const config: VendureConfig = {
    apiOptions: {
        port: 3000,
        adminApiPath: 'admin-api',
        adminApiPlayground: {
            settings: {
                'request.credentials': 'include',
            } as any,
        },// turn this off for production
        adminApiDebug: true, // turn this off for production
        shopApiPath: 'shop-api',
        shopApiPlayground: {
            settings: {
                'request.credentials': 'include',
            } as any,
        },// turn this off for production
        shopApiDebug: true,// turn this off for production
    },
    authOptions: {
        superadminCredentials: {
            identifier: 'superadmin',
            password: 'superadmin',
        },
        cookieOptions: {
            secret: process.env.COOKIE_SECRET || 'cookie-secret',
        },
    },
    dbConnectionOptions: {
        type: 'postgres',
        synchronize: true, // turn this off for production
        logging: false,
        database: 'vendure',
        host: 'localhost',
        port: 5432,
        username: 'vendure',
        password: 'vendure',
        migrations: [path.join(__dirname, '../migrations/*.ts')],
    },
    paymentOptions: {
        paymentMethodHandlers: [dummyPaymentHandler],
    },
    customFields: {},
    plugins: [
        AssetServerPlugin.init({
            route: 'assets',
            assetUploadDir: path.join(__dirname, '../static/assets'),
        }),
        DefaultJobQueuePlugin.init({ useDatabaseForBuffer: true }),
        DefaultSearchPlugin.init({ bufferUpdates: false, indexStockStatus: true }),
        EmailPlugin.init({
            devMode: true,
            outputPath: path.join(__dirname, '../static/email/test-emails'),
            route: 'mailbox',
            handlers: defaultEmailHandlers,
            templatePath: path.join(__dirname, '../static/email/templates'),
            globalTemplateVars: {
                // The following variables will change depending on your storefront implementation
                fromAddress: '"example" <noreply@example.com>',
                verifyEmailAddressUrl: 'http://localhost:8080/verify',
                passwordResetUrl: 'http://localhost:8080/password-reset',
                changeEmailAddressUrl: 'http://localhost:8080/verify-email-address-change'
            },
        }),
        AdminUiPlugin.init({
            route: 'admin',
            port: 3000,
            app: compileUiExtensions({
                outputPath: path.join(__dirname, 'admin-ui'),
                extensions: [{
                    extensionPath: path.join(__dirname, 'ui-extensions'),
                    ngModules: [{
                        type: 'lazy',
                        route: 'upload-file',
                        ngModuleFileName: 'file-uploader.module.ts',
                        ngModuleName: 'FileUploaderModule',
                    }],
                }],
                devMode: true
            }),
        }),
    ],
};

[michaelbromley]

Thanks. Looks ok. At what url are you accessing the admin ui in the browser?

[manuelaguirre]

at localhost:4200 as the console indicates

[michaelbromley]

Take a look at the server startup message, it should indicate that the dev server at port 4200 is being proxied to port 3000. Therefore you should use port 3000 as usual and things should work.

[manuelaguirre]

Oh, when I connect to localhost:3000 it hot reloads and everything

[manuelaguirre]

I get this message: [run:server] ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/admin ** when I start it up and it got me confused. Thanks!

[michaelbromley]

Yes, I understand how that can be confusing. Unfortunately I cannot hide that without hiding all output of the angular CLI, which would not be desirable.

[HendrikMennen]

Now I have the same problem. Except that for me I can't use localhost:3000 in devmode. Without devmode everything works. Also I noticed that the AdminUIPort is 3002 by default. I always used 3000 anyways and chaning it to 3000 had no effect

[HendrikMennen]

[michaelbromley]

Except that for me I can't use localhost:3000 in devmode.

What occurs when accessing localhost:3000/admin?

Also note that it can take a couple of minutes until the admin ui app has compiled and is ready to receive requests.

[HendrikMennen]

Seems like it compiles fine: I am still confused by setting the port for admin UI. If I have it on 3002 or 3000 does not seem to make a difference at all and it will start on 3000.

On 4200, I can access the admin UI but it fails finding the API

[michaelbromley]

Ah good. So what happens is that the Admin UI app actually runs on port 3002 (prod mode) or port 4200 (dev mode), but the AdminUiPlugin proxies that to port 3000/admin. That means you always access it on port 3000, no matter what mode it is running in.

The reason that you see those Http failure errors when you try to access it on port 4200 is that there is a json file vendure-ui-config.json that is loaded during bootstrap (check your network tab) and this file tells the admin UI app what the url of the Admin API is. It defaults to auto, which means "use the same domain as whatever the admin ui app is running on", hence that causes an error when running on port 4200 because there is no corresponding API on that port.

[HendrikMennen]

Okay that makes sense but still doesn't solve my issue, or does it? On localhost:3000/admin all resources seem to be missing

[michaelbromley]

oh ok. What's the full url of eg. the styles.css request there?

And can you check the html source of the html file and see if there is a base tag in the head?

Also is your setup just a standard @vendure/create install with the ui-devkit added?

[HendrikMennen]

Yes, it pretty much is a @vendure/create.

import {
  dummyPaymentHandler,
  DefaultJobQueuePlugin,
  DefaultSearchPlugin,
  VendureConfig,
} from "@vendure/core";
import { defaultEmailHandlers, EmailPlugin } from "@vendure/email-plugin";
import { AssetServerPlugin } from "@vendure/asset-server-plugin";
import { AdminUiPlugin } from "@vendure/admin-ui-plugin";
import { ExtendedShipmentsPlugin } from "./plugins/extended-shipping";
import { BraintreePlugin } from "@vendure/payments-plugin/package/braintree";
import { compileUiExtensions } from "@vendure/ui-devkit/compiler";
import { Environment } from "braintree";
import "dotenv/config";
import path from "path";

const IS_DEV = process.env.APP_ENV === "dev";

export const config: VendureConfig = {
  apiOptions: {
    port: 3000,
    adminApiPath: "admin-api",
    shopApiPath: "shop-api",
    // The following options are useful in development mode,
    // but are best turned off for production for security
    // reasons.
    ...(IS_DEV
      ? {
          adminApiPlayground: {
            settings: { "request.credentials": "include" } as any,
          },
          adminApiDebug: true,
          shopApiPlayground: {
            settings: { "request.credentials": "include" } as any,
          },
          shopApiDebug: true,
        }
      : {}),
  },
  authOptions: {
    tokenMethod: ["bearer", "cookie"],
    superadminCredentials: {
      identifier: process.env.SUPERADMIN_USERNAME,
      password: process.env.SUPERADMIN_PASSWORD,
    },
    cookieOptions: {
      secret: process.env.COOKIE_SECRET,
    },
  },
  dbConnectionOptions: {
    type: "mysql",
    // See the README.md "Migrations" section for an explanation of
    // the `synchronize` and `migrations` options.
    synchronize: false,
    migrations: [path.join(__dirname, "./migrations/*.+(js|ts)")],
    logging: false,
    database: process.env.DB_NAME,
    host: process.env.DB_HOST,
    port: +process.env.DB_PORT,
    username: process.env.DB_USERNAME,
    password: process.env.DB_PASSWORD,
  },
  paymentOptions: {
    paymentMethodHandlers: [dummyPaymentHandler],
  },
  // When adding or altering custom field definitions, the database will
  // need to be updated. See the "Migrations" section in README.md.
  customFields: {},
  plugins: [
    AssetServerPlugin.init({
      route: "assets",
      assetUploadDir: path.join(__dirname, "../static/assets"),
      // For local dev, the correct value for assetUrlPrefix should
      // be guessed correctly, but for production it will usually need
      // to be set manually to match your production url.
      assetUrlPrefix: IS_DEV ? undefined : "https://www.my-shop.com/assets",
    }),
    DefaultJobQueuePlugin.init({ useDatabaseForBuffer: true }),
    DefaultSearchPlugin.init({ bufferUpdates: false, indexStockStatus: true }),
    EmailPlugin.init({
      devMode: true,
      outputPath: path.join(__dirname, "../static/email/test-emails"),
      route: "mailbox",
      handlers: defaultEmailHandlers,
      templatePath: path.join(__dirname, "../static/email/templates"),
      globalTemplateVars: {
        // The following variables will change depending on your storefront implementation.
        // Here we are assuming a storefront running at http://localhost:8080.
        fromAddress: '"example" <noreply@example.com>',
        verifyEmailAddressUrl: "http://localhost:8080/verify",
        passwordResetUrl: "http://localhost:8080/password-reset",
        changeEmailAddressUrl:
          "http://localhost:8080/verify-email-address-change",
      },
    }),
    AdminUiPlugin.init({
      route: "admin",
      port: 3002,
      app: compileUiExtensions({
        outputPath: path.join(__dirname, "../admin-ui"),
        extensions: [
        ],
        devMode: true
      }),
    }),
    BraintreePlugin.init({
      environment: Environment.Sandbox,
      // This allows saving customer payment
      // methods with Braintree (see "vaulting"
      // section below for details)
      storeCustomersInBraintree: true,
    }),
  ],
};

[michaelbromley]

hmm... strange that the base is just /. That is probably what's causing the assets to 404.

Oh one important question - what version of Vendure are you using?

[HendrikMennen]

1.8.1 with Node v16.18.0 on Windows.

I tried to use v18.12.0 but had issues compiling.

Just upgraded to 1.8.2 and same issue.

[michaelbromley]

ok, this is strange. You can also try this:

 AdminUiPlugin.init({
      route: "admin",
      port: 3002,
      app: compileUiExtensions({
        outputPath: path.join(__dirname, "../admin-ui"),
        extensions: [
        ],
        devMode: true
      }),
     adminUiConfig: {
       apiHost: 'http://localhost',
       apiPort: 3000,
     }

and then see if it works on port 4200 in the browser.

[HendrikMennen]

Thanks, that does seem to work for me :)