Starting your desktop PWA and it's server in one click

MwauraMuchiri — Wed, 11 Sep 2019 17:54:56 +0000

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 and Nodemailer 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;

App icon appears in the windows start menu
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

Oct 5 '11 Comments: 4 Answers: 4

As part of some automated deploy + test scripts I use to verify programming done for a site, I have some scripts which update Apache's config files. I would like to programmatically restart WAMP so the changes take effect. Is there a good way to do this?

The scripts are…

Open Full Question

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. 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.


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/

DEV Community: MwauraMuchiri

Starting your desktop PWA and it's server in one click

This post is for locally served desktop pwa only