Skip to content

Fetch My Code Electron | Wiki

Jump to bottom
Tejas Nayak edited this page Jun 30, 2023 · 4 revisions

Creating a project

On login, you will be redirected to the dashboard.

  1. Click on new project
  2. Enter the data
  3. Click on create
Package Name is the name of the package you're going to create.
Ex: com.packagename.apk.
App Name is the name of the app you're creating.
Ex: Example App
Token is the fine-grained token with read-only permissions to your repository which contains the code for your project (private or public).

Fill in the other details with respect to your project.

 

Installation

Open your code editor. Run this in the terminal after npm init.

Make sure the values of packageName, appName, author keys in your package.json file are exactly the same as the ones you entered while creating a project in https://serve-my-code.onrender.com/

npm i fetch-my-code-electron

Create index.js file and put this snippet of code in the file.

let { main } = require("fetch-my-code");
let pkg = require("./package.json");

main(pkg, {
    webPreferences:{
        nodeIntegration: true,
        contextIsolation: false,
        enableRemoteModule: true
    },
    titleBarStyle: "hiddenInset",
    icon: 'logo.png'
});

Create an 'index.html' file. This will be your loading screen. Sample:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./node_modules/@iconscout/unicons/css/line.css">
</head>
<body class=" d-flex justify-content-center align-items-center">
    <span class=" d-block">
        <i class=" uil uil-spinner" style="font-size: 30px;"></i>
    </span>

    <style>
        span {
            animation: spin 1s infinite ease-in-out;
        }

        @keyframes spin {
            from { transform: rotate(0deg); } to { transform: rotate(360deg); }
        }
    </style>
</body>
</html>

Upload a release on the GitHub repository and set it as the latest release.

Open Terminal and run electron .

Your receiver end is now ready. Now, you just have to upload a release on the GitHub repository, set it as the latest release, restart your application, and your app is automatically updated.

 

Important Syntaxes

Syntax for fetching files served through the API. 
<link rel="stylesheet" href="fmc:///style.css">
<script src="fmc:///style.css"></script>
<a href="fmc:///sample.html">Click Me!</a>
Syntax for fetching local files.

In 'package.json'

{
  "build": {
    "extraResources": [
      {
        "from": relative-path,
        "to": new file or folder name
      },
      {
        "from": "bootstrap-5.0.2-dist",
        "to": "bootstrap-5.0.2-dist"
      }
    ]
  }
}
<link rel="stylesheet" href="fmc:///style.css">
<script src="fmc:///style.css"></script>
<a href="fmc:///sample.html">Click Me!</a>
Syntax for require statements. 
(async () => {
  let fs = await require("fs");
  let modules = await require("fmc:///modules");
  let { main } = await require("fmc:///main");
  let app = (await require("@electron/remote")).app;
})();
Syntax for loading images in CSS and HTML.
Currently fetching images from GitHub is not possible. However you can load them just like fetching local files.

In 'package.json'

{
  "build": {
    "extraResources": [
      {
        "from": relative-path,
        "to": new file or folder name
      },
      {
        "from": "bootstrap-5.0.2-dist",
        "to": "bootstrap-5.0.2-dist"
      }
    ]
  }
}

In '.css' files

.bg {
  background: url(fmc:///editor_bg.png);
}

In '.html' files, loading images,

<img src="fmc:///editor_bg.png">

 

Have fun building your remote electron.js application.

 

Kindly donate and support this project -> Donate


Proudly created by Tejas Nayak

GitHub | Instagram | Twitter

Clone this wiki locally