Как связать nestjs вместе с reactjs?

Установил файлы nestjs, сделал подключение к базе данных. Установил reactjs, у меня следующая файловая система:

server
----src
--------app.controller.ts
--------app.module.ts
--------app.service.ts
--------main.ts
client
----note_modules
----public
----src
--------app.js
--------app.css
--------index.css
--------app.js
--------reportWebViatls

В документации nestjs, сказано что view нужно добавить в файл main.ts

Но, как это сделать в моем случае не понимаю.

Ниже полный код из main.ts

Дополнительно:

собрать реакт, засунусь в views, изменить .html на .hbs

  • Владимир, не нужно так делать.
    Фронт и бэк в данном случае независимые части, реализовать общение через rest api или другую технологию
  • WapSter, прочитайте вопрос, если он не понимает такого, зачем ему 2 сервера, он просто хочет захостить статику, пусть сначала так научится.

    • Ответы:

    Зачем тебе здесь view если ты хочешь данные на клиент передавать?

    + Заказать

     

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

     

      • Как связать nestjs вместе с reactjs?Есть ответ
      • 09.04.2024
      Ответить

      Для связывания NestJS и ReactJS вам необходимо создать API с помощью NestJS, который будет обрабатывать запросы от вашего фронтенд-приложения на ReactJS.

      Вот шаги, которые вам нужно выполнить для связывания NestJS и ReactJS:

      1. Установите NestJS CLI, если у вас его еще нет, с помощью следующей команды:

      2. Создайте новый проект NestJS с помощью команды:

      3. Создайте контроллер и сервис в вашем проекте NestJS для обработки запросов. Например, создайте контроллер app.controller.ts и сервис app.service.ts.

      4. Реализуйте логику обработки запросов в вашем контроллере и сервисе.

      5. Установите пакет cors для разрешения CORS-запросов на вашем сервере NestJS:

      6. Настройте CORS в вашем приложении NestJS, добавив следующий код в файл main.ts:

      7. Создайте фронтенд-приложение на ReactJS. Установите необходимые зависимости и настройте ваше приложение.

      8. Для отправки запросов к вашему серверу NestJS из ReactJS используйте fetch или axios. Например, для отправки GET-запроса:

      9. Теперь ваше фронтенд-приложение на ReactJS должно успешно взаимодействовать с вашим сервером NestJS. Вы можете отправлять запросы к API сервера NestJS и получать ответы.

      Это основные шаги для связывания NestJS и ReactJS. Не забудьте настроить маршрутизацию и обработку запросов в вашем приложении NestJS в соответствии с вашими потребностями.

      • Как связать nestjs вместе с reactjs?Есть ответ
      • 07.04.2024
      Ответить

      Для связывания NestJS и ReactJS в одном проекте, вам необходимо настроить их взаимодействие через API. NestJS будет выступать в роли серверной части, обрабатывая запросы от клиента ReactJS.

      Вот пошаговая инструкция, как это сделать:

      1. Создайте новый проект NestJS с помощью команды:

      nest new project-name

      2. Создайте контроллер в NestJS для обработки запросов от клиента:
      typescript
      import { Controller, Get } from '@nestjs/common';

      @Controller()
      export class AppController {
      @Get()
      getData() {
      return 'This is data from NestJS API';
      }
      }

      3. Запустите сервер NestJS:

      npm run start

      4. Создайте новый проект ReactJS с помощью Create React App или любым другим способом.

      5. Создайте компонент в ReactJS для отправки запросов на сервер NestJS:
      javascript
      import React, { useState, useEffect } from 'react';

      const App = () => {
      const [data, setData] = useState('');

      useEffect(() => {
      fetch('http://localhost:3000')
      .then(response => response.text())
      .then(data => setData(data));
      }, []);

      return (

      Data from NestJS API:

      {data}

      );
      };

      export default App;

      6. Запустите клиентскую часть ReactJS:

      npm start

      Теперь у вас должно получиться работающее взаимодействие между NestJS и ReactJS. При отправке запроса с клиента ReactJS на сервер NestJS, вы получите данные обратно и сможете их отобразить на странице.

      Не забудьте настроить CORS (Cross-Origin Resource Sharing) на сервере NestJS, чтобы разрешить запросы с клиента ReactJS. Для этого можно использовать пакет @nestjs/common и добавить middleware в ваше приложение.

      Надеюсь, данная инструкция поможет вам связать NestJS и ReactJS в вашем проекте. Если у вас возникнут дополнительные вопросы, не стесняйтесь спрашивать. Удачи!

    Оставить комментарий