#How to migrate Electron to Node-js app ?

12 messages · Page 1 of 1 (latest)

lofty iris
#

How to migrate Electron to Node-js app ?

#

Hi, I using one file "api" that have things that I don't think frontend (React) can handle. I love to learn how to migrate those files to a node backend. If anyone has experience.

#

This package in particular.

zenith hazel
#

use IPC and set up this package from your main process

lofty iris
#

Hi

#

I will add more info here in a second

#

**How to start the electron app: **

Index.

  1. Make project folder

  2. Clone diffuse & git-js

  3. Change /diffuse/src/renderer/App.tsx to not use "react-split-pane".

  4. Remove "react-split-pane from diffuse's package.json

  5. Install yarn in diffuse

  6. run app with "yarn dev"
    ...

  7. Make a folder called "project" - mkdir project && cd project. then in terminal.

  8. Clone diffuse & git-js repo:
    git clone https://github.com/micnil/git-js.git
    git clone https://github.com/micnil/diffuse.git

  9. Change /diffuse/src/renderer/App.tsx to not use "react-split-pane".

import SplitPane from './SplitPane/Pane';
...        
<SplitPane><div><SideBar /></div><div><Comparison /></div></SplitPane>
  1. Remove "react-split-pane from diffuse's package.json
    /diffuse/package.json
"dependencies": {
** - "react-split-pane": "../react-split-pane",**
}

  1. Install yarn in diffuse
    cd "diffuse", yarn

  2. run app with "yarn dev"
    yarn dev

#

What I'm trying to do:
Migrate "Electron app" to "React" all works but one file, api.ts.

Background Info:
I've an issue with a library called "simple-git".

It enable Git commands inside your projects.

I forked a repository with simple-git & electron to show in a user interface all commits from the projects.
-- Example in screenshot below this post.

The repository code can be found at github link.

**Scenario: **
I manage to make the "Electron" app workable with the repository.

I'm using the one "side-repos" so I have folder structure.

PROJECT STRUCTURE:

/project/
-- diffuse/
-- git-js/

PACKAGE.JSON FILE: /project/diffuse/package.json:

 "dependencies": {
   "simple-git": "../git-js",
},

The "diffuse" project uses an api as following:

inside src/common/api.ts,
https://github.com/micnil/diffuse/blob/master/src/renderer/common/api.ts

// 1. Import Git from simple-git.

import * as Git from 'simple-git/promise';

// 2. Export default as Api with commit functions.

export default interface Api {
    getCommits(repoPath: string, numCommits: number): Promise<ICommit[]>;
    getCommits(repoPath: string, numCommits: number, fromHash: string): Promise<ICommit[]>;
    diffCommits(repoPath: string, hashes: string[]): Promise<IComparison>;
}

// 3. Uses that in Index.ts inside a "store" - and then a render.

import * as api from './common/api';
import { App } from './App';

const loggerMiddleware = createLogger();
let store = createStore(
    rootReducer,
    applyMiddleware(thunk.withExtraArgument(api), loggerMiddleware),
);

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('app'),
);

Is this familiar. I know its very old code.

lofty iris
#

I love some help. This is what I done. And the issues I'm facing. I love some feedback and help! ❤️