How can I test electron-builder auto-update flow? - testing

I built an Electron app and I am now looking at how to distribute it.
I went with electron-builder to handle packaging etc.
For a bit of context, as a web developer, I am used to continuously deploy web apps on a web server but I have a hard time figuring out how to distribute a packaged one in Electron.
In electron-builder docs there is a brief mention about testing auto-update:
"Note that in order to develop/test UI/UX of updating without packaging the application you need to have a file named dev-app-update.yml in the root of your project, which matches your publish setting from electron-builder config (but in YAML format)"
But, it's rather vague...
So I actually have two questions:
1. How do I actually test the auto-update flow?
Do I need to actually publish a new version to trigger an update locally? Seems pretty unclear, it would be like developing against the production server.
2. Is it possible to have a fallback for unsigned code?
I don't have yet any certificate for code signing. So the OS/app will block the auto-update. But, I'd still want to tell the user that an update is available so they can go and download the app manually. Can I do that? (going back to point 1, I'd like to be able to test this flow)

I've just finished dealing with this. I also wanted to test against a non-production server and avoid having to package my app each time I iterated. To test downloads I had to sign my app, which slowed things down. But it sounds like you just need to check for updates. Which I think you can do as follows...
I created a dummy github repo, then created a a file dev-app-update.yml containing:
owner: <user or organization name>
repo: dev-auto-update-testing
provider: github
The path where this file is expected to be defaults to a place you can't access. Thankfully, you can override it like so:
if (isDev) {
// Useful for some dev/debugging tasks, but download can
// not be validated becuase dev app is not signed
autoUpdater.updateConfigPath = path.join(__dirname, 'dev-app-update.yml');
}
...that should be enough for your case -- since you don't need downloads.
If not, here are some other tips:
you can change the repo setting in your electron-builder config to point at your dummy repo then package your app. This will give you a packed, production build that points at your dummy repo -- this is how I did my download testing (though I have a cert, and signed my app)
you should be calling autoUpdate's checkForUpdates(), but if checkForUpdatesAndNotify() gives you a useful OS Notification then you should be able to set autoUpdater.autoDownload to false and end up with what you need.
Lastly, it sounds you could skip autoUpdater, since you won't be using the download feature anyway. Instead you could use github's releases api, assuming you use github to host your release. If not then your host should have something similar. Use that to check for updates then tell the user from within your App (could present them with a clickable URL too). If you want OS Notifications electron has a module for that.

We're using electron-updater with GitHub as a provider for auto-updates. Unfortunately, it breaks a lot and the electron-builder team doesn't support these issues well (1, 2, 3) (from my own experience, but you can find more examples on GitHub).
One way to test updates in dev mode:
Create a build of your app with an arbitrarily high version number
Create a public repo and publish the above build
Create a dev-app-update.yml next to your main entry point and configure it for the repo above (see)
In your main entry point:
import { autoUpdater } from "electron-updater";
...
if (process.env.NODE_ENV === "development") {
// Customize the test by toggling these lines
// autoUpdater.autoDownload = false
// autoUpdater.autoInstallOnAppQuit = false;
autoUpdater.checkForUpdates();
}
Then when running yarn dev you should see something like:
Checking for update
...
Found version 100.0.0 (url: <>.exe)
Downloading update from <>.exe
updaterCacheDirName is not specified in app-update.yml Was app build using at least electron-builder 20.34.0?
updater cache dir: C:\Users\<>\AppData\Local\Electron
New version 100.0.0 has been downloaded to C:\Users\<>\AppData\Local\Electron\pending\<>.exe
And it should install when you close the dev app.
This should give you some certainty but we still ran into issues in production. If you want to be sure, play through the full update flow with a test repo but packaged production apps just as you would do with the live one.

Related

How to provide an HttpClient to ktor server from the outside to facilitate mocking external services?

I am trying to provide an HttpClient from the outside to my ktor server so that I can mock external services and write tests, however I get this exception when I run my test:
Please make sure that you use unique name for the plugin and don't install it twice. Conflicting application plugin is already installed with the same key as `Compression`
io.ktor.server.application.DuplicatePluginException: Please make sure that you use unique name for the plugin and don't install it twice. Conflicting application plugin is already installed with the same key as `Compression`
at app//io.ktor.server.application.ApplicationPluginKt.install(ApplicationPlugin.kt:112)
at app//com.example.plugins.HTTPKt.configureHTTP(HTTP.kt:13)
at app//com.example.ApplicationKt.module(Application.kt:14)
at app//com.example.ApplicationTest$expected to work$1$1.invoke(ApplicationTest.kt:39)
at app//com.example.ApplicationTest$expected to work$1$1.invoke(ApplicationTest.kt:38)
and thats a bit unexpected to me because I am not applying the Compression plugin twice as far as I can tell. If I run the server normally and manually call my endpoint with curl then it works as expected. What am I doing wrong?
I added a runnable sample project here with a failing test.
sample project
official ktor-documentation-sample project.
The problem is that you have the application.conf file and by default, the testApplication function tries to load modules which are enumerated there. Since you also explicitly load them in the application {} block the DuplicatePluginException occurs. To solve your problem you can explicitly load an empty configuration instead of the default one:
// ...
application {
module(client)
}
environment {
config = MapApplicationConfig()
}
// ...

Get the latest code-push deployed bundled on a fresh app install

Is it possible to ensure that after a fresh install of my code-pushified react-native app the user gets the latest deployed bundle from code-push?
My intention is to ensure that the user will always get the latest version of my app even after opening it for the first time.
EDIT 1
I am already aware of code-push configurations such as InstallMode and checkFrequency. I am currently using the less intrusive installMode = ON_NEXT_RESTART.
The scenario I want to avoid is the following: I first publish my app on the Play Store (let's do an Android example) with version 1.0.0. After, let's say, 6 months and a lot of new features and bug fixes my app is on version 1.0.27. If I only published the updates (the new versions) on code-push then the original apk available in Play Store still contains the bundle version 1.0.0. This means that any new user opening the app for the first time, right after installation, will get the 6-months-old 1.0.0 version without any of new the features and fixes that the latest version includes. Only after restarting the app (let's say it happens on the next day) the user will get the 1.0.27 version from code-push (remember that I am using installMode = ON_NEXT_RESTART).
The obvious solutions for this are:
Publish a new apk on the Play Store for every new version of my app (besides, of course, publishing it on code-push).
Use a more intrusive installMode.
Mark every single code-push release as a mandatory install.
I am ok with the 1st option (and the 1st option only). I wanted to check if there is another option I am not aware of. To be honest I don't know if what I want is actually possible to do with code-push.
As per discussion in comments, what you wish to achieve can be achieved using manual updates of code push. To do so, you can set a variable in AsyncStorage to denote that you have opened app at least once, and if that doesn't exist control & immediately update the app. An example can be seen below;
class MyApp extends Component {
componentDidMount() {
AsyncStorage.getItem('#AppHasOpened').then((appHasOpened) => {
if (!(appHasOpened && appHasOpened === 'yes')) {
AsyncStorage.setItem('#AppHasOpened', 'yes').then(() => {
codePush.sync({
installMode: codePush.InstallMode.IMMEDIATE,
});
});
}
});
}
}

How to create an aurelia 1.0 app that can be deployed at any root location

I am trying to work out how to deploy an aurelia app, it runs in development with au run. but I need to deploy it into a path which is not the root of the web-site. ie at '/site' not '/'
when I deploy I get an exception from the router: ERROR [app-router] Error: Route not found: /site/
I think it may be that I need to specify a baseURL in one or more places?
but can't see how I can:
make it work in the development environment at /
make it work in the deployed environment at /[any-site-path]
avoid building in knowledge of '/[any-site-path]' to my development environment or bundles, as the path wont be known until someone comes to deploy the code?
i found this question but that seems to apply to an out of date version of the code.
I am using Aurelia 1.0 and building using the au-cli
Any pointers would be useful.
Looks like this is a bug that has been fixed in a more recent version.
I have just gone through and applied the latest versions of:
"aurelia-bootstrapper": "^1.0.0" -> "^2.1.1"
"aurelia-cli": "^0.24.0" -> "^0.26.1"
"aurelia-tools": "^0.2.2" -> "^1.0.0"
And i can now deploy my application to a site sub folder without specifying any url content in the code or html files!
So I can satisfy all 3 of the criteria in my question.
Note the aurelia-cli update (0.25.0) requires a change to the main.(ts/js) as mentioned in the release notes.

Load debug version of pre-built module via npm/webpack

There is a javascript library, pre-built and available on npm, that I wish to develop with/debug. In my case, it is openlayers.
In the classic way of requiring a javascript file and wanting to debug, one would just switch the script url from the production version to the debug version, ie:
to
However, when using webpack and then importing via npm:
import openlayers from 'openlayers'
Gets you the production distribution of the library, the same as the ol.js script from above.
On a side note, to stop webpack trying to parse a prebuilt library and throw a warning about that you must include something like this:
// Squash OL whinging
webpackConfig.module.noParse = [
/\/dist\/ol.*\.js/, // openlayers is pre-built
]
Back to the problem at hand: how can I conditionally load a different entry-point for a module prebuilt and imported like this?
Of course, I can do it in a hacky way. By going into the node_modules/openlayers/package.json and switching the browser field from
"browser": "dist/ol.js",
to
"browser": "dist/ol-debug.js",
Is there a way I can request a different entry point via webpack or by using a different import syntax? Do I first have to petition the library maintainers to update the browser field to allow different entry point hints to browsers, according to the spec? https://github.com/defunctzombie/package-browser-field-spec
Thoughts on a more effective way to make this happen? Yearning to be able to programmatically switch loading of the production and debug versions of a library based on env variables.
Webpack has configuration options for replacing a module into a different path: https://webpack.github.io/docs/configuration.html#resolve-alias
This resolves the openlayers import to use the debug version:
webpackConfig.resolve.alias: {
openlayers: 'openlayers/dist/ol-debug.js'
}
In my build system I have a function that takes the environment type and returns the matching webpackConfig. Based on the parameter I include the above snippet or not.
Full code: webpack-multi-config.js
I have two different (gulp-) tasks for development and production. For example the production task: webpackProduction.js
Line 1 imports the config script with production as type.
My build system is based on gulp starter.

Agile Central example cumulative flow diagram not rendering

After checking out the source from: https://github.com/RallyApps/app-catalog
I attempted to build the Portfolio Item cumulative flow diagram src/apps/charts/rpm/cfd locally using
rally-app-builder build which shows no errors
Launching App-debug.html allows me to input the relevant settings, but once I click 'save', nothing renders and there are no errors logged to the JS console either, making debugging challenging.
I attempted to copy the build output into a custom html app inside rally, which displayed the same behaviour.
Is this a bug with the example app? Or have I missed some crucial configuration step?
EDIT:
Extra info - I tried running via the rally-app-builder to no avail (think it's related to this issue: https://github.com/RallyApps/rally-app-builder/issues/45). I attempted to flatten the structure and the result of that was a cross-origin request error.
Running from file resulted in a 403 for the SDK
Sorry about that- that Rally App Builder issue is definitely the problem you're running into. Just as a test I downloaded the built html output for that app from the app catalog release: https://github.com/RallyApps/app-catalog/releases/download/2.1/2.1.zip
It worked when installed on a custom html app on my dashboard once I edited the app settings and configured a portfolio item.
If you're looking to tweak this app from source you'll probably have to copy all those files referenced in config.json that live in parent directories into the main app directory and fix the paths in config.json. Then you should be able to build and run the app normally using Rally App Builder.
It seems this app was really not designed to be run externally, so I added a little code to ease the issues I ran into:
In PortfolioChartAppBase.js, _loadSavedPortfolioItem function:
scope: this,
fetch: ['Name', 'ObjectID'] //this is new
And I added some default settings as a top level config object in CumulativeFlowChartApp.js (since the code to force into settings mode doesn't seem to work correctly when running externally):
config: {
defaultSettings: {
portfolioItemPicker: '/portfolioitem/feature/52725935318', //insert a valid oid here
startDate: 'actualstartdate',
endDate: 'actualenddate',
chartAggregationType: 'storycount'
}
},