В этом уроке я покажу вам, как создать простой, но потрясающий блог с помощью Vue, Vuex, Cosmic JS и развернуть его в Netlify. Давайте начнем.

TL;DR

Загрузите репозиторий GitHub.
Посмотрите демо.

Предпосылки

Перед запуском вам потребуется установить Node JS и npm. Убедитесь, что они у вас уже установлены.

Начиная:

В этом приложении мы используем Snipcart Vue Blog Demo в качестве отправной точки. Создайте вилку и клонируйте этот репозиторий, мы рассмотрим его позже. Сначала мы настроим ведро в Cosmic JS.

Сегмент настройки:
Чтобы создать сегмент, войдите в Cosmic JS и нажмите добавить новый сегмент.

Выберите начать с нуля.

Импортировать данные сегмента

Загрузите этот файл bucket.json. В разделе Настройки - ›Импорт / экспорт данных нажмите Добавить файл импорта и выберите загруженный файл. Он импортирует все типы объектов и необходимые данные.

Теперь займемся приложением.

Интегрируйте Cosmic JS

Так как ведро полностью настроено. Теперь мы интегрируем бэкэнд Cosmic JS в ответвленный репозиторий https://github.com/snipcart/vue-blog-demo. Прежде всего, замените package.json следующим:

Откройте папку в Терминале и выполните npm install.. После этого нам нужно настроить конфигурацию Cosmic JS для связи с API. Для этого мы создадим файл index.js в папке /src/config/.

После этого замените содержимое index.js и prod.env.js в папке /config/ соответственно.

prod.env.js

На этом настройка Cosmic JS завершена. Нам нужно создать .env файл в корне проекта. Он загрузит все переменные в process.env.

Изменение подключаемого модуля Vue Resource для интеграции Cosmic JS API

Теперь приложение почти готово. Нам просто нужно внести небольшие изменения, чтобы он работал правильно.

Замените src/main.js приведенным ниже кодом. Мы меняем конечную точку API, чтобы вызывать внутреннюю часть Cosmic JS.

Замените src/plugins/resource/index.js приведенным ниже кодом, и я объясню, что мы здесь делаем.

В этой модификации мы в основном импортируем созданную ранее конфигурацию и меняем URI конечной точки для запросов API на Cosmic JS.

BlogFeed

Замените src/resources/BlogFeed.js, чтобы сопоставить данные из Cosmic JS API с фидом блога. Нам просто нужно правильно выполнить сопоставление, поскольку интерфейсный код не зависит от вызовов API.

BlogPost

Точно так же замените src/resources/BlogPost.js., и одиночный пост будет работать идеально.

Завершение

Если в терминале сделать npm run dev, то заработает. Но прежде чем мы начнем развертывание, нам нужно доработать несколько вещей. Заменить заголовок блога, метку автора и метку публикации в static/api/blog.json. Эта строка будет использоваться в приложении.

Поскольку это приложение для блога является статическим, поэтому, если вы хотите развернуть его на хостинге Cosmic JS, вам необходимо создать простой сервер Node.js Express. Создайте server.js в корне приложения и скопируйте приведенный ниже код в этот файл.

Все сделано 😃. Кроме того, я добавил TitleComponent, чтобы изменить document.title. Вы можете проверить код в моем репозитории.

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

Сейчас я покажу, как можно развернуть это приложение на хостинге Cosmic JS и бесплатном хостинге от Netlify. Вам нужно отправить этот код приложения в репозиторий на GitHub.

Развертывание на хостинге Cosmic JS

Перейдите в свою корзину на панели инструментов Cosmic JS и нажмите Настройки- ›Развернуть веб-приложение.

В новом окне введите URL-адрес репозитория и название ветки. После добавления всей необходимой конфигурации нажмите «развернуть веб-приложение». Он будет развернут, и вы получите электронное письмо об успешном развертывании. Вам не нужно вводить здесь какие-либо переменные среды, так как в хостинге Cosmic JS все уже сделано за нас.

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

Зарегистрируйтесь на Netlify и нажмите «Новый сайт из Git». Пожалуйста, выберите там поставщика Git. В моем случае я буду использовать Github.

После успешной аутентификации появятся все ваши репозитории. Выберите правильный репозиторий.

Теперь вам нужно выбрать свою ветку и предоставить некоторые конфигурации, чтобы она работала правильно. После успешного выбора ветки в команде build введите 'npm run build', а в каталоге publish введите 'dist'. Наконец, нажмите кнопку 'Show advance'.

После нажатия кнопки продвижения вам нужно добавить 3 environment variables. Здесь нам придется делать это вручную. Cosmic JS hosting делает это за нас автоматически.

Добавьте туда COSMIC_BUCKET, COSMIC_READ_KEY & COSMIC_WRITE_KEY. Вы можете получить эти значения в разделе Настройки- ›Основные настройки. Просто вставьте туда значения и нажмите Deploy Site. Он будет развернут через несколько минут!

Заключение

Это простое приложение для блога, созданное с использованием vue, vuex и Cosmic JS. В конце мы также узнали, как развернуть это приложение на Netlify, а также на хостинге Cosmic JS. Надеюсь, вам понравился урок, и он будет вам полезен. Ваше здоровье!