Как писать десктопные приложения на React JS | React + Electron

Всем привет, сегодня покажу как разрабатывать десктопные приложения на react-e, как организовать файлы, настроить запуск для режима разработки и продакшина и собрать приложение, а также поговарим о настройке роутинга в react-e при разработке десктопных приложений, так как там есть небольшые отличия от веб-приложений.
Git:
git-scm.com/do...
"Как писать десктопные приложения на JavaScript":
• Как писать десктопные ...
"Как работать с файлами в Electron":
• Работа с файлами в Ele...
#react #desktop #electron #javascript #программирование #уроки #дляначинающих #web #reactjs #electronjs #ateros

[@AleksandrNeo]

Крутой контент, не думал что все так доступно, спасибо!

[@AterosDev]

Спасибо большое 🙏🙏 Очень приятно получать такие комментарии

[@fewart]

Полезное видео. Хорошая картинка и звук, удачи каналу, автору спасибо!

[@AterosDev]

Спасибо большое, мне очень приятно 🙏🙏🙏

[@fewart]

@@AterosDev Собрал проект, но картинки не подключились в режиме Production. Ниже в комментариях видел похожий вопрос, где вы посоветовали использовать переменные окружения через файл process.env. Создал такой файл в папке react-app в корне, вот его содержимое: FOLDER_PATH=build/static/media. Далее в модуле Header.jsx пробую подключить картинку логотипа: В результате картинка не отображается при запуске React-приложения, из панели разработчика в браузере тэг выглядит следующим образом: Направьте пожалуйста на путь истинный

[@AterosDev]

Здравствуйте. Извините, не видел ваш комментариий. Попробуйте изменить FOLDER_PATH на REACT_APP_FOLDER_PATH, и перезагрузить приложение. Плюс, надо будет указать путь в ос начиная с диска - по типу D:/some-folder и т. д.

[@fewart]

@@AterosDev а возможно путь указывать универсальный для разных ос? В этом же и есть прелесть разработки с использованием electron, что на выходе мультиплатформенное приложение

[@AterosDev]

Попробуйте подставлять как вы делали, без диска. А потом напишите скрипт, который парсит index.html (тот, что в electron-app/src, после сборки), и меняет href='/...' на href='...' то есть вначале слэш удаляет и перезаписывает навые данные в файл index.html (пакет fs, для работы с файлами). И вызывайте этот скрипт через node перед сборкой - node script.js; npm run make.

[@hyps9448]

Спасибо большое, быстро и понятно

[@AterosDev]

Спасибо)

[@slibnork8462]

Шикарно! то что нужно! Спасибо большое 🤜🤛

[@AterosDev]

Спасибо 🙏 Рад, что вам понравилось)

[@Капитангрез]

Некстрон очень интересно посмотреть!

[@drakonn90]

всё по делу, лайк

[@AterosDev]

Спасибо)

[@Nightin99]

Не думаю что ты ответишь спустя такое время. Твой ролик пушка, занимаюсь фронтом давно но не знал что могу толком не добавляя новых знаний делать еще и десктопные приложения на js, это просто пушечно. Подскажи пожалуйста, если все же ответишь, вот есть puppeter на js, меня интересует, как я могу запускать puppeter через интерфейс электрона?

[@AterosDev]

Спасибо, мне очень приятно 🙏 Рад, что вам понравился мой урок. Загуглите "межпроцессное взаимодействие в electron", надеюсь поможет.

[@nikolyovin]

просто пушка! спасибо большое!

[@AterosDev]

Рад, что вам понравилось) 🙏🙏

[@evilneo2340]

видос просто имба

[@AterosDev]

Спасибо)

[@evilneo2340]

@@AterosDev можешь пожалуйста подсказать как собрать приложение для установки и запуска на линукс?

[@AterosDev]

Вот этот гайд может помочь - www.electronjs.org/ru/docs/latest/development/build-instructions-linux

[@mdbm]

Отличный урок! Какие возможности доступны по взаимодействию с операционной системой ?

[@AterosDev]

Спасибо)🙏 Все те же, что и в Node.js

[@gregdmitriev2784]

ещё TS и Redux можно накинуть - так. для тренировки )

[@AterosDev]

Возьму на заметку, что вам это интересно 😉

[@gregdmitriev2784]

@@AterosDev да, просто сейчас это топчик для фронта. 9 мес. назад курс по react/redux проходил, потом по TS начал и не закончил. Сейчас на интернатуре все эти "пробелы" вылазят боком ) считай для меня сейчас это первая реальная практика. И ни в какое сравнение с курсами не идёт)) долго избегал практики redux & ts, так она сама меня нашла ! Так что, хош не хош - а "джентльменский набор" фронта 2023 - это классический HTML,CSS(+preoroc), JS, Reac, Redux (и не всегда Readyx-toolkit, хоть он и легче) & Typescript + Docker, + понимание файловой структуры. Сегодня для новичков маловато уметь самому лепить калькулятор или модалку. Вот хорошая практика: Axios, Auth0, реализация окна регистрации и авторизации с отправкой/получением данных с сервера, приватный и публичный роутинг, доступ к страницам только авторизованным юзерам, валидации пароля/email с помощью регулярок, реализация админ-ролей в приложении (админ может всё), квиз для пользователей, тесты, реализация деплоя на AWS. И это всё на Redux/TS.

[@AterosDev]

Полностью согласен! Очень хороший roadmap по скилам получился 🔥🔥👍 Если кто-то будет читать этот комментарий и на дворе ещё 2023, а вы хотите стать react разработчиком - берите и подряд учите (и тренеруйте хотя-бы на пет-проектах) все, что написал Greg Dmitriev.

[@АртемРошков-т3в]

Привет! Очень классно обьяснил. А как использовать Nodejs команды из реакт компонентов?

[@AterosDev]

Привет. Спасибо 🙏🙏 рад, что вам понравилось) Для старта подойдет мой урок - "Работа с файлами в Electron JS".

[@thezorged]

ето тема тоже продолжай пжпжпжпж

[@AterosDev]

Спасибо) 🙏🙏

[@ВикторКржеминский]

Супер! Огромное спасибо за урок!!! Но у меня есть вопрос: в папке static у меня есть папка media, в которой маркеры и прочие картинки, КАК ЕЁ ПОДКЛЮЧИТЬ???

[@AterosDev]

Панодобятся переменные окружения. Добавьте файл .env в корневой каталог React-приложения. В файле определите переменную окружения, например: FOLDER_PATH=путь к папке в ОС //без кавычек А в самом проекте уже подставляйте, например вот так: Здесь мануал по переменным окружения в реакте - create-react-app.dev/docs/adding-custom-environment-variables/

[@ВикторКржеминский]

@@AterosDev Огромное спасибо за ответ! Но у меня ничего не получилось: ситуация следующая, в проекте react-app я монтирую -- import tab from "../assets/tablechim.png" и далее . После сборки проекта в DevTools вижу картинку по такому адресу - localhost:3000/static/media/tablechim.c5ffbe244d4175740e17.png, тот же самый путь и такое же (изменённое) имя файл получает и после npm run build. Когда я создаю переменные окружения и указываю путь FOLDER_PATH=src/assets/ после сборки проекта картинка не отображается. Вот полный путь к папке, начиная с проекта -- electron-react eact-app\src\assets. Сломал голову, что я делаю неправильно? Helpppp!!!! Может путь к файлу localhost:3000/static/media/tablechim.c5ffbe244d4175740e17.png можно както прописать в index.js или index.html компонента electron-app ?????

[@AterosDev]

Попробуйте в FOLDER_PATH, прописать путь начиная с диска. Например - D:/путь к папке проекта/src/assets

[@ВикторКржеминский]

@@AterosDev Спасибо, всё получилось!!! И ещё один вопрос, если можно: есть ли возможность из под Windows разработать приложение например под Linux?

[@AterosDev]

Рад, что все получилось 🙏👍 Самый простой вариант - установить линукс на виртуальную машину, писать проект на виндовсе, а в виртуалке просто собирать.

[@VitaliyKostin]

Как сделать аналогично npm run make, только что бы на выходе получить .dmg для мак?

[@AterosDev]

Привет. Вот здесь инструкция - www.electronforge.io/config/makers/dmg

