Deploy React App en Vercel

By malcode

En primer lugar crea una cuenta en vercel.com.

Ahora instala vercel en tu entorno local. npm:


        npm i -g vercel
    

Yarn:


        yarn global add vercel
    

Ya instalado vercel, ubícate en la carpeta raíz de tu proyecto. Ya aquí inicia sesión en vercel con el siguiente comando:


        ~ malcode/
        vercel login
    

En Seguida te pedirá tu correo electrónico con el que esta vinculado tu cuenta vercel, para enviarte un enlace de autenticación.


    Vercel CLI 20.1.1
    Enter your email: developer@malcode.dev
    

vercelConfirmLogin

Ya verificada tu autenticación estás listo 🐱‍👤 para publicar tu aplicación, para dar inicio ejecuta el siguiente comando:


        ~ malcode/
        vercel
    

Ahora te pregunta si quieres ¿Configurar e implementar? 🤷‍♂️, Si y:


    Vercel CLI 20.1.1
    ? Set up and deploy “~ malcode”? [Y/n] y
    

¿En qué ámbito desea implementar?, en vercel puedes crear equipos, así que se te listara todos los equipos que tengas y podras selecciónar en el "team" | "scope" que deseas montar tu aplicación. Como acabamos de crear nuestra cuenta tendras uno por default con tu nombre. Continuemos.

Arrow up & arrow down, para navegar en la lista de "teams" || "scopes"


    ? Which scope do you want to deploy to? y
    ● malcodedev
    

¿Enlace a proyecto existente?. N, para continuar.


    ? Link to existing project? [y/N] N
    

Dale un nombre a tu proyecto, en mi caso: malcode


    ? What’s your project’s name? malcode
    

¿En qué directorio se encuentra su código?, Enter para continuar si ten encuentra en la carpeta realiza de tu proyecto, sino debes indicar la ruta.


    ? In which directory is your code located? ./
    

Si no deseas sobrescribir la configuración de compilación ingrese N, para continuar.


    Auto-detected Project Settings (Create React App):
    - Build Command: npm run build or react-scripts build
    - Output Directory: build
    - Development Command: react-scripts start
    ? Want to override the settings? [y/N] N
    

Es todo, ahora solo queda esperar unos minutos, para ver tu aplicación online. 😎

1 minuto... despues tendras esto como resultado de que tu aplicación ya fue publicado, pero está en modo desarrollo.


    �  Linked to malcode/movies-app (created .vercel and added it to .gitignore)
    �  Inspect: https://vercel.com/malcode/movies-app/1zxp6p1rf [2s]
    ✅  Production: https://movies-app-gold.vercel.app [copied to clipboard] [2m]
    �  Deployed to production. Run vercel --prod to overwrite later (https://vercel.link/2F).
    �  To change the domain or build command, go to https://vercel.com/gvargas/movies-app/settings
    

Para pasar tu aplicación a modo producción y asegurarnos de que todos los modulos esten optimos, ejecuta el siguiente comando:


    ~ malcode/
    vercel --prod
    

Es todo...