Share
Angular CLI es una interfaz de línea de comandos para Angular y una de las formas más fáciles de iniciar su aplicación. La belleza de usar Angular CLI es que le permite concentrarse en su código, sin tener que preocuparse por la estructura de su aplicación, ya que todos los archivos necesarios se generan para usted..
Es muy fácil crear aplicaciones listas para producción con Angular CLI. Por otro lado, Firebase hace que sea rápido para alojar aplicaciones. Además, Firebase tiene muchas características y un plan gratuito que te permite experimentar con la plataforma sin estar atado a un plan pagado..
El plan gratuito tiene las siguientes características:
Para ejecutar Angular CLI, debe tener Node.js 6.9 y NPM 3 o superior instalados en su sistema. Si no tiene instalado Node.js, visite el sitio web de Node.js para obtener instrucciones sobre cómo instalar Node.js en su sistema operativo.
También debe tener una comprensión básica de lo siguiente:
Instalar Angular CLI es tan fácil como:
npm install -g @ angular / cli
El comando anterior instala la última versión de Angular. Para validar la instalación exitosa de Angular CLI, simplemente ejecute el siguiente comando:
ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ | / △ \ | '_ \ / _' | | | | | / _ '| '__ | | | | | | | / ___ \ | | | | (_ | | | _ | | | (_ | | | | ___ | | ___ | | | _ _ | | _ | | | | | | | | | | | | | \ ____ | _____ | ___ | | ___ / Angular CLI: 6.0.8 Nodo: 10.7.0 OS: linux x64 Angular:… Versión del paquete --------------------- ----------------------------------- @ angular-devkit / architect 0.6.8 @ angular-devkit / core 0.6.8 @ angular-devkit / schematics 0.6.8 @ schematics / angular 0.6.8 @ schematics / update 0.6.8 rxjs 6.2.2 mecanografía 2.7.2
Ahora que tiene instalado Angular CLI, podemos comenzar a desarrollar nuestra aplicación. En este tutorial, no nos sumergiremos en los componentes que conforman un proyecto de CLI angular, ya que esta publicación trata principalmente sobre la implementación en Firebase.
Para crear una nueva aplicación, simplemente ejecute ng nuevo [nombre_de_proyecto], donde reemplazas nombre del proyecto con el nombre de tu aplicación.
nueva lista de cubo
Esto creará todos los archivos necesarios para comenzar. Como puede ver, Angular CLI ha creado una gran cantidad de archivos que de lo contrario se crearía en versiones anteriores, es decir, Angular v1.
Para ver su aplicación en el navegador, vaya a la carpeta del proyecto y ejecute ng -servir. Este comando se utiliza para servir una aplicación localmente.
cd bucketlist ng -serve
Ahora navegue a http: // localhost: 4200 / para ver su aplicación en acción. Cualquier cambio que realice en su aplicación se vuelve a cargar en su navegador, por lo que no tiene que seguir ejecutando la aplicación..
Ahora que hemos creado nuestra aplicación, es hora de implementarla. Vamos a seguir los siguientes pasos:
Para empezar, necesitarás tener una cuenta Firebase. Si no tiene una, regístrese ahora para obtener una cuenta gratuita.
En el panel de Firebase, cree un nuevo proyecto como se muestra a continuación. Simplemente puede darle el mismo nombre que su aplicación Angular. Esto lo hará más fácil, especialmente si tiene muchos proyectos en el panel de Firebase.
Firebase facilita la configuración del alojamiento, ya que le proporciona todos los pasos a seguir. Para instalar las herramientas de comando de Firebase, simplemente ejecute:
npm install -g firebase-tools
Nota: Debería estar en el directorio de su proyecto cuando emita este comando para que las herramientas se instalen en su proyecto..
Inicia sesión en Firebase.
inicio de sesión de firebase
Responder Sí al indicador interactivo.
? ¿Permitir que Firebase recopile información de uso de CLI anónima y de informe de errores? Sí. Visite esta URL en cualquier dispositivo para iniciar sesión: https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e.appps. .googleapis.com% 2Fauth% 2Fcloudplatformprojects.readonly% 20https% 3A% 2F% 2Fwww.googleapis.com% 2Fauth% 2Ffirebase% 20https.p.P.C.P. % 3A% 2F% 2Flocalhost% 3A9005 Esperando autenticación ...
A continuación, la herramienta CLI de Firebase abrirá un navegador donde se le solicitará que permita que Firebase se autentique a través de Google Mail.
Si la autenticación es exitosa, obtendrá la siguiente interfaz en su navegador en http: // localhost: 9005 /.
El siguiente paso es inicializar su proyecto Firebase. Esto vinculará su aplicación Angular local a la aplicación Firebase que acaba de crear. Para hacer esto, simplemente ejecuta:
base de fuego de inicio
Elija Hosting como la función que desea configurar para el proyecto, ya que solo estamos interesados en Firebase hosting.
######## #### ######################### ### ###### ##### ### ## ## ## ## ## ## ## ## ## ## ## ###### ## ######## ########## ##### ####################### ## ## ## ## ## ## ## ## ## ## ## ## #### ## ## ######## ######## ## ## ###### ######## Estás a punto de inicializar un Firebase proyecto en este directorio: / home / vaatiesther / Desktop / bucketlist? ¿Qué características de Firebase CLI desea configurar para esta carpeta? Presione la barra espaciadora para seleccionar funciones, luego presione Entrar para confirmar sus elecciones. Base de datos: Implementar las reglas de la base de datos de Firebas e Realtime, Alojamiento: configurar e implementar los sitios de hospedaje de Firebase === Configuración del proyecto Primero, asociemos este directorio de proyecto con un proyecto de Firebase. Puede crear múltiples alias de proyecto ejecutando el uso de base de fuego --add, pero por ahora solo configuraremos un proyecto predeterminado. ? Seleccione un proyecto predeterminado de Firebase para este directorio: Bucketlist (bucketlist-7 2e57) === Configuración de la base de datos Las reglas de la base de datos de Firebase en tiempo real le permiten definir cómo deben estructurarse sus datos y cuándo se pueden leer y escribir sus datos. ? ¿Qué archivo debe usarse para las reglas de base de datos? database.rules.json ✔ Las reglas de la base de datos para bucketlist-72e57 se han descargado en database.rules.json. Las futuras modificaciones de database.rules.json actualizarán las Reglas de la base de datos cuando ejecute el despliegue de firebase. === Configuración de Hosting Su directorio público es la carpeta (relativa al directorio de su proyecto) que contendrá los recursos de Hosting que se cargarán con el despliegue de firebase. Si tiene un proceso de compilación para sus activos, use el directorio de salida de su compilación. ? ¿Qué quieres usar como tu directorio público? ¿público? ¿Configurar como una aplicación de una sola página (volver a escribir todas las direcciones URL en /index.html)? Sí ✔ Escribió public / index.html i Escribiendo información de configuración en firebase.json ... i Escribiendo información del proyecto en .firebaserc ... ✔ Inicialización de Firebase completada!
Este comando creará dos archivos:
Estos dos archivos contienen las configuraciones de Firebase y cierta información importante sobre su aplicación.
El archivo JSON debería verse así:
"hosting": "public": "public", "ignore": ["firebase.json", "** /. *", "** / node_modules / **"], "reescribe": [ "source": "**", "destination": "/index.html"]
CLI angular proporciona la ng build --prod comando, que inicia una compilación de producción. Este comando crea un dist carpeta que contiene todos los archivos para servir la aplicación. Este proceso es importante para que su aplicación sea más liviana y más rápida en la carga de páginas web. Para hacer esto, simplemente emita:
ng build --prod
Si ha seguido todos los pasos hasta ahora, nuestra aplicación Angular local ahora está vinculada a Firebase, y puede enviar fácilmente sus archivos como lo hace con Git. Simplemente ejecuta el despliegue de base de fuego comando para desplegar su aplicación.
firebase deploy === Implementación en 'bucketlist-72e57' ... Implemento base de datos, hosting i base de datos: comprobación de la sintaxis ... ✔ base de datos: reglas de sintaxis para la base de datos bucketlist-72e57 es válida i hosting: preparación del directorio público para la carga ... ✔ hosting: 1 archivos cargados con éxito i base de datos: reglas de publicación ... ✔ base de datos: reglas para la base de datos bucketlist-72e57 lanzadas con éxito ✔ Implementación completa!
Su aplicación ya está implementada y puede verla emitiendo el siguiente comando.
Accentsconagua
Firebase Open Hosting: sitioComo ha visto, es muy fácil comenzar con Firebase ya que se necesita muy poca configuración para que su aplicación sea alojada. ¡Y lleva mucho menos tiempo que configurar un hosting tradicional! Angular es un gran marco para el desarrollo de aplicaciones: realmente ha evolucionado con los años y cada actualización viene con funciones más avanzadas y correcciones de errores..
Para obtener más información, visite el sitio oficial de Angular y Firebase y explore las posibilidades de usar estas dos tecnologías juntas.
