Strapi Starter React Blog

Strapi — это система управления контентом (CMS) с открытым исходным кодом, которая позволяет создавать настраиваемые API для любого внешнего приложения. Strapi очень проста в использовании, поскольку позволяет создавать универсальные API с уникальными функциями, которые вы оцените по достоинству. Strapi позволяет многое настраивать.

Почему мы создали эти стартеры?

Стартеры позволяют быстро визуализировать результат объединения Strapi и вашего фронтенд-фреймворка. Проще и быстрее покопаться в существующем приложении, чтобы получить представление о продукте, чем начинать приложение с нуля. Поскольку мы сделали учебники о том, как сделать блог с помощью того или иного фреймворка, сообществу Strapi показалось полезным использовать получившееся приложение для создания стартеров.

Цель

Понять, как создать базовый блог с помощью Strapi, используя React и другие прикладные программы.

Предварительные условия

Чтобы приступить к работе, вам потребуется базовое понимание следующего.

  • Базовые знания JavaScript для Node.js,
  • Базовое понимание Strapi — начните здесь,
  • Загруженная и установленная последняя версия Node.js v14,
  • Базовое понимание Heroku, и (heroku с strapi),
  • Базовое понимание Cloudinary, и
  • Базовое понимание Netlify.

Существуют предыдущие учебники о том, как сделать блог с помощью того или иного фреймворка. Сообществу Strapi показалось полезным использовать полученное приложение для создания стартеров.

Чтобы начать работу со стартером, у вас есть два варианта:

  • Вы можете начать с установки стартера, а затем, следуя руководству, воспроизвести его и учиться по пути.
  • Или вы можете запустить стартер, чтобы напрямую протестировать приложение.

Давайте посмотрим, как его запустить!

Развертывание бэкенда

Для развертывания экземпляра Strapi вам понадобятся:

  • аккаунт на Heroku
  • Учетная запись Cloudinary для сохранения изображений

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

Затем .

Здесь находится репозиторий бэкенда этого стартапа.

После развертывания на Heroku вы должны увидеть результат, показанный ниже.

Развертывание фронтенда

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

Выберите имя репозитория и заполните `API_URL своим экземпляром Strapi на Heroku без косой черты.

Особенности

  • 2 типа контента: Статья, Категория
  • 2 Созданные статьи
  • 3 Созданные категории
  • Разрешения установлены на true для статьи и категории
  • Отзывчивый дизайн с использованием UIkit

Страницы

  • «/» отображает все статьи.
  • «/article/:id» отображение одной статьи.
  • «/category/:id» отображают статьи в зависимости от категории.

Начало работы

Бэкэнд
Смотрите полные инструкции в нашем блоге Strapi starter. Теперь давайте клонируем наш репозиторий на GitHub и запустим наш сервер.

`bash
git clone https://github.com/strapi/strapi-starter-react-blog.git
cd strapi-starter-react-blog
`

Запустите сервер фронтенда
`bash
# Использование yarn
yarn install
yarn develop

# Using npm
npm install
npm run develop
Вход в полноэкранный режим Выйти из полноэкранного режима

`

React server is running here => http://localhost:3000

Если вас заинтересовала идея создания React приложений с помощью Strapi, то вот причины, по которым очень хорошо сделать ставку на этот дуэт: Strapi + React.

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

Оцените статью
Procodings.ru
Добавить комментарий