Как создать и развернуть приложение на React: быстрый и простой деплой с App Platform

React — это популярная JavaScript-библиотека, предназначенная для создания пользовательских интерфейсов. Её главная особенность — компонентная архитектура, что позволяет разработчикам легко создавать и управлять сложными веб-приложениями. В этой статье мы рассмотрим, как создать React-приложение и выполнить его деплой на сервер с использованием Timeweb Cloud.

Создание приложения

Для примера мы создадим простой TO-DO-лист, который позволит пользователям добавлять задачи, организовывать их по колонкам и управлять ими.

Подготовка

Перед началом работы убедитесь, что у вас установлен Node.js. Если его нет, скачайте последнюю версию с официального сайта Node.js и установите, следуя инструкциям на экране.

Разработка

С установленным Node.js можно приступать к созданию React-приложения.

Инициализация проекта

1. Консоль: Запустите консоль Windows или другой терминал на вашем устройстве.

2. Выбор пути: Переместитесь в папку, где будет размещен проект. Например, чтобы перейти на рабочий стол, выполните команду:

3. Создание проекта: Введите команду для создания нового React-проекта:

Название to-do-list можно заменить на любое другое по вашему выбору.

4. Редактор: Откройте проект в текстовом редакторе.

Написание кода

Во время разработки убедитесь, что все команды для установки зависимостей и запуска проекта выполняются в корневой директории проекта. Если появляются ошибки, убедитесь, что находитесь в правильной папке. Все необходимые файлы будут размещены в каталоге src.

Для локального запуска приложения введите команду npm start. Эта команда откроет проект в новой вкладке браузера.

Перед началом написания кода установим лишь одну библиотеку — fortawesome, которая предназначена для того, чтобы использовать различные иконки.

Откройте файл App.js и напишите код для основного компонента приложения.

Теперь создайте новый файл Column.js. В нём будет находиться код для создания колонок, в которые мы будем помещать задачи:

Также создайте файл Task.js и внутри него напишите код, чтобы создавать задачи: 

После завершения разработки вы можете снова запустить приложение командой npm start и убедиться, что оно работает корректно. Приложение позволяет добавлять, редактировать и удалять задачи и колонки, а также перемещать задачи между колонками. Данные сохраняются локально, поэтому при перезагрузке страницы ничего не пропадет.

Деплой React-приложения

Теперь, когда приложение готово, его нужно развернуть на сервере. В этом примере мы воспользуемся Timeweb Cloud.

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

Запуск в Timeweb Cloud App Platform

Чтобы развернуть React-приложение, воспользуемся сервисом App Platform от Timeweb Cloud.

1. Войдите в свой аккаунт Timeweb Cloud и создайте новый проект.

2. В разделе «App Platform» выберите тип «Frontend» и фреймворк React.

3. Подключите свой репозиторий с проектом. 
4. Выберите регион для минимизации задержки.

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

6. В информации о приложении укажите его название и комментарий (если требуется).

7. Нажмите «Запустить деплой» для автоматического разворачивания приложения на сервере. После успешного завершения процесса вы получите сообщение Deployment successfully completed.
8. Теперь вы можете открыть приложение в браузере, используя предоставленный домен, и убедиться, что всё работает как нужно.

Заключение

В этой статье мы разобрали, как создать React-приложение и развернуть его на сервере с помощью Timeweb Cloud. Следуя этим шагам, вы сможете быстро освоить процесс деплоя и использовать платформу для размещения своих веб-приложений.