#Error vite vercel
peak cedar
Ok
sand sequoia
Ve mandando el HTML mientras
peak cedar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>El Tiempo by TheCukitoDev</title>
<script
type="module"
src="./index.js"
></script>
</head>
<body>
<h1>El Tiempo by TheCukitoDev</h1>
<form
action=""
method="post"
>
<input
type="text"
name="city"
id="city"
/>
<button type="submit">Enviar</button>
</form>
</body>
</html>
import axios from 'axios';
let data;
let response;
let temp;
let cityOfLocation;
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
data = Object.fromEntries(new FormData(e.target));
console.log(data.city);
});
document.querySelector('form').addEventListener('submit', async () => {
const options = {
method: 'GET',
url: 'https://visual-crossing-weather.p.rapidapi.com/forecast',
params: {
contentType: 'json',
unitGroup: 'metric',
aggregateHours: '24',
location: data.city,
shortColumnNames: 'false',
},
headers: {
'x-rapidapi-key': , // Esta aqui la key pero ns poner un .env asi que la quito por si acaso
'x-rapidapi-host': 'visual-crossing-weather.p.rapidapi.com',
},
};
try {
response = await axios.request(options);
console.log(response.data);
} catch (error) {
console.error(error);
}
let prevision;
if (response.data.locations[data.city].currentConditions.temp !== undefined) {
temp = response.data.locations[data.city].currentConditions.temp;
prevision = false;
} else {
temp = response.data.locations[data.city].values[0].temp;
prevision = true;
}
cityOfLocation = response.data.locations[data.city].address;
// Show results
const h2 = document.createElement('h2');
if ((prevision = false)) {
h2.innerText = `The actual temperature in ${cityOfLocation} is ${temp}°C`;
} else {
h2.innerText = `The temperature in ${cityOfLocation} will be ${temp}°C today`;
}
document.body.append(h2);
document.querySelector('form').style.display = 'none';
});
En el src del script prueba en vez de ./index.js con /index.js (sin el punto)
peak cedar
ok voy a ver
sand sequoia
Aún que no se yo si será por eso
Cuando hagas la build en vercel vuelve a mandar captura del error así lo veo
sand sequoia
porque ??
Eso es porque el repositorio de GitHub tiene cambios que no has traído
Haz git pull —rebase
peak cedar
ok
sand sequoia
Creo que era así el comando
sand sequoia
```git
git pull --rebase main```
Mismamente
Ahora voy al PC
Que estoy con el móvil
peak cedar
ok
ya va el push
voy con lo otro
ahora no me funciona en el localhost xd
pero si en vercel xd
yo flipo xd
ya va
bieeen
😄
😄
😄
._.
porque no se pone 😄
:D
se me habia apagado la terminal con el npm run dev
xd
gracias
y ahora funca con el .env
sand sequoia
Ya estoy con el pc
sand sequoia
y ahora funca con el .env
por cierto, antes has quitado la key
pero se puede ver en la web
sand sequoia
Piensa que cuando la web compila la key en el .env también se compila
es una manera de tener los datos centralizados, pero al final en la build se ve
peak cedar
y eso se puede evitar??
sand sequoia
y eso se puede evitar??
Para eso necesitas un backend propio
peak cedar
con node js no?
sand sequoia
con node js no?
O con lo que quieras, lo puedes hacer con node, .net, rust, go...
peak cedar
ya
gracias
voy a ver si le pongo algo de estilos
sabes si el midu va a hacer al final el https://jscamp.dev
sand sequoia
sabes si el midu va a hacer al final el https://jscamp.dev
Creo que si, puedes hacer mientras sus cursos de node
Yo te recomiendo mucho aprender typescript antes, es una maravilla
sand sequoia
antes que js
No hombre, js antes
sand sequoia
a ver, al fin y al cabo es lo mismo
peak cedar
yo estaba siguiendo un poco lo del roadmap.sh
sand sequoia
typescript transpila a js, pero esta god
sand sequoia
yo estaba siguiendo un poco lo del roadmap.sh
Pues siguelo entonces
peak cedar
se ya html, css y ahora estoy con js
este es el primer proyecto asi que consume una api
sand sequoia
ves? si entras aqui se puede ver, incluso en la misma req
sand sequoia
este es el primer proyecto asi que consume una api
A ver, hay keys que puedes usar de manera publica porque no tienen algun tipo de limite
piensa que en el cliente si necesitas una key, de alguna manera tiene que existir, no hay manera de que sea privada
peak cedar
ya
sand sequoia
y un .env al fin y al cabo no es mas que una manera de apuntar a una variable
peak cedar
pero para compartir proyectos a gh y eso sera algo mas seguro utilizar unas .env
sand sequoia
lo que va a hacer vite es reemplazar ese process.env.API_KEY por la key cuando hagas la build
sand sequoia
pero para compartir proyectos a gh y eso sera algo mas seguro utilizar unas .env
esa es la gracia, que tu no pones la key en el fichero de codigo, si no que la tienes en otro a parte llamado .env que no subes a github
peak cedar
es un js import.meta.env.VITE_X_RAPIDAPI_KEY porque probe y no funcionaba asi
sand sequoia
es un ```js
import.meta.env.VITE_X_RAPIDAPI_KEY``` porque probe y no funcionaba ...
Si, es que vite lo hace asi
peak cedar
tuve que buscar en los docsç
sand sequoia
de hecho, si acabas usando astro también lo harás asi
sand sequoia
Algo muy complicado al principio es diferenciar cliente de servidor, una vez sepas la diferencia perfectamente y que puedes hacer en cada uno se te va a facilitar todo
sand sequoia
Por ejemplo en astro y en next puedes hacer tanto el front como el back en el mismo proyecto. No es lo más recomendado pero es util
sand sequoia
supongo que despues de js ira react
Yes
después de react aprende typescript
recomendación
ya veras como te facilita la vida
sand sequoia
tailwind lo meto ahi o despues
Tailwind es muy facil
puedes empezar a usarlo ya si quieres
es simplemente aplicar estilos de CSS a traver de clases
si le pones la clase flex a un div, pues ese div tendra display: flex
asi con todo
peak cedar
ahora quiero centrarme en js
estuve viendo los videos del midu del bootcamp
que hizo hace ya
sand sequoia
ahora quiero centrarme en js
Pues dale, también aprende node cuando puedas
peak cedar
me cuesta a veces el enlazar archivos de js
hacer imports y exports de diferentes archivos
sand sequoia
hacer imports y exports de diferentes archivos
El que exactamente? al fin y al cabo exportas constantes, funciones y clases
despues la puedes importar en otro archivo
peak cedar
me refiero a cuando tengo un formulario y le pongo un action y despues no va a la ruta que le digo y cuando va no carga los archivos de js...
sand sequoia
me refiero a cuando tengo un formulario y le pongo un action y despues no va a l...
Ese action es una peticion que hace automaticamente
peak cedar
en este proyecto lo he hecho en una pagina solo porque no me redirigia al action
sand sequoia
Eso es para cuando tienes servidor
No tiene nada que ver con imports y exports jjajaja
se suele poner un action y un method
peak cedar
sand sequoia
Es una manera de mandar datos en un formulario, como se suele hacer en php
sand sequoia
Es la manera en la que funciona form
Buscate algun curso de formularios que te cuente como funcionan
peak cedar
en si, los imports y exports no me cuestan pero como probe a hacerlo en dos páginas pues no me ejecutaba el js que tenia la pagina y eso
gracias
seguro que volveremos a hablar porque la estoy liando casi siempre
asi que hasta pronto
tomare en cuenta tus recomendaciones
peak cedar
Creo que estas confundiendo ese action con el de react
?
sand sequoia
?
en react, si pones un atributo action en un formulario ahora puedes pasarle una funcion, pero eso no es como funciona en html
peak cedar
ahh
sand sequoia
en html lo que haces es
<form action="/api/formulario" method="POST">
Esto lo que hace es que al hacer un submit del formulario, se haga una peticion a /api/formulario con el metodo POST
sand sequoia
todavia no estoy muy centrado en react
Pensaba que a lo mejor lo escuchaste de midu y lo estabas confundiendo, por eso te lo he dicho
peak cedar
react no?
sand sequoia
que es mejor vue o angular o react?
No se si hay uno mejor o peor, pero yo te recomiendo react jajaja
peak cedar
yo voy a aprenderlo primero porque creo que es el mas versatil
sand sequoia
y despues usas tsx que es tambien tx con react
tsx es typescript
js y jsx, ts y tsx
peak cedar
yo ahora me voy a centrar en js, después react, despues ts, node y astro y next
y tailwind con shadcn
sand sequoia
y tailwind con shadcn
Bueno, tailwind y shadcn son 2 cosas distintas
ve con calma, pero aprendiendo bien la teoria
peak cedar
shad cn es ula lib de componentes para react no?
sand sequoia
shad cn es ula lib de componentes para react no?
si
peak cedar
pero al final usa tailwind
sand sequoia
Ya te digo que tu mayor problema ahora mismo es entender la diferencia entre cliente y servidor
sand sequoia
pero al final usa tailwind
Si, shadcn usa tailwind
peak cedar
y como lo diferencio?
sand sequoia
y como lo diferencio?
Esa es una buena pregunta jajaja
peak cedar
supongo que sobre la marcha no?
sand sequoia
supongo que sobre la marcha no?
Si, tocará
peak cedar
yo voy a hacer proyectos y asi voy aprendiendo
sand sequoia
Cuando aprendas node con algun framework web (express el mas tipico) lo entenderas
peak cedar
espero llegar pronto a eso
sand sequoia
espero llegar pronto a eso
Ya te digo, con paciencia y aprendiendo bien
sand sequoia
no se me da muy bien css asi que me bloquee y dije de aprender js
Para mi el mayor problema fue CSS jajajaja
hasta que aprendes flex
sand sequoia
a ver si encuentro el curso de css de midu
peak cedar
y despues las animaciones xd
peak cedar
ya
sand sequoia
y muy actualizado
sand sequoia
entonces a partir de ahi es ir practicando
peak cedar
es lo que estoy enfocandome ahora
sand sequoia
Aquí tengo un bento si quieres ver https://bentogrids.vercel.app/
abajo no sabia que poner asi que no deje nada jajaja
sand sequoia
yo estoy aprendiendo para crear algo como el https://www.esquire.com/
un ecommerce?
peak cedar
no es un blog
y lo monetizo con google ad manager
y asi me obligo a aprender seo
y performance
sand sequoia
god
peak cedar
y de todo xd
sand sequoia
hablando de blogs, tengo uno con astro jajaj
que feo ese og, tengop que cambiarlo
aquí explico un poco con que está hecho https://blog.otakulihao.com/blog/programacion/presentacion-del-blog
peak cedar
lo que si haria es hacer que vaya cambiando el color de esto segun bajes
sand sequoia
lo que si haria es hacer que vaya cambiando el color de esto segun bajes
Esa tabla de contenido no esta muy elaborada la verdad
sand sequoia
Tuve problemas porque tengo que extraer del html los titulos y es un poco feo
peak cedar
gracias por todo
sand sequoia
gracias por todo
Nada hombre, cualquier cosa pregunta
