+
+
{{minutesText}}:{{secondsText}}
+....
+```
+
+To see the changes to our CSS, you may need to refresh the window by using `CTRL + R`.
+
+Let's reduce the size of our app's window since we don't need a lot of space for our timer. In the `src/main/index.js` file, we can set the window's size. Look for the `createWindow` function in the `src/main/index.js` file:
+
+```js
+function createWindow() {
+ /**
+ * Initial window options
+ */
+ mainWindow = new BrowserWindow({
+ height: 563,
+ useContentSize: true,
+ width: 1000
+ });
+
+ mainWindow.loadURL(winURL);
+
+ mainWindow.on("closed", () => {
+ mainWindow = null;
+ });
+}
+```
+
+The `mainWindow` refers to our app's window and we can set the size by changing the `width` and `height` options passed into the `BrowserWindow` constructor. Let's reduce the size of the height and width so our `mainWindow` code looks like this:
+
+```javascript
+mainWindow = new BrowserWindow({
+ height: 200,
+ useContentSize: true,
+ width: 300
+});
+```
+
+If you find Chromium's devtools to be in the way while running your app, you can have it closed by default by adding the following to the `BrowserWindow` constructor options too:
+
+```javascript
+webPreferences: {
+ devTools: false;
+}
+```
+
+You can still bring up devtools by using `CTRL + Shift + I`.
+
+The `mainWindow` variable should look like the following:
+
+```javascript
+....
+mainWindow = new BrowserWindow({
+ height: 200,
+ useContentSize: true,
+ width: 300,
+ // the below is optional
+ webPreferences: {
+ devTools: false
+ }
+})
+....
+```
+
+Your timer should look like the below:
+
+
+## Building the Desktop Executable
+
+So far we've been running our desktop app using `npm run dev` which starts a local server and rerenders our application on changes. Let's build an executable so we can share our app with others and actually install it on to our system like we do with desktop apps.
+
+To build the executable, run `npm run build` within `timer/`. It can take a while to build the executables for Windows/MacOS/Linux.
+The executables will be located in `timer/build/`.
+
+Note that you won't necessarily be able to build executables for all platforms from any development platform without some extra configuration. You can read more about Multi Platform Builds on [the docs for `electron-builder`](https://www.electron.build/multi-platform-build)
+
+Once the `npm run build` is done, you should see your platform's, and possibly another platform's, executable. For Windows this is a `.exe` file and for MacOS it is a `.AppImage` file. For Linux, the executable's name is the project name with no extension, so it would be `timer` for our example.
+
+## Additional Context
+
+We finished building a timer in Electron and Vue. Writing a cross platform desktop app with Electron and Vue app is similar to writing a regular Vue application with Single File Components
+but with additional APIs from Node and Electron.
+
+Writing a desktop app with Electron and Vue is convenient for web developers. It enables web developers to leverage their prior knowledge and experience.
+
+You can explore [Electron's documentation](https://electronjs.org/docs) and [electron-vue's documentation](https://simulatedgreg.gitbooks.io/electron-vue/content/) to build more complex Electron and Vue applications.
+
+## When to Avoid
+
+Electron applications tend to have larger build sizes and require more resources when compared to their native counterparts written in their respective operating systems' preferred language(s) and framework(s). This is because Electron bundles it's own version of Chromium, a browser, with your application. It doesn't matter if your system already has Chromium. Each Electron application comes with it's own browser.
+
+If the performance and size of an application take priority over the convenience of using web technologies, then avoid building applications with Electron.
+
+## Alternatives
+
+There's an alternative to building cross platform desktop apps with Vue: [vuido](https://github.com/mimecorg/vuido). According to [it's documentation](https://github.com/mimecorg/vuido#development-status), it's still in early stage development. You can also build cross platform desktop apps, without Vue, using either [Qt](https://www.qt.io/) or [Proton Native](https://proton-native.js.org/#/). Vuido, Qt, and Proton Native offer better performance and smaller app sizes than apps built with Electron.
+
+You can build desktop apps in each operating systems preferred language and framework too. This usually translates to maintaining three codebases with similar function and form but usually reaps the best performance and smallest application size.