FullStack - Dart Frog + React
Tags: react, dart, webdev, spanish
Published: 2022-09-10 20:11:49

Requisitos:
- Dart frog
- Node

En el post anterior [dart-frog](https://dev.to/ushieru/dart-frog-1hco) vimos como hacer un pequeño API con Dart Frog, pero seamos sinceros eso es mas bien algo que usaríamos para microservicios o solo backend. Así que agreguemos sabor potenciando este framework con [Vite](https://vitejs.dev/).

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

````sh
# 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 documentación de Vite para [backend integration](https://vitejs.dev/guide/backend-integration.html) 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.

### Development

Dart Frog tiene soporte para archivos estáticos creando una carpeta **/public** en la raíz del proyecto. A esta le vamos a agregar un **index.html** con la siguiente estructura:
```html
<!-- 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.

```dart
// 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.

![run terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f63hfiyv69vn2mrzya5s.png)

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

![dart frog + react crash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xswjpf5q0jc0zwhzoj9p.png)

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

![Net status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50zhaxwm997a05ab5tqz.png)

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.

![dart frog + react](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uuw6ub40l0tnl1cdgc8r.png)

### Production

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

- Crear un build de producción 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í:

```sh
$ 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 tendrás que eliminar la carpeta **frontend** del build final.

![delete dir](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqmakfth35w01m5y3oi0.png)

No queda mas que ejecutar para ver el resultado final.

```sh
$ dart .\build\bin\server.dart
```

![Final](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1sdvnhxs1l8wcfrl7tz.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hih8pmcff9s0l46h6fn.png)

Te dejo el link al repositorio [Dart Frog FullStack](https://github.com/ushieru/dart_frog_todo_example/tree/fullstack). 

Que te pareció este experimento?
Cuéntame en los comentarios y Happy Hacking 🧑‍💻🎉