Перевернуть существующий проект в WebApp + Firebase (Firestore + Hosting) - PullRequest
Новая
       77

Перевернуть существующий проект в WebApp + Firebase (Firestore + Hosting)

0 голосов
/ 29 марта 2020

У меня есть приложение Flutter (работает правильно на Android / IOS) с использованием Firestore.

ЦЕЛЬ:

  1. Я бы хотел сначала он поддерживает web
  2. Я бы хотел разместить его на хостинге Firebase

Результаты на данный момент:

  1. Когда работает на локальной, пустой странице
  2. При развертывании в Firebase, кажется, даже не запускается индекс. html

Что я пробовал

  1. В соответствии с этим руководством:

    a) Добавлено веб-приложение в мой проект Firebase

    b) npm install -g firebase-tools

    c) firebase login

    d) firebase init

    ==> Я выбираю Firestore and Hosting

    ==> Использовать существующий проект, выберите мой project

    ==> использовать все настройки по умолчанию (кроме папки build / web для публикации c каталог)

    e) flutter channel dev flutter upgrade flutter config --enable-web

    f) flutter create .

    g) flutter build web

    h) Затем я копирую весь контент из папки build / web в папку / web, добавляю CDN из firebase в нижней части тела, затем вызовите Firebase JS SDK следующим образом:

ОШИБКИ

I получить эту ошибку при локальном запуске на chrome: 

(index):53 Uncaught ReferenceError: firebase is not defined

Что касается использования firebase deploy, на странице написано, что я успешно настроил хостинг, но индекс не отображается. html

Для справки: 

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <meta name="description" content="A new Flutter project.">

    <!-- iOS meta tags & icons -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="kidz_happy_pawn">
    <link rel="apple-touch-icon" href="icons/Icon-192.png">

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/png" href="favicon.png"/>

    <title>kidz_happy_pawn</title>
    <link rel="manifest" href="manifest.json">
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <link rel='stylesheet' type='text/css' href='/resources/tutorial/css/example.css'>
</head>
<body>

<div id="message">
    <h2>Welcome</h2>
    <h1>Firebase Hosting Setup Complete</h1>
    <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go
        build something extraordinary!</p>
</div>

<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>
<script>
  var firebaseConfig = {
    apiKey: "xxx-from-firebase",
    authDomain: "xxx-from-firebase",
    databaseURL: "xxx-from-firebase",
    projectId: "xxx-from-firebase",
    storageBucket: "xxx-from-firebase",
    messagingSenderId: "xxx-from-firebase",
    appId: "xxx-from-firebase",
    measurementId: "xxx-from-firebase"
  };
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();

</script>

<script>

    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }

</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

1 Ответ

1 голос
/ 29 марта 2020

зависит от того, как вы настроили свою пожарную базу apis.from flutter fire , вот как вы должны ее настроить. В каталоге приложения отредактируйте web / index. html, добавив следующее: `

<body>
    <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>
     <!-- ADD THIS BEFORE YOUR main.dart.js SCRIPT -->


var firebaseConfig = {
  apiKey: "",
  authDomain: "[YOUR_PROJECT].firebaseapp.com",
  databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
  projectId: "[YOUR_PROJECT]",
  storageBucket: "[YOUR_PROJECT].appspot.com",
  messagingSenderId: "",
  appId: "1:...:web:",
  measurementId: ""
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

`

...