chieftan frontend

Гарфтан -фронт

Веб -приложение Aurelia, которое потребляет API Chieftan для автоматизации задач

Начиная

Чтобы настроить среду разработки, вам понадобится node.js, установленная на вашей локальной машине. Вы можете скачать его отсюда.

После того, как это будет сделано, клонируйте репозиторий Chieftan и запустите npm install для установки различных зависимостей, требуемых Chieftan.

Разработка

Среда разработки построена вокруг WebPack с помощью Hot Module Reloading, позволяя (почти) обновления в реальном времени как таблиц стилей, так и кода (если она еще не запускалась) без перезагрузки страницы. Вы можете запустить сервер разработки, запустив npm run server:dev из папки Project, а затем доступ к http://localhost:3002 в вашем браузере.

Развертывание

Развертывание включает в себя создание производственного пакета приложения, а затем размещение содержимого папки dist на вашем сервере. Чтобы построить производственный пакет, просто запустите npm build и дождите завершения WebPack.

Если вы хотите включить отчет о ошибках Sentry для ошибок фронта, вам следует установить переменную среды SENTRY_DSN для публичного Sentry DSN. Вы также можете отметить версию релиза, установив переменную среды VERSION .

Пример сценария сборки

SENTRY_DSN= " https://[email protected]/1 " VERSION= " $( git rev-parse HEAD ) " npm run build

Этот сценарий сборки пометит выпуск, используя текущую Git SHA и настраивает отчет о ошибках Sentry.

Хорошие URL

Стоит отметить, что, если вы хотите использовать API HTML5 Push State API для хороших URL -адресов, вам нужно будет настроить свой веб -сервер для обслуживания файла index.html для всех 404.

С Nginx это можно легко выполнить с помощью директивы try_files .

Пример конфигурации Nginx

 server {
  listen :80 default;
  hostname chieftan.emss.co.za;

  root /var/www/chieftan/dist;

  # Serve the frontend
  location / {
    try_files $url $url.html index.html;
  }

  # Pass API requests to the application instance (basic)
  location /api {
    proxy_pass http://127.0.0.1:8000;
  }
}

Docker Images

Вы также можете развернуть фронт Chieftan с помощью Docker, чтобы построить изображение, просто запустите npm build && docker build . Чтобы создать изображение контейнера с последним скомпилированным пакетом приложений.

Этот контейнер основан на nginx:alpine , что делает его очень легким, и по умолчанию будет прослушать порт 3000. Вы можете следовать инструкциям на странице изображения Nginx Docker, чтобы настроить его по -разному, или поместить его за обратным прокси в развертываниях производства.