Herramientas:
Requisitos:
Objetivo:
Veras en acción con este rápido tutorial practico las mejores herramientas para desarrollar sitios de ultima generación. Escalables, resilientes y de fácil desacople. Desde 0 a producción.
Repositorio. Por si te llegas a perder en el camino 👀
Daré por sentado que ya saben que pueden seguir este tutorial con npm, yarn o pnpm; que ya cuentas con Node.js instalado y que haz trabajado con este runtime anteriormente.
⚠️ Esto no significa que no puedas comentar tus dudas. La comunidad es muy grande y mas de uno te vamos a poder ayudar si te atoras con algo o quieres profundizar un poco más. ⚠️
Que es Jamstack?
Jamstack es una arquitectura diseñada para que la net sea más rápida, más segura y más fácil de escalar. Se basa en muchas de las herramientas y flujos de trabajo que los desarrolladores adoran y que aportan la máxima productividad.
Los principios básicos de pre-renderización y desacoplamiento permiten que los sitios y las aplicaciones se entreguen con mayor confianza y resistencia que nunca.
Let’s do it
Iniciaremos creando todo lo necesario para nuestro proyecto.
Dejare enlaces a la documentación por si quieren profundizar un poco mas pero este tutorial puede ser seguido 100% desde aquí.
Subsequent.js
El framework de react para produccion. Subsequent.js le brinda la mejor experiencia de desarrollador con todas las funciones que necesita para la producción: renderizado híbrido estático y de servidor, compatibilidad con TypeScript, agrupación inteligente, búsqueda previa de ruta y más. No se necesita configuración.
Doc
$ yarn create next-app jamstack-2022 --typescript
Tailwind
Cree rápidamente sitios net modernos sin tener que abandonar su HTML. Un marco CSS de primera utilidad repleto de clases como flex, pt-4, text-center y giratorio-90 que se pueden componer para crear cualquier diseño, directamente en su marcado.
Doc
$ yarn add -D tailwindcss postcss autoprefixer
$ yarn tailwindcss init -p
// tailwind.config.js
/** @kind {import('tailwindcss').Config} */
module.exports = {
content material: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
prolong: {},
},
plugins: [],
}
/* types/globals.css */
@tailwind base;
@tailwind elements;
@tailwind utilities;
Puedes borrar types/House.module.css
Prisma
Cree e itere aplicaciones de JavaScript y TypeScript basadas en datos en menos tiempo.
Doc
VSCode extention
$ yarn add -D prisma
$ yarn prisma init
$ yarn add @prisma/consumer
Haremos un pequeño ajuste en la DB que usaremos. Puedes usar la que quieras. Para fines prácticos usaremos SQLite. Si te interesa un tutorial con Mongo Atlas, Planet Scale (MySQL), Cockroach (Postgres) ó con Docker. Házmelo saber en los comentarios.
// prisma/schema.prisma
generator consumer {
supplier = "prisma-client-js"
}
datasource db {
supplier = "sqlite"
url = env("DATABASE_URL")
}
; .env
DATABASE_URL="file:./dev.db"
Usaremos las mejores practicas de Prisma + Subsequent.js en tiempo de desarrollo.
// lib/prisma.ts
// globals.d.ts
import { PrismaClient } from '@prisma/consumer'
declare module world {
let prisma: PrismaClient;
}
let prisma: PrismaClient;
if (course of.env.NODE_ENV === 'manufacturing') {
prisma = new PrismaClient()
} else {
if (!world.prisma) {
world.prisma = new PrismaClient({ log: ['info', 'query'] })
}
prisma = world.prisma
}
export default prisma;
Subsequent Auth
Autenticación para Subsequent.js. Código abierto. Full Stack. Seguro por defecto. Eres dueño de tus datos.
Doc
$ yarn add next-auth @next-auth/prisma-adapter
// prisma/schema.prisma
generator consumer {
supplier = "prisma-client-js"
}
datasource db {
supplier = "sqlite"
url = env("DATABASE_URL")
}
mannequin Account {
id String @id @default(cuid())
userId String
kind String
supplier String
providerAccountId String
refresh_token String?
access_token String?
expires_at Int?
token_type String?
scope String?
id_token String?
session_state String?
consumer Consumer @relation(fields: [userId], references: [id], onDelete: Cascade)
@@distinctive([provider, providerAccountId])
}
mannequin Session {
id String @id @default(cuid())
sessionToken String @distinctive
userId String
expires DateTime
consumer Consumer @relation(fields: [userId], references: [id], onDelete: Cascade)
}
mannequin Consumer {
id String @id @default(cuid())
identify String?
e-mail String? @distinctive
emailVerified DateTime?
picture String?
accounts Account[]
periods Session[]
}
mannequin VerificationToken {
identifier String
token String @distinctive
expires DateTime
@@distinctive([identifier, token])
}
// pages/_app.tsx
import '../types/globals.css'
import kind { AppProps } from 'subsequent/app'
import { SessionProvider } from "next-auth/react"
export default perform App({
Element,
pageProps: { session, ...pageProps },
}: AppProps) {
return (
<SessionProvider session={session}>
<Element {...pageProps} />
</SessionProvider>
)
}
// pages/api/auth/[...nextauth].ts
import NextAuth from "next-auth"
import GoogleProvider from "next-auth/suppliers/google"
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import prisma from './../../../lib/prisma'
export default NextAuth({
adapter: PrismaAdapter(prisma),
suppliers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID as string,
clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
}),
],
})
Comenta si quieres ver como ligar otros servicios o consulta directamente la doc de Subsequent-Auth.
Para crear las credenciales para google como proveedor lo puedes hacer desde la consola de GCP.
Algo asi deberia de verse:
; .env
DATABASE_URL="file:./dev.db"
GOOGLE_CLIENT_ID=<Lo que te tire GCP console>
GOOGLE_CLIENT_SECRET=<Lo que te tire GCP console>
// pages/index.tsx
import { useSession, signIn, signOut } from "next-auth/react"
export default perform Element() {
const { information: session } = useSession()
if (session) {
return <>
<p>Signed in as <span className='font-bold'>{session!.consumer!.e-mail}</span></p>
<button onClick={() => signOut()} className='bg-blue-500 py-1 px-3 text-white rounded'>Signal out</button>
</>
}
return <>
<p>Not signed in</p>
<button onClick={() => signIn()} className='bg-blue-500 py-1 px-3 text-white rounded'>Sign up</button>
</>
}
A echarlo a volar 🚀🚀
Generamos la base de datos
$ yarn prisma db push
Iniciamos el proyecto
$ yarn begin
Y listo, tienes tu proyecto con las mejores y mas nuevas tecnologías. Pero que dices? lo llevamos un poco mas allá?
Mucha suerte en tus proyectos y Joyful Hacking 🎉🧑💻
