Unlocking Cross-Platform Desktop Apps with Svelte and Electron

Getting Started with Svelte and Electron

To begin building a cross-platform desktop app, you’ll need Node and npm installed on your machine. Once you have these prerequisites in place, create a new Svelte project using the following command:

npx degit svelte/template

This will generate a folder structure that includes the necessary files for your project.

Next, install Electron using npm:

npm install electron

Create an index.js file to define the desktop window that will be opened when your app is launched. Configure Rollup to control your app’s build process, and set Electron to launch your app by editing your package.json file:

{
  "scripts": {
    "dev": "electron.
  }
}

Launching Your App

After completing these steps, you can launch your app by running the following command in your terminal:

npm run dev

Your app should now be live, with a basic interface ready for customization.

Securing Your Access Token

A crucial aspect of our mobile top-up recharge app is making secure HTTP requests to the API. To achieve this, you’ll need client credentials and an access token. Use Reqbin to make a POST request to obtain an access token, and store it securely in a.env file using dotenv:

REQBIN_API_KEY=your_api_key
REQBIN_API_SECRET=your_api_secret
ACCESS_TOKEN=your_access_token

Structuring Your API Request

In your App.svelte file, define the necessary parameters for the API request, and create functions to handle the responses:

<script>
  let apiUrl = 'https://api.example.com/recharge';
  let accessToken = '';

  async function rechargeMobile() {
    // API request logic
  }
</script>

<main>
  <h1>Mobile Top-up Recharge App</h1>
  <button on:click={rechargeMobile}>Recharge</button>
</main>

Use a combination of HTML and Svelte elements to represent the data, and style your app using CSS.

Distributing Your App

Once your app is complete, you can distribute it using electron-builder. Install this tool using npm:

npm install electron-builder

Add the distribution config to your package.json file:

{
  "build": {
    "appId": "com.example.app",
    "win": {
      "target": "NSIS"
    },
    "mac": {
      "target": "DMG"
    },
    "linux": {
      "target": "AppImage"
    }
  }
}

Run the following command to build your app and create a distributable version:

npm run dist

The Power of Combination

By combining Svelte and Electron, you’ve created a powerful desktop app that showcases your skills as a developer. Remember, working with different frameworks is key to improving your skills and unlocking new possibilities.

Check out the source code of this desktop app on GitHub and explore the endless possibilities of cross-platform development.