Webpack & npmを使用してReact-Redux Appliactionを現在開発中です。[react-router]を展開した後に「どのルートとも一致しません」
開発中に"start": "node server.js"
(私のpackage.jsonから)を実行すると、私のアプリケーションはlocalhost:3000/myApp
にアクセス可能です。
しかし、私はこのアプリケーションを他のユーザーが利用できるようにしたいと考えています。私は以前のjQuery Appsのいくつかがうまく動作しているLinuxサーバーをApacheで実行しています。
しかし、私のReact Appをバンドルするために私は"production": "webpack -p"
を実行し、これの出力は/dist/bundle.js
です。これはどこのファイルです
browser.js?26d3:49Warning: [react-router] Location "/test/index.html" did not match any routes
:その後、私はhtmlファイルを作成し、Iにアクセスしようとすると、次のエラーを得た場合は、サーバー
<!DOCTYPE html>
<html>
<head>
<title>Urlaub-planer</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--<link rel="stylesheet" href="./Urlaubspalner/css/daterangepicker.css" type="text/css">-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<!-- Auth0Lock script -->
<script src="//cdn.auth0.com/js/lock-9.0.min.js"></script>
</head>
<body>
<div class="todoapp" id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
の両方を入れて上bundle.jsを含ま私のルートは、私は同様の目的でSO上のいくつかの質問を発見した
import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import {Router, Route, IndexRoute, browserHistory} from 'react-router'
import createLogger from 'redux-logger'
import App from './containers/App'
import VacationSummary from './containers/vacation/VacationSummary'
import VacationRequest from './containers/vacation/VacationRequest'
import VacationRequestSummary from './containers/vacation/VacationRequestSummary'
import Home from './containers/Home'
import Demo from './components/Demo'
import rootReducer from './reducers/reducers'
import thunkMiddleware from 'redux-thunk'
var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();
const logger = createLogger();
let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, logger) (createStore)
let store = createStoreWithMiddleware(rootReducer)
let rootElement = document.getElementById('root')
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('./reducers',() => {
const nextRootReducer = require('./reducers').default
store.replaceReducer(nextRootReducer)
})
}
render(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="Home" component={Home}/>
<Route path="VacationSummary" component={VacationSummary}/>
<Route path="VacationRequest" component={VacationRequest}/>
<Route path="VacationRequestSummary" component= {VacationRequestSummary}/>
</Route>
</Router>
</Provider>,
rootElement
)
を定義しているが、それらのほとんどは問題を抱えている、実行中の目webpack-dev-serverにあります。 私は伝統的なApacheサーバー上でこう言っています。
開発環境外でこの作業を行うには、何が必要ですか? 申し訳ありませんが、Qが基本的ですが、これはこの新しいnpm、webpack、node ... stuffなどすべてを使った私の最初のプロジェクトです。
最後に私のpackage.json
{
"name": "Urlaubsplaner",
"version": "0.0.1",
"main": "index.js",
"scripts": {
"server": "node server/server.js",
"start": "node server.js",
"watch": "webpack --watch",
"production": "webpack -p"
},
"author": "Auth0",
"license": "MIT",
"dependencies": {
"classnames": "^2.2.5",
"css-loader": "^0.23.1",
"material-ui": "^0.15.2",
"moment": "^2.13.0",
"react": "^15.1.0",
"react-bootstrap-daterangepicker": "^3.1.0",
"react-dom": "*",
"react-redux": "*",
"react-router": "*",
"react-tabs": "^0.7.0",
"react-tap-event-plugin": "^1.0.0",
"react-yearly-calendar": "^1.1.4",
"redux": "*",
"redux-form": "^5.2.5",
"redux-logger": "^2.6.1",
"redux-thunk": "*",
"style-loader": "^0.13.1"
},
"devDependencies": {
"babel-core": "^5.6.18",
"babel-loader": "^5.1.4",
"babel-plugin-react-transform": "^1.1.0",
"express": "^4.13.3",
"webpack": "^1.9.11",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.2.0"
}
}
そして、私のwebpack.config
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
{test: /\.js$/,
loaders: [ 'babel' ],
exclude: /node_modules/,
include: __dirname
}]
}
}
ご挨拶。
ページはlocalhost:3000でアクセスできますが、これはノードサーバー経由です。しかし、別のドメインにある通常のApacheサーバー経由で実行したいだけです。そして私のサーバ上の/ distからbundle.jsを含むindex.htmlを押すたびに、それはルートにマッチしていないと言います – BayLife