Примечание. Это пошаговое руководство по размещению приложения Elm на сайте glitch.com, но большинство понятий применимы и к другим платформам.
Я планирую семинар по Elm и проверял какой-то инструмент для создания онлайн-среды для совместной работы, в которой студенты могли бы активно участвовать. Делюсь здесь опытом использования Glitch для этой цели.
Давайте начнем!
Первым предварительным условием является вход в https://glitch.com. Вероятно, вход в систему с использованием учетной записи Github может облегчить ситуацию в будущем.
Следующим шагом будет создание нового проекта. Выберите hello-express
из трех вариантов, поскольку в нем предустановлены node
и npm
.
Вот как выглядит пример приложения по умолчанию:
У него есть веб-сервер (server.js
), написанный на Javascript с использованием Express, но мы не будем его использовать и в конечном итоге удалим большую часть его файлов.
Давайте теперь откроем журналы, нажав внизу Tools -> Logs
.
Отсюда мы видим, что приложение прослушивает порт 3000. Нажмите console
, чтобы перейти к интерактивному терминалу.
Отсюда мы можем установить Elm с помощью команды pnpm install elm — save-dev
. pnpm
— это другая версия npm
, которая кажется предпочтительной для Glitch. Дополнительная буква «р» означает «Performant».
Терминал и веб-страница не синхронизируются автоматически, поэтому нам нужно ввести команду refresh
. После этого страница обновится, показывая небольшой тег reconnecting
.
Теперь мы можем убедиться, что Elm был добавлен в качестве зависимости разработки в package.json
.
Давайте проверим, работает ли это, добавив команду elm reactor — port=3000
в качестве стартового скрипта в package.json
. Эта команда выполняется автоматически при сбое при запуске.
Оно работает! Знакомая веб-страница elm reactor
теперь отображается в правой части экрана.
Пришло время добавить наш код Elm. Давайте создадим файл, щелкнув New File
в левом верхнем углу и набрав src/Main.elm
.
Давайте скопируем и вставим некоторый код Elm, например, The Screaming Counter, доступный по адресу https://ellie-app.com/5SF8LwjxKhRa1, и переместимся туда с помощью elm-реактора. сайт (src > Main.elm
)
Упс! нет файла elm.json
. Вернемся к терминалу и наберем elm init
и попробуем еще раз…
Упс(2)! У нас «плохой импорт». Давайте установим elm-ui
с elm install mdgriffith/elm-ui
. Это необходимо, чтобы заставить работать import Element
материал, который вы видите в коде. Если вы спросите меня, почему библиотека называется elm-ui
, но импортируется с import Element
, что ж, это может быть исправлено в будущем. В любом случае, если вы не знаете, elm-ui
— это потрясающая библиотека, которая заставит вас забыть о CSS
!
Да, The Screaming Counter жив и здоров!
Теперь давайте добавим больше гибкости, например, возможность разделить приложение на несколько файлов и использовать порты (вещи, которые elm reactor
не поддерживает) при установке elm-live
.
Вернемся к терминалу и запустим pnpm install elm-live --save-dev
Прежде чем продолжить, давайте удалим все ненужные файлы:
views/index.html server.js public/style.css (who need CSS anymore?) public/client.js
Давайте также скроем ненужные папки и файлы, такие как elm-stuff
и docs/main.js
(которые мы вскоре создадим), добавив их во вновь созданный файл .gitignore
.
Изменение вступит в силу только после перезагрузки страницы. Идите вперед и перезагрузите, очень безопасно перезагружать страницы в Glitch, так как он всегда сохраняет все при изменениях.
Красиво и чисто!
Теперь добавим index.html
:
И добавьте этот HTML во вновь созданный файл:
<!DOCTYPE html> <html> <head> <title>The Screaming Counter</title> </head> <body> <main></main> <script> var app = Elm.Main.init({ node: document.querySelector('main') }) </script> </body> </html>
Теперь давайте заменим команду запуска в package.json
на
elm-live src/Main.elm —-port=3000 —-dir=docs —- —-output=docs/main.js —-debug
Наш счетчик вернулся! И у него также активирован отладчик
Теперь можно редактировать код Elm и видеть изменения в режиме реального времени.
Начало сотрудничества
Теперь мы можем просто скопировать URL-адрес и отправить другим пользователям. Они увидят тот же проект, который можно клонировать (нажав на Remix to Edit
), или они могут нажать на Join
, чтобы запросить разрешение на совместную работу.
При нажатии на Join
они увидят тег Asked to Join…
и вы увидите тег Can I join?
Нажмите на Invite to Edit
, чтобы разрешить другому пользователю сотрудничать
Сделанный! Теперь все участники могут одновременно редактировать файл
Глюк для бесплатного хост-приложения Elm
Глюк можно использовать в приложении Elm. Будучи бесплатным, он имеет несколько ограничений. Один из них заключается в том, что он переходит в спящий режим после 5 минут бездействия (без HTTP-вызовов). Решение этой проблемы — пинговать его каждые 5 минут, используя, например, такой сервис, как https://uptimerobot.com/, как предлагается в этом посте https://anidiots.guide/other-guides/hosting- сбой
Существуют файлы конфигурации, которые могут улучшить работу, например glitch.json
и watch.json
. Точной документации по ним пока нет, поэтому я ими не пользовался.
Это все. Если у вас есть какие-либо отзывы или предложения, оставьте их в разделе комментариев ниже.