Похоже, нет нормальных. Я видел максимум с webpack (и typescript). Потом просто по статье из интернета добавил реакт, правда hot reload работает плохо
Есть вариант как нибудь экстрактнуть свой боилерплейт?
Alexey
Denis
Я не знаю
Denis
Только погружаюсь в electron и electron-forge
Алексей
подскажите. при запуске тестов получаю такую ошибку
Error: Can't resolve 'fs' in 'D:\Projects2\starter-3\node_modules\electron'
не понимаю откуда она взялась.
Miroslav
подскажите. при запуске тестов получаю такую ошибку
Error: Can't resolve 'fs' in 'D:\Projects2\starter-3\node_modules\electron'
не понимаю откуда она взялась.
Ну fs есть такой модуль в ноде)
Наверное, его там как-то не так импортят
Alexey
Привет всем. Есть щас в опен сорсе какой нибудь бест практис кейс использования react + electron? Имею ввиду в плане сборки и разработки, а не архитектуры.
Ещё раз продублирую
Есть щас в опен сорсе какой нибудь бест практис кейс использования react + electron? Имею ввиду что у вас yarn dev вызывает
Vadim
Vadim
Ибо может оно в хроме гоняется?
Denis
А, так давай я тебе статью скину, по которой настраивал
Denis
https://dev.to/raphaelbadia/how-to-create-an-electron-forge-project-with-react-typescript-and-hmr-1gi3
Roman
Ребят, а можно запустить в отдельном потоке еще один процесс, без юзания там отдельного браузера. Как бы отдельный чистый процесс.
Vadim
Vadim
https://nodejs.org/api/child_process.html
Oleh
Ещё раз продублирую
Есть щас в опен сорсе какой нибудь бест практис кейс использования react + electron? Имею ввиду что у вас yarn dev вызывает
https://github.com/ubergrape/grape-electron/blob/master/package.json#L17
Alexey
https://dev.to/raphaelbadia/how-to-create-an-electron-forge-project-with-react-typescript-and-hmr-1gi3
мне вот чего не нравится, react-hot-loader уже deprecated, там щас Fast Refresh более актуален
Denis
Мне тоже не нравится
Alexey
https://github.com/ubergrape/grape-electron/blob/master/package.json#L17
Спасибо. А hot reload отрабатывает или elcetron-reload там обновляет “страницу” при изменениях?
Oleh
Не, там полностью перезапускается приложение
Oleh
А не сама страница перезапускается
Alexey
а сборщик не добавлял какой нибудь типо webpack или parcel по тому что и так нормально или просто руки не дошли пока?
Oleh
Лень, ага
Alexey
понял, спасибо) в любом случае полезно будет оперется)
Oleh
Да там надо parcel добавить
Alexey
а то я большую часть жизни вебу посвятил и не знаю как нормально готовить с электроном)
Oleh
И может быть накрутить typescript
Oleh
А так, вроде бы все есть там
Electron.js releases
v12.0.0-nightly.20200907
https://github.com/electron/electron/releases/tag/v12.0.0-nightly.20200907
v12.0.0-nightly.20200907
Electron.js releases
v11.0.0-beta.5
https://github.com/electron/electron/releases/tag/v11.0.0-beta.5
v11.0.0-beta.5
Muhammad
Oleh
Что это?
Muhammad
Muhammad
main в package.json какой?
При этом если запускать через ng build --base-href ./ && electron . то проблем нет.
На другом почти таком же приложении с forge проблем нет.
Muhammad
Проблема решилась после переустановки electron
Muhammad
Muhammad
Muhammad
BARSOOQUE
BARSOOQUE
Alexey
https://github.com/ubergrape/grape-electron/blob/master/package.json#L17
а вы jss по объективным причинам каким то взяли?
Alexey
вижу что ты контрибьтишь в него.
увидел что есть styled-jss, щас прикрутил - выглядит достаточно интересно.
если при этом будет работать экстракс css, то это прям повод слезть с иглы styled-components, не потеряв при этом его удобный компонентый подход к верстке.
Сергей
Похоже, нет нормальных. Я видел максимум с webpack (и typescript). Потом просто по статье из интернета добавил реакт, правда hot reload работает плохо
А этот бойлерплейт с Реактом не подходит?
https://electron-react-boilerplate.js.org/
Завтра
2020й год, какое jss...
Завтра
народ уже давно топит за экстракцию стилей в статику, а они продолжают с объектным синтаксисом и рантаймом велосипедить
Denis
А этот бойлерплейт с Реактом не подходит?
https://electron-react-boilerplate.js.org/
Для Алексея наверное в самый раз, мне тут не хватает тайпскрипта
Denis
народ уже давно топит за экстракцию стилей в статику, а они продолжают с объектным синтаксисом и рантаймом велосипедить
Я думаю, на мелко-средних проектах без разницы, хоть jss, хоть sass, хоть ещё что-нибудь
Завтра
чем мелкие проекты хуже остальных
Завтра
Oleh
а вы jss по объективным причинам каким то взяли?
Создатель работал в компании до 2018, и я контрибьючу иногда :)
У нас на всех проектах он, не хотел ничего менять
Alexey
А этот бойлерплейт с Реактом не подходит?
https://electron-react-boilerplate.js.org/
перегруженный он, там каша просто
Alexey
народ уже давно топит за экстракцию стилей в статику, а они продолжают с объектным синтаксисом и рантаймом велосипедить
насколько я понял по описанию там существует возможность экстрактить стили
Alexey
но вопрос что щас лучше есть?
Oleh
Я может тоже че-то не знаю, но экстракция имеется ввиду что будут использованы только те стили которые необходим. То есть только для тех компонентов которые отрендерились
Oleh
А наверное вы имеется ввиду вот это - https://github.com/cssinjs/jss/issues/579
Я просто занимаюсь префиксами в основном и все
Oleh
По этому могу быть не в курсе всего
Alexey
вообще у всех этих удобных штук типо styled-components, emotion, ну и jss есть проблема, что они стили свои вкидывают в html в элемент style.
в случае с экстрактированием был бы отдельный css файлик + чанки от код-сплита, которые бы кэшировались браузером и было бы все красиво.
Alexey
Бенчмарки щас посмотрел, хоть они и певерхносты и не учитывают многие вещей, например ssr, но тесты показывают что emotion щас быстрее работает чем styled-components, а react-jss ещё чуть медленнее
Alexey
css-modules естественно самый быстрый
Alexey
http://necolas.github.io/react-native-web/benchmarks/
Alexey
Там где Library нужно тыкать выбирать и запускать
Alexey
Из этой статьи
https://www.infoq.com/news/2020/01/css-cssinjs-performance-cost/
Alexey
Вот эта прям хороша
https://calendar.perfplanet.com/2019/the-unseen-performance-costs-of-css-in-js-in-react-apps/
Alexey
Тут он форсит linaria. Слышал о ней, но руки не доходили попробовать. Кажется подходящее время
Выглядит очень хорошо
И например:
> Use dynamic prop based styles with the React bindings, uses CSS variables behind the scenes
https://github.com/callstack/linaria
Все плюшки - https://github.com/callstack/linaria/blob/master/docs/BENEFITS.md
Завтра
Тут он форсит linaria. Слышал о ней, но руки не доходили попробовать. Кажется подходящее время
Выглядит очень хорошо
И например:
> Use dynamic prop based styles with the React bindings, uses CSS variables behind the scenes
https://github.com/callstack/linaria
Все плюшки - https://github.com/callstack/linaria/blob/master/docs/BENEFITS.md
Есть, правда, одна проблема - с парселем оно через жопу работает, если вдруг кто его юзает
Завтра
хз как с вебпаком, но у линарии под капотом свой парсер, работающий странным образом - импорт файла, в котором был заюзан styled, в некоторых случаях ломает все вообще
Завтра
курение ошибок показало, что линария каким-то образом добралась до node_modules/electron и пыталась там что-то заэкстрактить, хотя тот кусок кода из электрона вообще не для клиента
Alexey
Проверю как сейчас обстоят дела
Electron.js releases
v12.0.0-nightly.20200909
https://github.com/electron/electron/releases/tag/v12.0.0-nightly.20200909
v12.0.0-nightly.20200909
Anonymous
Привет.
Подскажите, плиз, может кто сталкивался.
Есть приложение на реакте + oidc-client для авторизации с сервером.
При запуске приложения открывается удаленная страница для ввода логина/пароля, после происходит редирект обратно в реакт на localhost. В develop режиме все работает без проблем, поскольку электрон крутит реакт на сервере и там есть localhost, а после билда для прода все файлы реакта отдаются статически, по file:// протоколу, и редирект на localhost после логина блочится со статусом «(failed)net::ERR_CONNECTION_REFUSED»
При этом в webPreferences уже стоит:
webSecurity: false,
allowRunningInsecureContent: true,
Anonymous
Vadim
Vadim
Как вариант, повесить слушатель на запросы и перехватывать токен
Anonymous
Как "правильно" решить эту задачу? ))
Поднимать сервер http?
Vadim
Как вариант, повесить слушатель на запросы и перехватывать токен
Я бы делал вот так, сейчас кину ссылку на апи которое имею ввиду