Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 10, 2022 08:11 pm GMT

FullStack - Dart Frog React

Requisitos:

  • Dart frog
  • Node

En el post anterior dart-frog vimos como hacer un pequeo API con Dart Frog, pero seamos sinceros eso es mas bien algo que usaramos 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 uses para trabajar con Vite es el de tu preferencia yo usare react por que es el que mas me gusta.

Seguiremos la documentacin de Vite para backend integration te invito a que le des una leda para entender a fondo que estamos haciendo aqu. Esto es solo una gua rpida.

Development

Dart Frog tiene soporte para archivos estticos creando una carpeta /public en la raz del proyecto. A esta le vamos a 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 esttico.

// routes/index.dartimport '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.

run terminal

Entramos a http://localhost:8080/ (Que es donde se esta ejecutando Dart frog) y...

dart frog + react crash

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

Net status

Claro esta intentando buscar un recurso que no tenemos en data_frog/public estn 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.

dart frog + react

Production

Para tener nuestra aplicacin lista para produccin hay que seguir unos pasos muy sencillos.

  • Crear un build de produccin de Vite.
  • Pasar todo lo que esta en frontend/dist -> dart_frog/public
  • Generamos un build de nuestra app

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 carpetas para la build final por lo que tendrs que eliminar la carpeta frontend del build final.

delete dir

No queda mas que ejecutar para ver el resultado final.

$ dart .\build\bin\server.dart

Final

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.

viteReactDartFrog

Te dejo el link al repositorio Dart Frog FullStack.

Que te pareci este experimento?
Cuntame en los comentarios y Happy Hacking


Original Link: https://dev.to/ushieru/fullstack-dart-frog-react-2dic

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To