web-dev-qa-db-ja.com

Firebaseホスティング+ React with webpack

FirebaseホスティングをReact webpackを利用するプロジェクトに追加する方法はありますか？具体的には、それを https://github.com/mxstbr/react-boilerplate）に追加しようとしています。

これは私のfirebase.jsonファイルです

{
  "hosting": {
    "firebase": "name",
    "public": "app",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

firebase serveを呼び出すと、ページが空になっています。ただし、npm startを実行すると、アプリは正しく機能します。そのため、JS/Reactコードはindex.htmlに挿入されていません。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Welcome to Firebase Hosting</title>
  </head>
  <head>
    <!-- The first thing in any HTML file should be the charset -->
    <meta charset="utf-8">
    <!-- Make the page mobile compatible -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Allow installing the app to the homescreen -->
    <link rel="manifest" href="manifest.json">
    <meta name="mobile-web-app-capable" content="yes">
    <title>React.js Boilerplate</title>
  </head>
  <!-- The app hooks into this div -->
  <!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
  <body>
  <div id="app"></div>
  <div id="message">
      <h1>Welcome to Firebase Hosting</h1>
    </div>
  </body>
</html>
reactjsfirebasefirebase-hostingreactfire
11
astiefel

create-react-app パッケージを使用してreactアプリを作成しています。コマンド「npmrunbuild」を呼び出します。これにより、webpackの出力を含む「ビルド」ディレクトリが生成されます。 firebase.jsonファイルで、代わりに「build」ディレクトリをポイントします。次に、「firebaseserve」または「firebasedeploy」コマンドを実行します。

"hosting": {
  "public": "build",
  "rewrites": [
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]
}
17
caritos

私は同じ問題を抱えていました。 @Caritosはそれを正しく持っています。しかし、私は追加の問題を見つけました。

1）HTMLファイルにコードを追加する必要がありました。

<script type="text/javascript" src="/bundle.js"></script>

2）npmビルドディレクトリで、このリンクタグは自己終了しなかったため、正しくビルドされませんでした。

正しくない：

<link href="/bundle-f9b3749622929f71c476.css" rel="stylesheet">

正しい：

<link href="/bundle-f9b3749622929f71c476.css" rel="stylesheet" />

リンクタグを閉じると、Reactアプリがデプロイされました。

0
Amanda Koster