build error with desktop viewer tutorial

[Mhmeshkini]

Hi

thank you for this tutorial. when I run "npm run build" I give an error that"missing script: build" Could you please give me a hint?

thank you in advance.

[calebmshafer]

@Mhmeshkini what tutorial are you using when hitting this error?

[Mhmeshkini]

@Mhmeshkini what tutorial are you using when hitting this error?

https://www.itwinjs.org/learning/tutorials/develop-desktop-viewer/ and I removed the line assert (https://github.com/imodeljs/imodeljs/pull/1575/files)

[aruniverse]

Could you share your package.json for your app? Are you running npm run start in the right directory?

[Mhmeshkini]

Could you share your package.json for your app?

I used the standard package (https://github.com/imodeljs/desktop-starter) I just changed the client ID

/*---------------------------------------------------------------------------------------------

• Copyright (c) Bentley Systems, Incorporated. All rights reserved.
• See LICENSE.md in the project root for license terms and full copyright notice. --------------------------------------------------------------------------------------------/ import as minimist from "minimist"; import as path from "path"; import { assert, Logger, LogLevel } from "@bentley/bentleyjs-core"; import { ElectronHost } from "@bentley/electron-manager/lib/ElectronBackend"; import { Presentation } from "@bentley/presentation-backend"; import { AppLoggerCategory } from "../common/LoggerCategory"; import { desktopStarterChannel, DesktopStarterInterface, getRpcInterfaces, ViewerConfig } from "../common/ViewerProps"; import { IpcHandler } from "@bentley/imodeljs-backend";

const appInfo = { id: "app", title: "Desktop Starter", envPrefix: "app_", };

const getAppEnvVar = (varName: string): string | undefined => process.env[${appInfo.envPrefix}${varName}];

class DesktopStarterHandler extends IpcHandler implements DesktopStarterInterface { public get channelName() { return desktopStarterChannel; } public async getConfig(): Promise { // first two arguments are .exe name and the path to main.js. Skip them. const parsedArgs = process.env.NODE_ENV === "development" ? minimist(process.argv.slice(1 + process.argv.findIndex((a: string) => a.includes("main.js")))) : minimist(process.argv.slice(1));

const samplePath = ElectronHost.app.isPackaged
  ? path.join(ElectronHost.app.getAppPath(), "build", "assets").replace("app.asar", "app.asar.unpacked")
  : path.join("assets", "Baytown.bim");

const iModel = getAppEnvVar("IMODEL");
const name = getAppEnvVar("PROJECT");

return {
  sampleiModelPath: samplePath,
  snapshotName: parsedArgs._[0] ?? getAppEnvVar("SNAPSHOT"),
  project: (name && iModel) ? { iModel, name } : undefined,
};

} }

/**

• Initializes Electron backend */ const initialize = async () => {

  // Setup logging immediately to pick up any logging during IModelHost.startup() Logger.initializeToConsole(); Logger.setLevelDefault(LogLevel.Warning); Logger.setLevel(AppLoggerCategory.Backend, LogLevel.Info);

  const clientId = "????????????????????????????????????????"; // Replace with your Client ID

  const opts = { electronHost: { webResourcesPath: path.join(__dirname, "..", "..", "build"), rpcInterfaces: getRpcInterfaces(), ipcHandlers: [DesktopStarterHandler], developmentServer: process.env.NODE_ENV === "development", authConfig: { clientId, scope: "openid email profile organization imodelhub context-registry-service:read-only product-settings-service urlps-third-party offline_access", }, }, };

  await ElectronHost.startup(opts);

  // Initialize Presentation Presentation.initialize();

  await ElectronHost.openMainWindow({ width: 1280, height: 800, show: true });

  if (process.env.NODE_ENV === "development") ElectronHost.mainWindow?.webContents.toggleDevTools(); };

try { initialize(); // eslint-disable-line @typescript-eslint/no-floating-promises } catch (error) { Logger.logError(AppLoggerCategory.Backend, error); process.exitCode = 1; }

[calebmshafer]

@Mhmeshkini it looks like you're running the commands in C:\Users\meshk\Desktop\Mohammad09062021, I would expect you to run this in a sub-directory called desktop-starter as that's where git cloning will put it by default. Can you check if you have a directory by that name in your current folder?

[aruniverse]

Can you confirm that you are running the start command in your applications root directory?

[Mhmeshkini]

@Mhmeshkini it looks like you're running the commands in C:\Users\meshk\Desktop\Mohammad09062021, I would expect you to run this in a sub-directory called desktop-starter as that's where git cloning will put it by default. Can you check if you have a directory by that name in your current folder?

you are right, thank you. I did not get that error again. however, I got another one.

[Mhmeshkini]

Can you confirm that you are running the start command in your applications root directory?

i modified it, you are right

[pmconne]

Did you run npm install before npm run build?

[Mhmeshkini]

Did you run npm install before npm run build?

I run it in the root, so, I have another problem:

[pmconne]

You need to read and follow the steps in the tutorial. The first step instructs you to install prerequisites, which include Node 12. Node 16 is not currently supported.

[Mhmeshkini]

You need to read and follow the steps in the tutorial. The first step instructs you to install prerequisites, which include Node 12. Node 16 is not currently supported.

wooow, I did not know. thank you. I will try that

[Mhmeshkini]

Thank you very much. By going to the directory and running npm and also changing the node version, I could complete a program. However, when I run, I get this error. I do not know what is the problem.

[calebmshafer]

@Mhmeshkini can you verify that the client id you provided in the main.ts file is exactly the same as the one created on https://developer.bentley.com/my-apps/?

[Mhmeshkini]

@Mhmeshkini can you verify that the client id you provided in the main.ts file is exactly the same as the one created on https://developer.bentley.com/my-apps/? yes, I am sure that I copied the right client id. I tried another tutorial (https://developer.bentley.com/tutorials/web-application-quick-start/). in this tutorial, I have to copy client id, context id, and model id in the .env file, which I did. but again I got this error after signing in.

[calebmshafer]

@laurynasr any idea what could be happening?

[williamkbentley]

Can you verify that you created and are using a new Desktop/Mobile client? The client id you used in the web app tutorial will not be valid for the desktop one. As this tutorial hints it should start with native-xxx...

[Mhmeshkini]

Can you verify that you created and are using a new Desktop/Mobile client? The client id you used in the web app tutorial will not be valid for the desktop one. As this tutorial hints it should start with native-xxx...

I am using SPA

[aruniverse]

I am using SPA

This will not work, as Will mentioned above the the desktop tutorial says you will need a desktop client id, one that looks like native-xxx. If you are trying to use the desktop starter as your template, you will need to register a Desktop/Mobile Application:

The web tutorial is completely separate and you should not be following that for your desktop needs. Please stick to the desktop tutorial

[Mhmeshkini]

I am using SPA

This will not work, as Will mentioned above the the desktop tutorial says you will need a desktop client id, one that looks like native-xxx. If you are trying to use the desktop starter as your template, you will need to register a Desktop/Mobile Application:

The web tutorial is completely separate and you should not be following that for your desktop needs. Please stick to the desktop tutorial

thank you, I will try that. but in this Tutorial (https://developer.bentley.com/tutorials/web-application-quick-start/) it is not mentioned

[aruniverse]

thank you, I will try that. but in this Tutorial (https://developer.bentley.com/tutorials/web-application-quick-start/) it is not mentioned

As the tutorial name suggests, thats for web-applications (SPAs/WebApps) The desktop-starter you cloned should have pointed you to the desktop tutorial

We will try to update the docs to be more explicit.

[Mhmeshkini]

thank you, I will try that. but in this Tutorial (https://developer.bentley.com/tutorials/web-application-quick-start/) it is not mentioned

As the tutorial name suggests, thats for web-applications (SPAs/WebApps) The desktop-starter you cloned should have pointed you to the desktop tutorial

We will try to update the docs to be more explicit.

thank you

[Mhmeshkini]

thank you, I will try that. but in this Tutorial (https://developer.bentley.com/tutorials/web-application-quick-start/) it is not mentioned

As the tutorial name suggests, thats for web-applications (SPAs/WebApps) The desktop-starter you cloned should have pointed you to the desktop tutorial

We will try to update the docs to be more explicit.

Even when I created new App, desktop/mobile, again I receive this error

[aruniverse]

Even when I created new App, desktop/mobile, again I receive this error

Still receiving an authentication error?

just to confirm:

1. you've created a new desktop application, and obtained the client id, which looks like native-XXXXXXXXXXXXXXXXXXX.
2. you've updated the .env file with the client id from above
3. you killed your application, ran a npm run build then a npm run start to pickup your latest changes
4. you are running your desktop appplication on port 3000, and the redirect uris all look like the ones listed in the tutorial

[williamkbentley]

you've updated the .env file with the client id from above

Actually, desktop-starter requires you to hard-code the client id in main.ts.

[Mhmeshkini]

Even when I created new App, desktop/mobile, again I receive this error

Still receiving an authentication error?

just to confirm:

1. you've created a new desktop application, and obtained the client id, which looks like native-XXXXXXXXXXXXXXXXXXX.
2. you've updated the .env file with the client id from above
3. you killed your application, ran a npm run build then a npm run start to pickup your latest changes
4. you are running your desktop appplication on port 3000, and the redirect uris all look like the ones listed in the tutorial

yes, exactly. I followed all these steps

[aruniverse]

yes, exactly. I followed all these steps

Could you open up dev tools, and share what requests are failing and what the responses look like?

[Mhmeshkini]

yes, exactly. I followed all these steps

Could you open up dev tools, and share what requests are failing and what the responses look like?

[aruniverse]

Actually, desktop-starter requires you to hard-code the client id in main.ts.

@Mhmeshkini did you do this^

Looking at the screenshot above, looks like your application is configured incorrectly. The tutorial says the redirect uri should be http://localhost:3000/signin-callback but you have it set to http://localhost:3000

The error says invalid redirect_uri so that might be it. I'd double check the logout redirect_uri is setup correctly too.

[Mhmeshkini]

AGAIN I GET EROR

[Mhmeshkini]

Actually, desktop-starter requires you to hard-code the client id in main.ts.

@Mhmeshkini did you do this^

Looking at the screenshot above, looks like your application is configured incorrectly. The tutorial says the redirect uri should be http://localhost:3000/signin-callback but you have it set to http://localhost:3000

The error says invalid redirect_uri so that might be it. I'd double check the logout redirect_uri is setup correctly too.

[laurynasr]

You have configured the client to allow https://localhost:3000, but have http://localhost:3000 in your configuration -- note the scheme difference. The URL must match exactly, make sure that the scheme is the same as well.

[calebmshafer]

closing due to inactivity, if you continue to have the issue feel free to re-open or open a new issue.