Como implantar um aplicativo no Firebase com um CLI angular

angular CLI é uma interface de linha de comando para angular e uma das maneiras mais simples de iniciar sua inscrição. A CLI angular tem a vantagem de permitir que você se concentre no seu código, sem ter que se preocupar com a estrutura do seu aplicativo, porque todos os arquivos necessários são gerados para você ..

É muito fácil criar pronto fez aplicações com cli angular. Além disso, o Firebase permite hospedar rapidamente os aplicativos. Além disso, o Firebase tem muitos recursos e um pacote gratuito que permite experimentar a plataforma sem ser ligada a um pacote pago.

O plano gratuito tem as seguintes características:

  • Teste A / B
  • Analytic
  • Indexação de aplicativos
  • autenticação
  • Mensagens de nuvem
  • análise de colisão
  • rastreamento de desempenho
  • previsões

condições pré-requisitos

para executar o cli angular, você deve ter instalado node.js 6.9 e NPM 3 ou superior em seu sistema. Se você não instalou o Node.js, visite o site do Node.js para encontrar instruções na instalação do Node.js no seu sistema operacional.

Você também deve ter uma compreensão básica do seguinte:

  • programação orientada a objetos
  • javascript ou typycript

instalação do cli angular

install angular cli é tão simples Como:

npm install -g @ angular / cli

