Разработка на удаленном сервере для платформ React, Angular, Vue

В данном посте рассмотрим процесс удаленной разработки для современных фреймворков React, Angular, Vue. Статья предполагает, что проекты у вас установлены на удаленном VDS/VPS с ОС Ubuntu.

Настройка проекта React для удаленной разработки

Настройка проекта Angular для удаленной разработки

Настройка проекта Vue для удаленной разработки

Стек разработки MongoDB, Express, React, Node (MERN). Финиш

Стек разработки MongoDB, Express, React, Node (MERN). Связь между фронтендом и бекендом

Стек разработки MongoDB, Express, React, Node (MERN). Настройка бекенда

Стек разработки MongoDB, Express, React, Node (MERN). Настройка проекта

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

Стек MERN содержит следующие технологии:

  • Node.js: Node.js является средой выполнения кода на языке JavaScript, основанный на движке Chrome V8. Node.js принес JavaScript в бекенд в виде серверного языка;
  • MongoDB: Документоориентированная база данных с открытым исходным кодом;
  • Express: Быстрый, стабильный и минималистичный web-фреймворк для Node.js;
  • React: JavaScript — фронтенд библиотека для построения пользовательских интерфейсов.
Стек MERN очень похож на популярный стек MEAN и MEVN. Единственное отличие состоит в том, что в средстве MEAN используется Angular, а в MEVN — Vue для создания интерфейсного веб-приложения, а в стеке MERN используется React.

Приложение, которое мы будем создавать в этой серии руководств, представляет собой простое приложение To-Do. Используя этот пример, можно продемонстрировать, как создать приложение CRUD (Create, Read, Update и Delete) с нуля, используя стек MERN!

В этой первой части этой серии мы собираемся завершить настройку проекта React для создания фронтальной части примера приложения стека MERN. В следующей части мы продолжим реализацию бекенда в виде сервера на Node.js/Express.

Настройка приложения React

Для этого урока предполагается, что Node.js установлен в вашей системе. Если это не так, сначала перейдите на https://nodejs.org/ и следуйте инструкциям по установке для вашей платформы.

Вы можете проверить, установлен ли Node.js в вашей системе, набрав:

$ node -v

в командной строке. Это распечатает версию Node.js, которая установлена ​​в вашей системе.

На следующем шаге мы создадим первоначальный проект React с помощью скрипта create-react-app. В create-react-app замечательно то, что этот сценарий можно выполнить с помощью команды npx без необходимости сначала устанавливать его в своей системе. Просто выполните следующую команду:

$ npx create-react-app mern-todo-app

Выполнение этой команды создает новый каталог проекта mern-todo-app. Внутри этой папки вы найдете шаблон проекта React по умолчанию со всеми установленными зависимостями. Перейдите во вновь созданную папку:

$ cd mern-todo-app

и запустите веб-сервер разработки, выполнив следующую команду:

$ npm start

Теперь вы должны увидеть следующий результат в браузере: