В этом уроке мы собираемся использовать Widgg для развертывания виджета Hello World React в Интернете. В конце этого урока у нас будет две строки для копирования и вставки на любой сайт, чтобы там отображался виджет.

Widgg — это проект, направленный на облегчение жизни разработчиков при развертывании виджетов в Интернете. Инструмент CLI создает файлы javascript и css и загружает их в CDN, чтобы они были доступны отовсюду и быстро.

Во-первых, нам нужно будет создать организацию в Widgg. Затем загрузите и установите инструмент CLI. Затем создайте виджет hello world, а затем разверните его.

Несколько слов об организациях и аккаунтах в Widgg

В Widgg есть два типа сущностей: организация (Org) и учетная запись. Организация разрабатывает виджеты, а Пользователь размещает виджет на своем сайте. Организация может иметь несколько учетных записей и иметь одну учетную запись по умолчанию при создании, которая является своего рода демонстрационной учетной записью. Он имеет то же имя и домен, что и Org. Когда мы создаем и организовываем, автоматически создается учетная запись по умолчанию.

Создание организации в Widgg

Перейдите в Widgg, введите свой адрес электронной почты в поле Получить ранний доступ и нажмите кнопку:

Зайдите в свою электронную почту и проверьте, не отправил ли вам электронное письмо Widgg.

Нажмите на ссылку для регистрации в полученном электронном письме:

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

Вы автоматически войдете в панель инструментов Widgg:

Как видите, мы создали Аккаунт по умолчанию.

Работа с интерфейсом командной строки

На панели инструментов нажмите «CLI» слева и загрузите CLI.

В настоящее время Widgg поддерживает только Mac, но следите за поддержкой Windows на этом канале Discord.

Следуйте инструкциям на панели инструментов Widgg: установите Python3, Yarn и используйте диспетчер пакетов Python3 pip3 для установки файла «whl», который вы скачали с панели инструментов (замените 0.3.4 на версию, которую вы скачали):

brew install python3
brew install yarn
pip3 install widgg-0.3.4-py3-none-any.whl

После этих шагов инструмент Widgg CLI будет доступен из командной строки в любом месте. Чтобы начать использовать инструмент, войдите в систему, указав адрес электронной почты и пароль, который вы выбрали:

widgg login

Теперь вы готовы создать и развернуть свой виджет Hello World React. Перейдите в локальный каталог разработки, создайте виджет, перейдите во вновь созданный каталог и разверните виджет в Интернете:

widgg create --name hello-world-react --tech react
cd hello-world-react
widgg deploy

Это создало шаблон Hello World в React в каталоге hello-world-react. Вы можете изменить его по своему усмотрению. Чтобы увидеть результаты, снова запустите widgg deploy. Теперь вы спросите, где я могу увидеть результаты? Ну, на каждой живой странице, если это локальный файл index.html на вашем компьютере или jsfiddle. Вам просто нужно запустить:

widgg dist

Скопируйте две строки html на свою html-страницу, и у вас есть виджет. Нет необходимости изменять их после развертывания, просто обновите страницу.

Если вы когда-нибудь застрянете, запуск widgg -h даст вам подробную помощь. Вы также можете обратиться к нам на этом канале Discord и задать любой вопрос или оставить отзыв.

Удачного кодирования!