풀스택 - 다트 프로그 + 리액트

요구 사항:

다트 개구리

노드

En el post anterior vimos como hacer un pequeño API con Dart Frog, pero seamos sinceros es mas bien algo que usaríamos para microservicios o solo backend. Así que agreguemos sabor potenciando este framework con Vite .

En la misma carpeta de nuestro proyecto de Dart Frog creemos un proyecto de Vite.

# npm
$ npm create vite@latest

# vite
$ yarn create vite

El Framework que use para trabajar con Vite es el de tu preferencia yo usare react por que es el que mas me gusta.

Seguiremos la documentación de Vite para backend integration te invito a que le des una leída para entender a fondo que estamos haciendo aquí. Esto es solo una guía rápida.

개발

Dart Frog tiene soporte para archivos estáticos creando una carpeta/public en la raíz del proyecto. agregar un index.html con la siguiente estructura:

<!-- public/index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module">
        import RefreshRuntime from 'http://localhost:5173/@react-refresh'
        RefreshRuntime.injectIntoGlobalHook(window)
        window.$RefreshReg$ = () => { }
        window.$RefreshSig$ = () => (type) => type
        window.__vite_plugin_react_preamble_installed__ = true
    </script>
    <script type="module" src="http://localhost:5173/@vite/client"></script>
</head>

<body>
    <div id="root"></div>
    <script type="module" src="http://localhost:5173/src/main.jsx"></script>
</body>

</html>

Listo nuestro archivo tendremos que hacer que nuestro index.dart sirva este archivo estático.

// routes/index.dart

import 'dart:io';

import 'package:dart_frog/dart_frog.dart';
import 'package:path/path.dart' as path;

Response onRequest(RequestContext context) {
  final file = File(path.join(Directory.current.path, 'public', 'index.html'));
  if (!file.existsSync()) {
    return Response(body: 'Index Not found');
  }
  final indexHtml = file.readAsStringSync();
  return Response(body: indexHtml, headers: {'Content-Type': 'text/html'});
}

Corremos ambos proyectos.

엔트라모스 ahttp://localhost:8080/ (Que es donde se esta ejecutando Dart frog) y...

Estuvimos muy cercas... pero que paso? revisemos los recursos que se estan descargando por red.

Claro esta intentando buscar un recurso que no tenemos en data_frog/public están en frontend/public. entonces lo unico que hay que hacer es mover esos recursos de frontend/public -> data_frog/public.

En App.jsx tenemos un import de esta manera import reactLogo from './assets/react.svg' por lo que hay que eliminar esa linea y mover ese SVG de react a la carpeta public de dart_frog frontend/src/assets -> data_frog/public.

Y ya lo tendriamos.

생산

Para tener nuestra aplicación lista para producción hay que seguir unos pasos muy sencillos.

VITE 제품을 만들 수 없습니다.

프런트엔드/dist에서 실행하려면 다음을 수행하십시오. -> dart_frog/public

Generamos un build de nuestra 앱

En la terminal seria algo así:

$ cd frontend
$ yarn build
$ mv -v ./dist/* ../public/
$ cd ..
$ dart_frog build

Dart frog aun no tiene una forma de ignorar carpets para la build final por lo que tendrás que eliminar la carpeta frontend del build final.

No queda mas que ejecutar para ver el resultado final.

$ dart .\build\bin\server.dart

Ya puedes hacer las ediciones que quieras y mandar a llamar los endpoints de dart frog desde vite con fetch y mejorar así tus desarrollos con Dart Frog.

Te dejo el link al repositorio Dart Frog FullStack .

실험을 어떻게 해야 합니까?
Happy Hacking 🧑‍💻🎉에 대한 댓글 보기

Reference

이 문제에 관하여(풀스택 - 다트 프로그 + 리액트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ushieru/fullstack-dart-frog-react-2dic

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

풀스택 - 다트 프로그 + 리액트

개발

생산

Reference

좋은 웹페이지 즐겨찾기