eden
ну или лучше подскажите, как обмануть электроновский deep link механизм, который не даёт мне залогиниться в сервисе в дев режиме
Pumpkin
Pumpkin
Пробовал, не помогло
У меня была точна такая же проблема с transparent.
Мне помогло следующее
<body>
<div id="root">...</div>
</body>
#root {
overflow: auto;
border-radius: 12px;
}
У body не должен быть указан background, это важно
Rav
У меня была точна такая же проблема с transparent.
Мне помогло следующее
<body>
<div id="root">...</div>
</body>
#root {
overflow: auto;
border-radius: 12px;
}
У body не должен быть указан background, это важно
Хмм, так не пробовал
Попробую завтра обязательно, большое спасибо
herenickname
Хелоу гайс!
Я не вкатывался в электрон примерно никогда, и вообще бекендер по жизни, но теперь появилась задача, не бейте сильно!
Есть ли для vue native-ui-like фреймворки?
Хочется как во флаттере, из коробки и пары костылей, собрать приложение, но для десктопа.
И чтобы было похоже на обычное приложение хостовой системы.
В приле будет много бизнес кода, уже написанного на JS, поэтому проще сразу взять электрон, подумал я.
Michael
Хелоу гайс!
Я не вкатывался в электрон примерно никогда, и вообще бекендер по жизни, но теперь появилась задача, не бейте сильно!
Есть ли для vue native-ui-like фреймворки?
Хочется как во флаттере, из коробки и пары костылей, собрать приложение, но для десктопа.
И чтобы было похоже на обычное приложение хостовой системы.
В приле будет много бизнес кода, уже написанного на JS, поэтому проще сразу взять электрон, подумал я.
Это больше вопрос в чат по Vue :)
Можно использовать любые фронтенд фреймворки
Michael
Всем привет, может кто-нибудь подсказать, возможно ли на electron + angular сделать функционал, похожий на это? То есть создание нового окна при перетаскивании файла из изначального окна в пустое пространство вне этого родительского окна?
Я создал на HTML5 drag & drop. Один минус по сравнению с вашим видео у меня: превью в момент создания окна анимируется назад на своё исходное место
Оконный
Я создал на HTML5 drag & drop. Один минус по сравнению с вашим видео у меня: превью в момент создания окна анимируется назад на своё исходное место
Могу ли я посмотреть на исходный код вашей реализации?
Стас
Хелоу гайс!
Я не вкатывался в электрон примерно никогда, и вообще бекендер по жизни, но теперь появилась задача, не бейте сильно!
Есть ли для vue native-ui-like фреймворки?
Хочется как во флаттере, из коробки и пары костылей, собрать приложение, но для десктопа.
И чтобы было похоже на обычное приложение хостовой системы.
В приле будет много бизнес кода, уже написанного на JS, поэтому проще сразу взять электрон, подумал я.
Из близкого к задаче - https://github.com/elemefe/element
Стас
Можно другие отсмотреть, гуглятся по “vue desktop ui kit”, электрону без разницы что там будет
Ismoil
Можно другие отсмотреть, гуглятся по “vue desktop ui kit”, электрону без разницы что там будет
"But in the end it doesn't even matter" как в вашем био 😁
Стас
Ага
eden
моё электрон приложение перестало реагировать на CMD + Q, кто-нибудь сталкивался? Это надо как-то настраивать по-особому?
eden
моё электрон приложение перестало реагировать на CMD + Q, кто-нибудь сталкивался? Это надо как-то настраивать по-особому?
кажется понял, почему не работает.
другой вопрос. Можно как-то собрать версию электрона, в которой будет переменная IS_DEV=true.
Пользуюсь пакетом electron-is-dev, передаю при сборке переменную ELECTRON_IS_DEV=1, но не срабатывает...
Rav
🅰️nimeCoder
🅰️nimeCoder
process.env.ELECTRON_IS_DEV = 1
🅰️nimeCoder
Я правда не понимаю зачем для этого целый пакет
🅰️nimeCoder
и даже не просто пакет, а щит пакет от sindresorhus
Ismoil
🅰️nimeCoder
Вы к чему это? Если он вам не нужен, то просто не устанавливайте)
да ни к чему) просто люди ставят пакеты в 3 строки, которые имеют еще миллион дев звисимостией и обычно не редко обычных таких же от sindresorhus в 1-3 строки
Причём конфигов там больше чем кода наверное на сто иксов, и все 3 строки покрыты тестами с 100% coverage
🅰️nimeCoder
так мало того что ставят себе это shit, так тянут его в прод сборку, в которую потом при очередной обнове может говна какого-то прилепится. Давно малварей на NPM небыло?
🅰️nimeCoder
Вот это более развернуть ответ на вопрос к чему это я
А что до тех кто задаёт вопрос, то они как видно даже не смотрят что делает пакет и не пытаются. Это видно как по вопросу который по коду имеет риторический ответ, так и к наплевательскому отношению к установке новых зависимостей
eden
Если каждый пакет изучать, то можно кукухой поехать
Дмитрий
Всем привет. Необходимо сделать прокси сервер или нечто что будет транслировать запросы на сервер. Пробовал сделать так:
protocol.registerSchemesAsPrivileged([
{ scheme: "server", privileges: { secure: true, standard: true } },
]);
app.whenReady().then(() => {
protocol.handle("server", (req) => {
const { host, pathname } = new URL(req.url);
const servers = store.get(STORE_KEYS.SERVERS, []);
const server = servers.find(
(item) => item.uuid === host
) as Server | null;
if (!server) {
return new Response("<h1>Server not found</h1>", {
status: 404,
headers: { "content-type": "text/html" },
});
}
return net.fetch(new URL(pathname, server.url).toString(), {
method: req.method,
headers: req.headers,
body: req.body,
});
});
});
Но натыкаюсь на ошибку в консоли:
GET server://84157447-b113-4ada-9158-6b46e5521686/main.e90d0345a67eae05.js net::ERR_UNEXPECTED
Беглый поиск в интернетах показал что ошибка известная но как исправить не нашел.
Из этого 2 вопроса:
1. Сталкивался ли кто с такой проблемой и решал ли ее.
2. Есть идея сделать прокси через node сервер, но нода должна както обращаться к основному процессу электрона и получать настройки сервера. Может кто подскажет как правильней сделать.
Спасибо
Стас
Всем привет. Необходимо сделать прокси сервер или нечто что будет транслировать запросы на сервер. Пробовал сделать так:
protocol.registerSchemesAsPrivileged([
{ scheme: "server", privileges: { secure: true, standard: true } },
]);
app.whenReady().then(() => {
protocol.handle("server", (req) => {
const { host, pathname } = new URL(req.url);
const servers = store.get(STORE_KEYS.SERVERS, []);
const server = servers.find(
(item) => item.uuid === host
) as Server | null;
if (!server) {
return new Response("<h1>Server not found</h1>", {
status: 404,
headers: { "content-type": "text/html" },
});
}
return net.fetch(new URL(pathname, server.url).toString(), {
method: req.method,
headers: req.headers,
body: req.body,
});
});
});
Но натыкаюсь на ошибку в консоли:
GET server://84157447-b113-4ada-9158-6b46e5521686/main.e90d0345a67eae05.js net::ERR_UNEXPECTED
Беглый поиск в интернетах показал что ошибка известная но как исправить не нашел.
Из этого 2 вопроса:
1. Сталкивался ли кто с такой проблемой и решал ли ее.
2. Есть идея сделать прокси через node сервер, но нода должна както обращаться к основному процессу электрона и получать настройки сервера. Может кто подскажет как правильней сделать.
Спасибо
Если я правильно понял, и тебе нужно перехватывать веб-запросы во вне внутри electron-приложения, то можно навесить хуки https://www.electronjs.org/docs/latest/api/web-request
Стас
Если же нужен внешний прокси и нужно обращаться к процессу, то через IPC https://www.electronjs.org/docs/latest/api/ipc-main
Дмитрий
Если же нужен внешний прокси и нужно обращаться к процессу, то через IPC https://www.electronjs.org/docs/latest/api/ipc-main
не совсем понимаю как сделать проксирование через ipc
Дмитрий
через session.defaultSession.webRequest.onBeforeSendHeaders не получается сделать, реквесты не ловятся
Дмитрий
идея заключается в подмене хоста, на локальный условно было http://site.com в электроне открывается iframe c урлом server://uuid/ и необходимо всю статику которая вызывалась на странице спроксировать
Дмитрий
идея заключается в подмене хоста, на локальный условно было http://site.com в электроне открывается iframe c урлом server://uuid/ и необходимо всю статику которая вызывалась на странице спроксировать
статика если что запрашивается от / по мимо статики есть запросы к api итд
Стас
через session.defaultSession.webRequest.onBeforeSendHeaders не получается сделать, реквесты не ловятся
Сложно что-то сказать без кода
Дмитрий
Вставка iframe с кастомным протоколом:
import { useEffect } from "react";
import { useSearchParams } from "react-router-dom";
export const WorkSpace = () => {
const [searchParams] = useSearchParams();
const uuid = searchParams.get("uuid");
return (
<iframe
src={`server://${uuid}`}
style={{
width: "100vw",
height: "100vh",
border: "none",
}}></iframe>
);
};
сейчас реализованно так:
protocol.registerSchemesAsPrivileged([
{ scheme: "server", privileges: { secure: true, standard: true } },
]);
app.whenReady().then(() => {
protocol.handle("server", async (req) => {
const { host, pathname } = new URL(req.url);
const servers = store.get(STORE_KEYS.SERVERS, []);
const server = servers.find(
(item) => item.uuid === host
) as Server | null;
if (!server) {
return new Response("<h1>Server not found</h1>", {
status: 404,
headers: { "content-type": "text/html" },
});
}
return await net.fetch(new URL(pathname, server.url).toString(), {
method: req.method,
headers: req.headers,
body: req.body,
});
});
});
C хоста возвращается такой html:
<!doctype html>
<html lang="ru" data-critters-container>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<title>NEXTBOX</title>
<link rel="icon" type="image/x-icon" href="/assets/inner-logo-icon.png">
<link rel="/assets/inter/inter.css">
<link id="app-theme" rel="stylesheet" type="text/css" href="saga-blue.css" media="print" onload="this.media='all'">
<noscript>
<link rel="stylesheet" href="saga-blue.css">
</noscript>
<link rel="stylesheet" href="styles.f0ff7fca47417220.css" media="print" onload="this.media='all'">
<noscript>
<link rel="stylesheet" href="styles.f0ff7fca47417220.css"></noscript>
</head>
<body>
<script>
var theme = localStorage.getItem("theme");
if (theme) {
var link = document.querySelector("#app-theme");
link.setAttribute("href", theme + ".css");
}
</script>
<app-root data-test-id="app"></app-root>
<script src="runtime.7ed78657dc02e81d.js" type="module"></script>
<script src="polyfills.32c81e1336038228.js" type="module"></script>
<script src="main.e90d0345a67eae05.js" type="module"></script>
</body>
</html>
Дмитрий
Дмитрий
ответ в консоли приложения
Дмитрий
Стас
А если так:
session.defaultSession.webRequest.onBeforeSendHeaders({urls:'*'}, (details, callback) => {
console.log(details.url)
})
Стас
Ловятся реквесты или нет?
Дмитрий
Не пробовал, получилось обычным fetch вместо электронового net.fetch
Дмитрий
Буту тестировать сейчас, но всё заработало
Дмитрий
Спасибо за помощь, буду иметь ввиду в след раз что запросы можно перехватить в основном процессе
Стас
Рад что получилось разобраться
Дмитрий
Ловятся реквесты или нет?
Если что для того чтобы все запросы ловить:
session.defaultSession.webRequest.onBeforeSendHeaders(
{ urls: [] },
(details, callback) => {
console.log(details.url);
callback({ requestHeaders: details.requestHeaders });
}
);
А для того чтобы отсечь например только xhr
session.defaultSession.webRequest.onBeforeSendHeaders(
{ types: ["xhr"], urls: [] },
(details, callback) => {
console.log(details.url);
callback({ requestHeaders: details.requestHeaders });
}
);
sᴇʀɢᴇʏ
eden
sᴇʀɢᴇʏ
eden
тебе нужен электрон forge или builder
eden
electron . это запуск
sᴇʀɢᴇʏ
а надо?
я просто до этого не работал, мне для курсача надо, разбираться особо времени нет
No
eden
а надо?
я просто до этого не работал, мне для курсача надо, разбираться особо времени нет
yearn build && yarn run electron-build
не уверен на 100%, но вроде так
sᴇʀɢᴇʏ
⨯ Application entry file "index.js" in the "/Users/zmeev/GoodGoose/Chat/dist/mac-arm64/chat.app/Contents/Resources/app.asar" does not exist. Seems like a wrong configuration. failedTask=build stackTrace=Error: Application entry file "index.js" in the "/Users/zmeev/GoodGoose/Chat/dist/mac-arm64/chat.app/Contents/Resources/app.asar" does not exist. Seems like a wrong configuration.
вот такое выдает, где нужно поменять путь к index.html?
sᴇʀɢᴇʏ
у меня asar не создается при билде
eden
а покажи package.json, там есть поле main
sᴇʀɢᴇʏ
{
"name": "chat",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"electron": "electron .",
"start": "yarn dev",
"electron-build": "electron-builder",
"postinstall": "electron-builder install-app-deps",
"pack": "yarn build && yarn electron",
"dist": "yarn build && yarn electron-build"
},
"build": {
"asar": true
},
"dependencies": {
"@vueuse/core": "^10.7.0",
"axios": "^1.6.2",
"moment": "^2.29.4",
"pinia": "^2.1.7",
"primeicons": "^6.0.1",
"primevue": "^3.43.0",
"vue": "^3.3.8",
"vue-router": "4",
"vuetify": "^3.4.6"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.0",
"autoprefixer": "^10.4.16",
"electron": "^28.1.3",
"electron-builder": "^24.9.1",
"postcss": "^8.4.32",
"tailwindcss": "^3.3.6",
"typescript": "^5.2.2",
"vite": "^5.0.0",
"vue-tsc": "^1.8.22",
"wait-on": "^7.2.0"
}
}
sᴇʀɢᴇʏ
Алексей
а где точка входа?
sᴇʀɢᴇʏ
import { createApp } from "vue";
import { createPinia } from "pinia";
import { createVuetify } from "vuetify";
import { createRouter, createWebHistory } from "vue-router";
import PrimeVue from "primevue/config";
import { ru } from "./localeConfig";
import App from "./App.vue";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import ToastService from "primevue/toastservice";
import "primeicons/primeicons.css";
// Import Electron modules
import { app, BrowserWindow } from "electron";
import * as path from "path";
const vuetify = createVuetify({
components,
directives,
});
const pinia = createPinia();
export const router = createRouter({
history: createWebHistory(),
routes: [], // Add your routes here
});
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
mainWindow.loadFile(path.join(__dirname, "/dist/index.html"));
mainWindow.webContents.openDevTools();
mainWindow.on("closed", () => {
app.quit();
});
};
app.whenReady().then(() => {
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
createApp(App)
.use(PrimeVue, {
ripple: true,
locale: ru,
})
.use(vuetify)
.use(ToastService)
.use(pinia)
.use(router)
.mount("#app");
вот main.ts
eden
но мне кажется package.main должен быть
sᴇʀɢᴇʏ
нет, ток сайт
sᴇʀɢᴇʏ
точнее да, у меня он ничего не отображает
Стас
sᴇʀɢᴇʏ
мб потому что у меня мак
Стас
Нет, с маком все в порядке
Стас
Может использовать chatgpt чтобы это более вменяемо написал?
sᴇʀɢᴇʏ
3 чата создавал))
если бы я понимал, что здесь более вменяемо..
Pumpkin
Я тоже как то спрашивал про конфиги, мне сказали иди доку читай
eden
нет, ток сайт
какой темплейт использовал? Попробуй создать из него новый проект и запустить/сбилдить его. Мжет темплейт кривой
No
3 чата создавал))
если бы я понимал, что здесь более вменяемо..
ты пытаешься делать вещи, вообще не понимая, что происходит. ты так каждый шаг тут будешь в чате спрашивать?
https://github.com/Deluze/electron-vue-template
на, бери. и попытайся включить голову, а не чатгпт
eden
спасибо)
только попробуй запустить это всё и сбилдить без своих изменений, чтобы понимать, это ты сломал что-то или так и было