Create a standalone build for react application using electron - reactjs

It is my first project in that I'm using electron, I'm dealing with a few problems creating standalone publish from the project.
Here's my electron main.js file:
const path = require("path");
const electron = require("electron");
const isDev = require("electron-is-dev");
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;
const url = require("url");
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({ show: false });
// cm: open app in fullscreen mode
mainWindow.maximize();
mainWindow.show();
// cm: remove default menu bar
mainWindow.setMenuBarVisibility(false);
if (isDev) {
mainWindow.loadURL(
"http://localhost:3000"
);
} else {
mainWindow.loadFile("./dist/index.js");
}
// Open the DevTools.
mainWindow.webContents.openDevTools();
// Emitted when the window is closed.
mainWindow.on("closed", function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow);
// Quit when all windows are closed.
app.on("window-all-closed", function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow();
}
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
And my package.json scripts are:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron": "electron .",
"package-win": "electron-packager . IranFMCG --overwrite --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"IranFMCG\"",
},
Everything is fine when the react application is running and I'm using "npm run electron" but after running "npm run package-win" and after that when I'm running exe file I am facing errors.
I think that is because I'm not running react app anymore, but I want to use react build files is it possible?

Related

Electron React app white screen + disconnected devtools in build but fine in development?

When I run my app on the development server (npm start) it works fine without any issues in the console.
However, when I build my app (npm run build && electron-builder -m) I get a white screen and disconnected devTools.
Here is my main.js file
const { app, BrowserWindow, screen } = require('electron')
let mainWindow;
function createWindow () {
// Create the browser window.
const { width, height } = screen.getPrimaryDisplay().workAreaSize
const win = new BrowserWindow({
title:"DSL viewer",
width:1050,
height:700,
maxHeight:height,
maxWidth:width,
minHeight:700,
minWidth:1050,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
devTools: true
}
})
win.loadURL('./index.html');
win.on('closed', function () {
mainWindow = null;
});
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
Here is a screenshot of what the app looks like
Does anyone know what may be causing this or how I can go about debugging it?
Thanks in advance!
It is because electron is unable to find the index.html after build. Change window.loadURL to window.loadURL(__dirname+"/index.html").

How to add additional files to CRA WorkBox Precache?

So, I want to make a PWA for one of my CRA projects. The app has a different wallpaper everytime it loads, which it gets through an API. But since PWAs are supposed to have offline support, I wanted to have a fallback wallpaper which is cached. Or, even better the last result from the API is cached and returned till the user is offline. Something of a StaleWhileRevalidate strategy. But I can't figure out how to achieve this without ejecting from create-react-app. Any ideas?
Thanks
Ok, I figured it out myself. In case anyone else needs this, you can create a file named add_to_precache.js in your project's root directory and add the following code to it:
let fs = require('fs');
let build_dir = "./build";
let precache_re = /precache-manifest\.[a-zA-Z0-9]*\.js/
let urls_to_add = [
/*
Path to files you want to add relative to build directory. Along with any other homepage value you have. Eg: "/app/background.jpg"
*/
]
function generate_revision(){
var chars = "abcdefghijklmnopqrstuvwxyzABCDEEFGHIJKLMNOPQRSTUVWXYZ0123456789".split('');
var revision = '';
for(let i=0;i<24;i++){
revision += chars[Math.round(Math.random() * 62)];
}
return revision;
}
fs.readdir(build_dir, (err, files) => {
for(let file of files){
if(precache_re.test(file)){
let cont = fs.readFileSync(build_dir + '/' + file).toString()
cont = cont.slice(0, cont.length - 4)
urls_to_add.forEach((url) => {
cont += `,\n {\n "url": "${url}",\n "revision": "${generate_revision()}"\n }`
})
cont += `\n]);`
fs.writeFileSync(build_dir + '/' + file, cont);
break;
}
}
})
And then modify your package.json from
//....
"scripts": {
//....
"build": "react-scripts build"
//...
}
//...
}
to
//....
"scripts": {
//....
"build": "react-scripts build && node add_to_precache"
//...
}
//...
}
And you are done. It will do the trick when building the application

How To Create Worker in React

I'm trying to create a worker in an app created from create-react-app using react 16.8.6 and yarn 1.16.0. If I use
const backgroundWorker = new Worker('../assets/js/myWorker.js');
I get the console error: Uncaught SyntaxError: Unexpected token <
But I know that is the correct path. This works fine in Angular. Is there a good tutorial on how to create a worker in React?
The directory "assets" is the public directory for #angular/cli projects, not create-react-app projects. In create-react-app the equivalent of #angular/cli "assets" is "public" which is described in the create-react-app documentation under Using the Public Folder. Move your "js" directory and the "myWorker.js" file to the public directory and update the creation of the worker to point to that path instead:
const backgroundWorker = new Worker('/js/myWorker.js');
You can also use process.env.PUBLIC_URL instead:
const backgroundWorker = new Worker(`${process.env.PUBLIC_URL}/js/myWorker.js`);
Hopefully that helps!
Follow these steps in order to add your worker files to your create-react-app project.
1. Install these three packages:
$ yarn add worker-plugin --dev
$ yarn add comlink
$ yarn add react-app-rewired --dev
2. Override webpack config:
In your project's root directory create a config-overrides.js file with the following content:
const WorkerPlugin = require("worker-plugin");
module.exports = function override(config, env) {
//do stuff with the webpack config...
config.plugins = [new WorkerPlugin({ globalObject: "this"}), ...config.plugins]
return config;
}
3. Replace your npm scripts inside package.json by:
"start": "react-app-rewired start",
"build": "react-app-rewired build",
4. Create two files in order to test your configuration:
worker.js
import * as Comlink from "comlink";
class WorkerWorld {
sayHello() {
console.log("Hello! I am doing a heavy task.")
let numbers = Array(500000).fill(5).map(num => num * 5);
return numbers;
}
}
Comlink.expose(WorkerWorld)
use-worker.js
import * as Comlink from "comlink";
const initWorker = async () => {
const workerFile = new Worker("./worker", { name: "my-worker", type: "module" });
const WorkerClass = Comlink.wrap(workerFile)
const instance = await new WorkerClass();
const result = await instance.sayHello();
console.log("Result of my worker's computation: ", result);
}
initWorker()
5. See the output:
$ yarn start

How to write package.json to use Electron with TypeScript, React

I want to start index.tsx on desktop application.
I set the working folder as follows using create-react-app.
$ create-react-app myapp --typescript
After that, I installed Electron and wrote src/main.ts. When I ran "npm start", index.tsx started on Browser.
I fixed package.json.
npm start "react-scripts start"-> "electron ."
main "main.ts"
I ran "npm start" and "Error launching app" is displayed.
So I fixed it again.
npm start "electron . " -> "electron src/main.ts"
But "A javascript error occurred in the main process" is displayed.
Maybe main.ts is wrong?
import { app, BrowserWindow, App } from "electron";
class Main {
private mainWindow: BrowserWindow | null = null;
private app: App;
private mainURL: string = `file://${__dirname}/index.html`;
public constructor(app: App) {
this.app = app;
this.app.on("window-all-closed", this.onWindowAllClosed.bind(this));
this.app.on("ready", this.create.bind(this));
this.app.on("activate", this.onActivated.bind(this));
}
private onWindowAllClosed() {
this.app.quit();
}
private create() {
this.mainWindow = new BrowserWindow({
width: 800,
height: 400,
minWidth: 500,
minHeight: 200,
acceptFirstMouse: true,
titleBarStyle: "hidden"
});
this.mainWindow.loadURL(this.mainURL);
this.mainWindow.on("closed", () => {
this.mainWindow = null;
});
}
private onActivated() {
if (this.mainWindow === null) {
this.create();
}
}
}
const MyApp: Main = new Main(app);
How do I write package.json? I do not want to "npm run eject".

