Примечание. Это пошаговое руководство по размещению приложения 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. Точной документации по ним пока нет, поэтому я ими не пользовался.

Это все. Если у вас есть какие-либо отзывы или предложения, оставьте их в разделе комментариев ниже.