O comando acima instala a versão mais recente do angular. Para validar a instalação bem-sucedida do CLI angular, basta iniciar o seguinte comando:

ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ | / △ \ | '_ \ / _' | | | | | / _ '| '__ | | | | | | | / ___ \ | | | | (_ | | | _ | | | (_ | | | | ___ | | ___ | | / _ / \ _ \ _ | | _ | __, | \ __, | __, _ | _ | _ | _, _ | _ | \ ____ | _____ | ___ | | ___ / CLI angulaire: 6.0.8 nœud: 10.7.0 OS: linux x64 angulaire:… Version du package ------------------- ----------------------------------- @ angular-devkit / architect 0.6.8 @ angular-devkit / core 0.6.8 @ angular-devkit / schémas 0.6.8 @ schémas / angulaire 0.6.8 @ schémas / mise à jour 0.6.8 rxjs 6.2.2 dactylographié 2.7.2 

Criando um aplicativo angular

agora que você instalou CLI angular, podemos começar a desenvolver nossa inscrição. Neste tutorial, não vamos detalhar os componentes de um projeto CLI angular, porque este artigo se concentra na implantação do Firebase.

Para criar um novo aplicativo, basta começar ng new , onde você substitui nom_du_projet com o nome do seu aplicativo.

ng new bucketlist

Isso Crie todos os arquivos necessários para iniciar. Como você pode ver, a Angular CLI criou muitos arquivos que você teria criado em versões anteriores, ou seja, angular v1 ..

Inicie seu aplicativo

para visualizar seu aplicativo no navegador , navegue até a pasta do projeto e execute ng -serve. Este comando é usado para atender um aplicativo localmente.

cd bucketlist ng -serve

agora, vá para http: // localhost: 4200 / para ver sua inscrição em ação . Todas as alterações feitas para o seu aplicativo são recarregadas no seu navegador, então você não precisa continuar executando o aplicativo ..

implantação

Agora que criamos nosso aplicativo, é Hora de implantá-lo. Vamos seguir as seguintes etapas:

  • Criar um projeto de Firebase
  • Instalar ferramentas de firebase
  • construção para produção
  • implantação Firebase

Criando um aplicativo Firebase

para começar, você deve ter uma conta Firebase. Se você não tiver um, crie uma conta gratuita agora.

no painel do Firebase, crie um novo projeto conforme mostrado abaixo. Você pode simplesmente dar-lhe o mesmo nome da sua aplicação angular. Isso facilitará as coisas, especialmente se você tiver muitos projetos no painel do Firebase ..

Instale as ferramentas de controle do Firebase

A Firebase facilita a configuração do alojamento porque fornece todos os passos a seguir. Para instalar as ferramentas de controle do Firebase, basta executar:

npm install -g firebase-tools

Nota: Você deve estar no diretório do seu projeto quando você executar este comando para que as ferramentas instaladas No seu projeto ..

autenticada Firebase

Faça login no Firebase.

connexion firebase

Resposta Sim ao prompt interativo.

? Autoriser Firebase à collecter des informations anonymes sur l’utilisation de la CLI et les rapports d’erreur? Oui Visitez cette URL sur n'importe quel appareil pour vous connecter: https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20penid%20+ .googleapis.com% 2Fauth% 2Fcloudplatformprojects.readonly% 20https% 3A% 2F% 2Fwww.googleapis.com% 2Fauth% 2Ffirebase% 20https% 3A% 2F% 2F% 2Fwww.googleapis.com% 2Fauth% 2Ffirebase% 20https% 3A% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F% %Fauth% 2%% 2%% 3%%%%%%%%%%% également aussi % 3A% 2F% 2Flocalhost% 3A9005 En attente d'authentification… 

Em seguida, a ferramenta CLI do Firebase abrirá um navegador no qual você será solicitado a permitir a autenticação do Firebase pelo Google Mail ..

Se a autenticação for bem sucedida, a seguinte interface será exibida no seu navegador em http: // localhost: 9005 //// p>

Inicialize o projeto

O próximo passo é inicializar seu projeto Firebase. Isso ligará sua aplicação angular local à aplicação do Firebase que você acabou de criar. Para isso, basta lançar:

firebase init 

Escolha a hospedagem como um recurso que você deseja configurar para o projeto, porque estamos interessados apenas pela acomodação do Firebase.

######## #### ######## ######## ####### ### ###### ##### ### ## ## ## ## ## ## ## ## ## ## ## ## ###### ## ######## ###### ### ##### ######### ###### ###### ## ## ## ## ## ## ## ## ## ## ## #### ## ## ######## # ######## ## ## ###### ######## Vous êtes sur le point d'initialiser une base Firebase projet dans ce répertoire: / home / vaatiesther / Desktop / bucketlist? Quelles fonctionnalités CLI de Firebase souhaitez-vous configurer pour ce dossier? Appuyez sur Espace pour sélectionner les fonctionnalités, puis sur Entrée pour confirmer vos choix. Base de données: déployer Firebas e Règles de base de données en temps réel, hébergement: configurer et déployer des sites d'hébergement Firebase === Configuration du projet Associons tout d'abord ce répertoire de projet à un projet Firebase. Vous pouvez créer plusieurs alias de projet en exécutant firebase use --add, mais pour l'instant, nous allons simplement configurer un projet par défaut. ? Sélectionnez un projet Firebase par défaut pour ce répertoire: Bucketlist (bucketlist-7 2e57) === Configuration de la base de données Les règles de base de données Firebase Realtime vous permettent de définir la manière dont vos données doivent être structurées et le moment où elles peuvent être lues et écrites. ? Quel fichier doit être utilisé pour les règles de base de données? database.rules.json ✔ Les règles de base de données pour bucketlist-72e57 ont été téléchargées sur database.rules.json. Les futures modifications apportées à database.rules.json mettront à jour les règles de base de données lorsque vous exécuterez firebase deploy. === Configuration de l'hébergement Votre répertoire public est le dossier (par rapport à votre répertoire de projet) qui contiendra les ressources d'hébergement à télécharger avec firebase deploy. Si vous avez un processus de génération pour vos actifs, utilisez le répertoire de sortie de votre génération. ? Que voulez-vous utiliser comme répertoire public? Publique ? Configurer comme une application d'une seule page (réécrire toutes les URL dans /index.html)? Oui ✔ Écrit public / index.html i Écriture des informations de configuration sur firebase.json… i Écriture des informations de projet sur .firebaserc… ✔ Initialisation de Firebase terminée!

Este comando criará dois arquivos:

  • .firebaser
  • . Firebase .JSON

Estes dois arquivos contêm configurações de firebase e informações importantes sobre o seu aplicativo.

O arquivo JSON deve ficar assim:

"hosting": "public": "public", "ignorer": , "réécrit": [ "source": "**", "destination": "/index.html" 

Building para produção

angular CLI fornece o comando ng build --prod que lança uma construção de produção. Este comando cria uma pasta dist que contém todos os arquivos para atender o aplicativo. Esse processo é importante para tornar seu aplicativo mais leve e mais rápido ao carregar páginas da Web. Para fazer isso, basta publicar:

ng build --prod

Implemente o aplicativo!

Se você seguiu todos os passos até o presente, nosso local APP angular agora está ligado ao Firebase e você pode facilmente transferir seus arquivos como com o Git. Basta executar o comando firebase deploy para implantar sua inscrição.

firebase deploy === Déploiement sur 'bucketlist-72e57'… déploiement de la base de données, hébergement de la base de données: vérification de la syntaxe des règles… ✔ base de données: syntaxe des règles pour la base de données bucketlist-72e57 est valide i hébergement: préparation du répertoire public pour le téléchargement… ✔ hébergement: 1 fichiers chargés avec succès dans la base de données: libération des règles… ✔ base de données: règles de la base de données bucketlist-72e57 publiées avec succès ✔ déploiement complet! 

O seu aplicativo agora é implantado e você pode visualizá-lo, iniciando o seguinte comando.

firebase open hosting: site

Conclusão

Como você viu, é muito fácil começar com o Firebase porque muito pouca configuração é necessária para hospedar sua inscrição. E demora muito menos tempo do que a criação de acomodações tradicionais! Angular é uma excelente estrutura para o desenvolvimento de aplicações. Ele realmente evoluiu ao longo dos anos e cada atualização é acompanhada por recursos mais avançados e correções de bugs ..

Para mais informações, visite o site oficial angular e Firebase e explore as possibilidades. Uso conjunto dessas duas tecnologias ..

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *