Пример погодного приложения на Svelte с использованием OpenWeather API

:ru: by Mikhail Shpakov

Пример простого SPA и PWA погодного приложения на Svelte с использованием OpenWeather API.

:tada: Демо

:tv: Дизайн (figma)

:hammer: Используемые технологии и инструменты

:wrench: Локальный запуск проекта

:rocket: Деплой на Zeit (Now)

Используемые технологии и инструменты

• Svelte
• Stylus + Less
• Rollup
• Eslint + Prettier
• Babel + Postcss (autoprefixer) + es6-shim
• Zeit (Now)
• Иконки weather-icons
• Графика DrawKit

Локальный запуск проекта

1. Загрузка проекта на локальную машину

   git clone https://github.com/mikhail-shpakov/weather-app-on-svelte.git
   

2. Установка зависимостей

   npm ci
   

   Использование npm ci вместо npm i позволит гарантировать корректные версии устанавливаемых npm пакетов, так как они будут взяты из package-lock.json.

3. Запуск сервера для разработки

   В качестве сервера для разработки используется Rollup с плагином rollup-plugin-livereload.

   Для его запуска выполните из корневой директории проекта:

   npm run dev
   

   После этого приложение будет доступно по адресу localhost:5000.

   Для корректной работы сервера, перед его запуском требуется добавить переменную окружению OPEN_WEATHER_API_KEY, значением которого будет токен API c OpenWeatherMap.

   Инструкцию по получению токена OpenWeatherMap можно найти на их сайте.

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

   Также доступны следующие команды:

   npm run build // сборка приложения Svelte для развёртывания на production
   npm run format // запуск prettier с автоматическим исправлением файлов
   

Деплой на Zeit (Now)

Для публикации приложения на Zeit (Now) требуется:

1. Установить cli клиент now:

   npm install -g now
   

2. Затем, из папки public выполнить команду для деплоя:

   cd public
   now deploy --name my-project
   

3. Для корректной работы приложения требуется добавить переменную окружения OPEN_WEATHER_API_KEY, значением которого будет токен API c OpenWeatherMap.

   Подробнее о процессе добавления переменных окружения можно прочитать в официальном руководстве.