DEV Community

Manuel Duarte 💛💙
Manuel Duarte 💛💙

Posted on

3 2

¿Como hacer un Deploy a Firebase Hosting?

  1. Ir a https://console.firebase.google.com e iniciar sesión, si no posees una cuenta, debes registrar un usuario con tu correo gmail.

  2. Una vez accedas a Firebase console podrás observar las apps que tienes disponible, si deseas crear otra app, ve a la opción crear aplicacion. En nuestro caso usaremos “ThanosLanguages”

  3. Ir a la terminal del sistema operativo e instalar las Firebase Tools con el siguiente comando: npm install -g firebase-tools, si en caso usas yarn, debes usar yarn add -g firebase-tools

  4. Luego debes iniciar sesión desde tu terminal con el comando: firebase login, si en caso ya estás logeado, verás un mensaje similar a “you are logged as 'correo’”, caso contrario te abrirá el navegador, e inicias sesión con tu cuenta de Firebase. (si en caso estás logueado y deseas cerrar sesión usa: firebase logout).

  5. Inicializar el proyecto en la ruta raíz con el comando: firebase init.

  6. Se listara serie de opciones en nuestro caso usaremos la opción hosting (con arrow up/arrow down mover entre opciones y space key para seleccionar opción, luego enter).

  7. Se listara los proyectos disponibles a tu usuario Firebase, en nuestro caso debemos seleccionar CocomioLanguages, y luego enter

  8. Opciones:

  • What to you want to use as public directory: dist

  • configure as a single page app(y/N) y

  1. Se creará la carpeta dist (puedes borrarla es opcional). .
  2. Compilar la app desde la raíz del proyecto, usando uno de los siguientes comandos:
  • npm run build
  • yarn build
  1. Se debe subir lo que esta en la carpeta build, por lo tanto debemos abrir el archivo “firebase.json” y dejar con una estructura como:
{“hosting”:{

   “public”: “build” /*solo cambiar dist por build */,

     …

  }

}
Enter fullscreen mode Exit fullscreen mode
  1. Ejecutar el comando: firebase deploy

Recibirás un mensaje de éxito, y podrás ver la Url e ir a la Url y listo

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please consider leaving a ❤️ or a friendly comment if you found this post helpful!

Okay