How to Open a Web App by Clicking a Desktop Shortcut

Learn to make our Node projects like desktop programs that open like that and do their work with full access to program files.

One day, while scrolling through UpWork jobs, I saw a job asking for an HTML file that opens by clicking on it and starts showing wedding images from a system folder as a slideshow.

I started thinking—how is that possible? Because when we click on an HTML file, we just see the HTML content. We can easily build an auto slideshow with different transitions and animation options, timing, and many more controls.

But how do we store the image data? We can store image data in the HTML file as Base64 strings, but it’s an impractical and inefficient way that affects rendering for a large number of images and their size.

So finally, we have the option to store images in a subfolder inside the folder where the HTML file is placed and serve the images using a local server. We can easily build a Node project that does all this work.

But now the question is: how can we do both things—run our project server and automatically open the HTML file to start the slideshow just by clicking a desktop icon?

When I asked this question to ChatGPT, I found that the solution to all our problems is a Batch Script File.

We can easily do our work using it. And for that, you can read my previous blog: Introduction to Windows Batch Scripting to know more about the Batch Scripting.

Here is the folder structure of a simple project that demonstrates this idea:

We are using start.bat and start.vbs files to open this program with and without the command line window. We will make two desktop shortcuts pointing to these two files.

Below are the codes of these two files:

// start.bat code
@echo off
echo ========= Launcher Code Start =========

netstat -aon | findstr :3000 | findstr LISTENING>nul
if %errorlevel%==0 (
    echo Port 3000 is already in use.
) else (
    cd /d %~dp0
    echo Starting server on port 3000
    start /b "" node server.js
    timeout /t 1 >nul
)
start "" "http://localhost:3000"
echo Opened browser.
echo ========= Launcher Code End ===========

// start.vbs code
Set WshShell = CreateObject("WScript.Shell")
WshShell.Run chr(34) & "start.bat" & chr(34), 0
Set WshShell = Nothing

When we click on these shortcuts, the slideshow starts automatically—and that’s exactly the idea of the UpWork job poster, to show wedding photos this way.

Now we know how we can bring this idea to life as a Node.js-based slideshow app that opens like a desktop program. We saw how batch and VBS scripts help launch it smoothly.

I realized we can build great apps that bundle everything like a desktop program and work the same way—just using web technologies instead of Windows software. That’s right!

I hope you enjoyed exploring this idea with me, learned something new, and found this post helpful and informative. This approach is great for local apps with a real desktop feel.

In the next blog, I’ll build a feature-rich slideshow app with transitions, fullscreen, and keyboard controls. When it’s live, I’ll share the link here for all of us to check out!

Thanks for reading! 🤝 Happy Coding! ✨