[@VitaliyKostin]

@@AterosDev Спасибо за ответ! Уже разобрался с этим. Только есть нюанс, для мак сборку нужно тоже выполнять на маке

[@AterosDev]

Да, конечно. И с линукс и виндовс так же, всегда надо на целевой платформе собирать. Не за что, обращайтесь если что.

[@ГошаЕрмаков-й8р]

У меня никак не получается, уже по всякому пытался получается просто белый экран у desktop, кто может помочь и как с вами связаться заранее спасибо

[@ГошаЕрмаков-й8р]

@Ateros нужна очень помощь

[@AterosDev]

Здравствуйте. Извините, что так поздно отвечаю, вы наверное уже нашли решение. Если нет - можете попробовать задать вопрос на stackverflow, возможно кто-то уже сталкивался с таким. К сожалению пока-что единственный способ связи со мной - этот канал. Многие уже просили телеграм либо что-то такое, но я пока к этому еще не готов, может в будущем что-то придумаю...

[@bravo_1321]

Можна добавить `"homepage": "./",` react-app/src/package.json, чтобы не добавлять точку в index.html каждый раз после билда

[@AterosDev]

Homepage отработает на сервере, где index.html находится в корневом каталоге. Но у нас index.html будет запускаться внутри ос, через протокол file (мы не знаем где точно). Чтобы сделать, так как вы хотите, надо дописать pre-build скрипт в котором переопределять public url, на основе переменной среды где указан точный путь к папке в ос.

[@elmirweb6583]

Мне кажется, что nextron js в данном случае лучше.

[@AterosDev]

Да, надо будет и по nextron тоже потом урок сделать

[@axel-sheen]

только ты кажется забыл объяснить чем именно не подходит browser router, ведь с ним всё работает точно так же

[@AterosDev]

Здравствуйте. Это связано с тем, что в продакшене мы будем открывать файл, а не адрес сайта (2:59)

[@thezorged]

Записвай видео как создат приложение для телефона через js пжпжпж

[@AterosDev]

Скоро выйдет урок по созданию небольшого pwa-приложения для телефонов 😉

[@thezorged]

@@AterosDev 😍😍

[@ВикторКржеминский]

Ещё раз пересмотрел Ваш урок, спасибище!!! Но у меня возникла проблема, она заключается в том, что в папке public (по сути это корневой каталог) у меня есть шаблоны, которые подгружаются функцией: вот строка ---- process.env.PUBLIC_URL + `/${props.template}`, // assuming template --- когда я убираю слэш перед ${props.template}, у меня ничего не запускается, а со слешем, не работает... Help me please...

[@AterosDev]

Спасибо) Рад, что вам понравился урок 🙏 Попробуйте перед слэш добавить значение перемонной среды в которой храниться путь к папке public в ос.

[@ВикторКржеминский]

@@AterosDev У меня сработало, когда я убрал process.env.PUBLIC_URL и оставил только путь `${props.template}`, спасибо за быстрый ответ, с Вами всегда очень приятно общаться!!!

[@AterosDev]

И вам спасибо, что написали - ваш ответ поможет другим 🙏

[@ВикторКржеминский]

@@AterosDev А вот ещё вопрос, как установить свою иконку в приложение. Документация пишет, что "needs to be placed in the buildResources directory (defaults to build). It is important to provide icon.ico (or icon.png), as otherwise the default Electron icon will be used." А вот в нашем случае папки build нет? Просто создать её с картинкой?

[@AterosDev]

Можете посмотреть урывок видео где я показывал, как сделать калькулятор на электроне, там есть про это (перемотайте на 3:19) - kzbin.info/www/bejne/aGSTgWxvg52Xgrssi=MpaN8C91v33iUAUE

[@bambalbino]

Спасибо!

[@romanchernyshov2632]

Спасибо!

[@DerekGaming]

Все хорошо, но можно ли запускать реакт и електрон одной командой, ибо неудобно, так еще реакт браузерное окно открывает

[@AterosDev]

Можете попробовать boilerplate - github.com/electron-react-boilerplate/electron-react-boilerplate

[@DerekGaming]

@@AterosDev спасибо большое)