Nodeサーバー上でReact.jsを動かす

現在Nodeサーバーを簡単に立ち上げて、その中でreact.jsを動かしたいと思っております。
nodeのサーバーは

■ server.js

var fs = require("fs");
require("http").createServer().on("request", function(req, res){
  fs.readFile("./index.html", "utf-8", function(err, data){
    res.setHeader("Content-Type", "text/html");
    res.write(data);
    res.end();
  });
}).listen(1234);

みたいな感じで、 $node server.jsで、index.htmlを動かすことができます。

そのサーバー上でReact.jsを使いたいのですが、

■ index.html

<!DOCTYPE html>
...(略)...
<body>
<div id="app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>
<script type="text/jsx;harmony=true">

Reactのコード

</script>

だと普通にReactが動くのですが、
webpackを使ってindex.htmlを書き換えるとreactが動きません。
■ webpackを使ったindex.html

<!DOCTYPE html>
...(略)...
<body>
<div id="app"></div>

<script src="bundle.js">
...

webpackの設定では、app.jsを起点にして、bundle.jsを生成しています。
以下はapp.jsの中身です

■ app.js

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <p>Hello World</p>,
  document.getElementById('app')
)

このようにapp.jsをwebpackで実行して、bundle.jsをindex.htmlから読み込んでいるのですが、
$node server.jsを実行しても syntax error < のようなものが出て来ます。

MAMPなどのサーバー上では動きますが、
$npm start
$node server.jsでは動かないという意味です。。

nodeサーバー上で,react.jsを動かす方法をご教授ください。

行動規範の内容に同意します

回答1件

ベストアンサー

server.js で index.html しか配信対象にしていないので、bundle.js が配信されないのが原因ではないでしょうか？
CSS やイメージファイルなどもあるので、静的コンテンツ用のディレクトリに index.html を配備し、その下全体を node.js の配信対処にし、 webpack からそのディレクトリにリリースするようにされてはいかがでしょうか。

「node.js 静的コンテンツ」で検索すると、静的コンテンツ配信方法はいろいろ出ると思います。
参考：node,expressでとりあえず静的ファイルを公開したい

投稿2017/01/10 22:06