Running a Vue.js App as a Stand-alone Executable With Golang as backend

Front-End Setup

For detailed information, refer to this tutorial

• Follow this steps

Install Dependencies
Open your terminal and run:

npm i

Update Stimulsoft Files

Replace the contents at the following path:

gain-softwares-front/node_modules/stimulsoft-reports-js/Scripts/

with the files from stimulsoft1.zip.

Update files at:

gain-softwares-front/node_modules/.vite/deps/
delete this deps folder and restart server

Install Express

npm install express

Create app.js

At the root of the front-end project, create a file named app.js.

Add the required code to app.js.

const { execSync } = require("child_process");
const { join } = require("path");
const { createServer } = require("http-server");
const path = require("path");

// Get the executable's directory
const exePath = process.pkg ? process.execPath : __dirname;
const distPath = path.join(path.dirname(exePath), "dist");

// Specify the options for the server
const options = {
  root: distPath,
  port: 5173,
};

// Create the server
const server = createServer(options);

// Define the shell command to open Google Chrome programmatically
const shellCommand = (() => {
  switch (process.platform) {
    case "win32":
      console.log("Run win");
      return `start chrome http://localhost:${options.port}`;
    case "darwin":
      console.log("Run mac");
      return `open -a "Google Chrome" http://localhost:${options.port}`;
    case "linux":
      console.log("Run linux");
      return `xdg-open http://localhost:${options.port}`;
    default:
      throw new Error("Unsupported platform");
  }
})();

// Start the server and open Chrome
server.listen(options.port, () => {
  try {
    execSync(shellCommand);
    console.log(`Server is running on http://localhost:${options.port}`);
    console.log(`Serving files from: ${distPath}`);
    console.log(
      `Do not close this terminal window as long as you run the app.`
    );
  } catch (error) {
    console.error("Failed to open browser:", error.message);
  }
});

Update package.json

Modify the package.json file to include the pkg data object.

  "bin": "app.js",
  "pkg": {
    "scripts": "app.js",
    "assets": [
      "dist/*",
      "dist/**/*",
      "node_modules/**/*"
    ],
    "targets": [
      "node18-macos-x64",
      "node18-win-x64",
      "node18-linux-x64"
    ],
    "outputPath": "executable",
    "options": {
      "publicPath": "dist"
    }
  }

Install pkg Globally

npm install pkg -g

Build the Project

npm run build

Generate Executables

node pkg.js

pkg app.js --targets node18-linux-x64,node18-macos-x64,node18-win-x64

or run this for set path and icon also

pkg app.js --targets node18-win-x64,node18-linux-x64,node18-macos-x64 --output executable/gain-software --icon public/gain-software-logo.ico

Locate Executables

The generated executables will be available in either the project’s root directory or a dedicated executable directory.

For Linux Run:

Set the Executable Permission

chmod +x gain-software

Execute the file by running

./gain-software

And Frontside is done now move on to the backend

---

Back-End Setup

For detailed information, refer to this tutorial

• Follow this steps

Build Executables for Windows/Linux
Open your terminal and run the following commands:

For Windows

GOOS=windows GOARCH=amd64 go build -o dist/gain-api.exe

OR

GOOS=windows GOARCH=amd64 go build -ldflags="-H windowsgui" -o dist/gain-api.exe

For Linux

GOOS=linux GOARCH=amd64 go build -o dist/gain-api

Configure Environment
Ensure the environment variables are set according to the operating system:

Windows: Use backslash () as the default path separator.

Linux (Ubuntu): Use forward slash (/) as the default path separator.

Run the Build on a Windows Machine with dist folder

Execute the generated .exe file to run your application.

Notes:

• Ensure all dependencies and configurations are updated as required.
• Verify the environment setup for smooth operation across different platforms.

Happy Coding!
Thanks