Starting your desktop PWA and it's server in one click
Tags: pwa, node, wamp, bashscript
Published: 2019-09-11 17:54:56

---
title: Starting your desktop PWA and it's server in one click
published: true
description: After installing your PWA app, why do you have to start your server first before clicking on the app? I found a hack to start both in one click. 
tags: PWA, nodejs, wamp, bash script
---

You have an app you just created to help you out with some tasks. It could be a to-do list, reminder app, calendar app, emailer... My usecase is an emailer app that creates an email template using [BeeFree.io](https://beefree.io) and [Nodemailer](https://nodemailer.com/) to send the emails through SMTP.

####*This post is for locally served desktop pwa only*

**First thing is to install your PWA as a desktop app.** Now opening the app when your server is not running brings 404 error because the url, say **http://localhost:8000** does not exist. So you have to start the server before opening the PWA. Doing it separately beats the logic of it being a PWA. We want to achieve the experience of a real app. Features of an installed app is usually;
1. App icon appears in the windows start menu
2. Everything just starts in one click.

To achieve these, you need to create a bash script in your app folder. This will help in starting the node/wamp server. Inside the script file, locate your server and start it.

**For Node js servers;**
```
cd "*app server folder*"
node server.js
```


**For Wamp servers;**
Check out the StackOverflow's answer on starting wamp server on cmd
{% stackoverflow 7665706 %}

Now save the script then create its shortcut file. You should change the shortcut file's icon to the app's favicon icon and rename it as the app's name (remove the "- shortcut" name). Put the shortcut file inside Window's Start Menu folder, usually at *C:\Users\~~user_name~~\AppData\Roaming\Microsoft\Windows\Start Menu*. Note that the real pwa app will be located in the start menu folder, inside Programs/Chrome apps folder (assuming you installed the PWA using Chrome browser).
You should now see the app icon appearing in the windows start menu. On clicking it, it will start the server nice and easy.

After the server starts. Now we need to open the PWA. This is basically simulating clicking the PWA. I used the node *server.js file* to open it by using [node-open module](https://github.com/pwnall/node-open/). It is quite easy to code it yourself in node js, just that it is easier for you if it is already coded! ~~Be as lazy as possible. You are a developer~~

In the server file after the server is up, just require the module and open the PWA.
```javascript

var open = require("open");

open(
  "C:/Users/~~user_name~~/AppData/Roaming/Microsoft/Windows/Start Menu/Programs/Chrome Apps/Emailer"
);

```

Notice the url points to the PWA and note the url? Using the apps url opens the app in the browser instead of the intalled PWA. This hack is temporary as Chrome is already thinking of **link capturing**, a fancy name for opening the PWA whenever a url associated with the app is opened in the browser.

For wamp server, I have not yet tried opening the PWA but I'm pretty sure there's a way using the bash script.




Desktop PWA anouncement: *https://appuals.com/microsoft-and-google-collaborate-for-pwa-platform-on-windows-10/*