2017-01-24 6 views
0

私はウェブ開発にはまったく新しいので、私の選択したツールでシングルページアプリケーションを作成するように求められました。唯一の要件は、NetBeans:Java Web> WebアプリケーションのGlassFishサーバー上でローカルに実行する必要があることです。私は、Facebookが提供するcreate-react-appスターターキットを使ってアプリケーションをビルドします。 npm run buildを実行すると、htmlファイルとjsファイルを含むビルドフォルダが作成されます。しかし、htmlファイルをダブルクリックすると、ブラウザが開き、空のページが表示されます。私はそれを開くときにアプリケーションを表示するバンドルされたhtmlファイルを取得するために私が設定しなければならないことを誰かが知っていますか?Node.js create-react-appビルド

あなたの作成反応するアプリ上で実行した後、「npm run buildを」あなた

+0

ブラウザのコンソールでエラーが確認されましたか? –

+0

JAVA、AngularJS、*データベースを生成するためのhttps://jhipster.github.io/ scafoldingツールを試したと思います。 –

+0

ブラウザコンソールでエラーが表示されませんでした。 – Sebastian

答えて

4

ありがとうコードを生成し、それだけでこれを支援するための指示が表示されます。それはグローバルNPMに「pushstateサーバ」をインストールして

You may also serve it locally with a static server: 

npm install -g pushstate-server 
pushstate-server build 

最初のコマンド、「npm install -g pushstate-server」のみ、1回実行する必要があります:それは何かのように述べています。 2番目のコマンド "pushstate-server build"は、単純な静的サーバー、pushstate-serverを実行し、 "build"フォルダ内のコンテンツをhttp://localhost:9000に表示します。ご希望の場合は、コマンドラインの最後に追加して、ポート番号を変更することができます:「pushstate-server build 1234

UDPATE:サーバレス方式...

あなたの目標は、ファイルからページを実行する場合 Webサーバーからではなく、build/index.htmlを調整してJSとCSSへのパスを修正する必要があります(あまり重要ではないが、favicon.ico)。 create-react-appによって生成されたindex.htmlはJSとCSSが "/ static/..."になることを期待しています。ただし、ファイルシステムから開くと、そのパスは正しくありません。先頭のスラッシュを削除してURLを相対パスにすると、ページはファイルシステムから正しくロードされます。

"npm run build"を実行した後、生成された "build/index.html"ファイルを開きます。 "/favicon.ico"、 "/static/js/main.[random string" .js "および" /static/css/main.[random string] .css "から先行するスラッシュを削除し、変更を保存しますすべてが "静的/ ..."であり、 "/静的/ ..."ではない)。ブラウザーでページを再読み込み/更新します。

+0

ありがとうございますが、ビルドを表示するたびにこのpushstate-serverが必要ですか?私の目標は、単純に誰にでも配布できるNode/jsパッケージとは独立したhtml/jsパッケージを構築することです。 – Sebastian

+0

はい、上記の方法を使用するには、エンドユーザーがある種の静的HTTPサーバーを実行している必要があります。しかし、あなたが探していることをする方法があります。次の提案を含むように私の答えを修正します... "npm run build"を実行した後、生成された "build/index.html"ファイルを開きます。 "/favicon.ico"、 "/static/js/main.[randomstring].js"、 "static/css/main。[ランダムな文字列] .css"から先頭のスラッシュを削除し、変更を保存します。 index.htmlをダブルクリックすると –

+0

が読み込まれます。先行するスラッシュを削除しても機能しますが、画像やアイコンなどの他のリソースはアプリケーションに表示されません。彼らのパスは相対パスではなく、jsファイルのどこかに隠されているようです。私はそれらを見つけましたが、パスは文字列の連結によって生成されるため、操作が簡単ではありません。すべてのパスを相対的に作成するようにcreate-react-app/webpackを設定する方法を知っていますか? – Sebastian

関連する問題