Contact information

17/F, 8th Cross, 2nd Main Road, New Colony, Chromepet, Chennai, Tamil Nadu 60004, Chennai, Tamil Nadu 600044

We are available 24/ 7. Call Now. +9179047 06652 howl@nyxwolves.com
react-app-as-an-exe-file

To Install and Run Node/React app as an Exe file We’ll need the following prerequisites:

  1. NodeJS and npm installed. https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
  2. A demo Node App https://medium.com/@diogo.fg.pinheiro/simple-to-do-list-app-with-node-js-and-mongodb-chapter-1-c645c7a27583 
  3. Inno Setup Compiler  https://jrsoftware.org/isdl.php
  4. Bat to exe converter https://bat-to-exe-converter-x64.en.softonic.com/

Step 1 : Make Sure the Node app is installed and ready to launch. 

  1. Run the install command mentioned in the documentation of the node app.
    Usually it’s either NPM init or YARN install
  2. Once the installation is done and all the required modules are installed, try running the app with the command mentioned in the documentation
    Usually it’s NPM start or YARN run

Step 2 : Create a exe file that executes the run command to start the application

  1. Open BAT to EXE converter
  2. Type the run command used to start the app
  3. Click convert to convert it into an exe file, we can also add an icon for a better looking exe file.
    Node/React app as an Exe file
  4. Add this line on top to open the cmd in background
if not DEFINED IS_MINIMIZED set IS_MINIMIZED=1 && start "" /min "%~dpnx0" %* && exit

Step 3 : Create a setup file to extract the files and create a shortcut on desktop and start menu

  1. Open inno setup compiler
  2. Select “new script” and fill in the project details.
    Node/React app as an Exe file
  3. Let the application destination base be default or customise it if needed.
    This will be your installation directory.
  4. Choose the exe file we created on step 2 as main executable file
    Also choose “add folder” and choose the root folder consisting all the required files and exe file.

    Node/React app as an Exe file
  5. Choose your setup name, output folder and setup icon.
    Node/React app as an Exe file

  6. Click on finish to generate the setup file
    Node/React app as an Exe file

Step 4 : Create a installer for systems without nodeJS Pre installed.

  1. Go to your setup output directory from step 3
  2. Download the latest version of node installer from here
    https://nodejs.org/en/download/
  3. Group them in a folder named “bin” like this
    Node/React app as an Exe file
  4. Open bat to exe converter and paste the following commands
    Node/React app as an Exe file
cd bin/
start “YourApplicationNameHere”.exe
start node.msi
  1. Convert it to an exe and place it outside the bin folder
  2. Compress the bin folder and this exe as a zip.

This Zip can be shared with anyone who doesn’t have prior programming experience or nodeJS installed in their system. The installer installs both NodeJs and the app and creates shortcuts on the desktop and start menu. This shortcut will open up the application in the browser.

 

To learn how to setup CI/CD Pipeline for react app with Github actions:

Leave a Reply

Your email address will not be published.

Need a successful project?

Lets Howl Together

Start Your Project