Running an Aurelia plugin's dev app in a non-default browser [SOLVED]

Help Requests
1

When creating a new plugin using the Aurelia CLI, it also contains a dev app for comfortable standalone testing/evaluation purposes.

When running the plugin’s dev app with npm start, it does not automatically open a browser window by default. The documentation states, that a browser window can be opened when executing au run --open. I myself edited aurelia.json in the aurelia_project folder to automatically open a browser window by default. That seems to do the job as well.

However, since Mozilla Firefox is my default browser, Firefox is used automatically. I’d prefer to open it in Google Chrome instead, however.

I know how to configure this with Webpack: in webpack.config.js, specify 'chrome' instead of true for the value of the open property of the devServer option. But it turns out that Webpack is not included/used when creating a new plugin. Even when scaffolding a custom project using the Aurelia CLI there is no option to specify Webpack as the bundler for a new plugin.

I tried to specify "chrome" instead of true for the value of the open property of the platform property in aurelia.json, but that did not have any effect: it still opens in Firefox. (Probably because "chrome" is a truthy value.)

Is there a way to explicitly use Chrome (while keeping Firefox set as my default browser) when running a plugin’s dev app?

1 Like
2

It’s in your aurelia_project/tasks/dev-server.js.

The whole dev server is there. Auto open is handled by npm package “open”, you can pass parameter to change browser.

2 Likes
3

Hello @huochunpeng ,

Thanks! That looks pretty good.

I just tried to update my code based on your info, but I think I am still doing something wrong. (Probably something stupid that I overlook.)

First, I changed the platform.open property in aurelia_project/aurelia.json back to true and I started the dev app with npm start. As expected, the dev app is opened in Firefox.

Next, I looked at aurelia_project/tasks/dev-server.ts.

At the top, it indeed imports the open package:

import * as _open from 'open';

And the last line of its exported run function tries to open the browser window:

if (open) _open(url);

After reading the documentation of the open package using your provided link, I changed that last line to this:

if (open) _open(url, { app: { name: _open.apps.chrome } });

But that resulted in a compile error when attempting to start the dev app:

TypeError: Cannot read property 'chrome' of undefined

So I tried to use a hard-coded value for the name instead:

if (open) _open(url, { app: { name: 'chrome' } });

With that in place, compilation goes well, but it does not open the browser window in the end. It doesn’t show any error message either, so it seems to be completely ignored.

I also tried it with the value 'firefox' as well:

if (open) _open(url, { app: { name: 'firefox' } });

This does not open a browser window either.

Do you happen to have any idea what I might be missing here?

4

Hi @huochunpeng,

Sorry for the last message. I just resolved it.

After creating the plugin project using au new, the package.json file specifies version 7.3.1 for the open package. After updating it manually to the latest version (8.0.4), it works fine.

1 Like