.net core 2.1 with react testing

I have been developing React and .net core 2.1 web api and have them separately. Now I would like to run tests on client side only and I am not sure if what I want to do is possible. I have create-react-app client side application and there's a single test that renders the entire application.
it("renders without crashing", () => {
const div = document.createElement("div");
ReactDOM.render(<App />, div);
});
When I try to run npm test in the terminal, I have the server running. (I tried running it in visual studio and in cmd with dotnet run. All it does is this error:
TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\whatwg-fetch\fetch.js:436:16)alTrackingWebsite\ClientApp\node_modules\whatwg-fetch\fetch.js:436:16) ingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:289:32)
at XMLHttpRequest.callback.(anonymous function) (C:\Users\Tomas\source\repos\ReactGoalTrackkingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:219:27)ingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTckingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:166:7)arget-impl.js:289:32) lTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:122:7)
at invokeEventListeners (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTractGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:87:17)kingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:219:27) GoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:61:35)
at invokeInlineListeners (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrakingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\xmlhttprequest.js:405:16)ckingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:166:7) ite\ClientApp\node_modules\jsdom\lib\jsdom\living\xhr-utils.js:315:13)
at EventTargetImpl._dispatch (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoakingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\nodes\Document-impl.js:146:21)lTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:122:7ite\ClientApp\node_modules\jsdom\lib\jsdom\browser\Window.js:362:29)) TrackingWebsite\ClientApp\node_modules\jest-environment-jsdom\build\index.js:44:19)
at EventTargetImpl.dispatchEvent (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReackingWebsite\ClientApp\node_modules\jest\node_modules\jest-cli\build\runTest.js:102:17)tGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:87:17)
at XMLHttpRequest.dispatchEvent (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:61:35) at XMLHttpRequest.abort (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\xmlhttprequest.js:405:16) at Object.abort (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\xhr-utils.js:315:13)
at RequestManager.close (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\living\nodes\Document-impl.js:146:21) at Window.close (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jsdom\lib\jsdom\browser\Window.js:362:29)
at JSDOMEnvironment.dispose (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jest-environment-jsdom\build\index.js:44:19) at Promise.resolve.then (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\jest\node_modules\jest-cli\build\runTest.js:102:17)
at <anonymous> at process._tickCallback (internal/process/next_tick.js:188:7)
npm ERR! Test failed. See above for more details.
Here's my startup configuration:
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller}/{action=Index}/{id?}");
});
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseReactDevelopmentServer(npmScript: "start");
}
});
}
Is my configuration incorrect?
When I try to run npm test in the terminal, I have the server running. (I tried running it in visual studio and in cmd with dotnet run. All it does is this error:
TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (C:\Users\Tomas\source\repos\ReactGoalTrackingWebsite\ReactGoalTrackingWebsite\ClientApp\node_modules\whatwg-fetch\fetch.js:436:16)alTrackingWebsite\ClientApp\node_modules\whatwg-
The error happens because the components you rendered in test do not get a correct URL . Let's say :
Your ASP.NET Core listens on http://localhost:5001
Your React Dev Server listens on port 57301
When you run the test by npm test, it will render those react components. However, if your react components fetch requests from server when mounted, it has no idea about the correct server port and then throw an error of Network request failed .
To fix the bug , simply invoke the following command :
react-scripts test --env=jsdom --testURL=https://localhost:50001/
Or change the npm test script in your package.json into :
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom --testURL=https://localhost:50001/",
"eject": "react-scripts eject"
}
Update :
if you're using fetch api , don't forget to mock a fetch :
"devDependencies": {
"jest-fetch-mock": "^1.6.6"
}
setup :
global.fetch = require('jest-fetch-mock')

Resources