Routen für die Bereitstellung festlegen

Question

Ich habe meine erste React-App mit Webpack erstellt. Jetzt möchte ich diese App außerhalb meiner Entwicklungsumgebung erreichbar machen, aber ich bekomme es nicht funktionieren.

Für die Entwicklung ich auf meinem lokalen Computer ausführen:

"start": "node server.js",

Das macht meine App über localhost:3000 erreichbar React. Das funktioniert großartig.

Aber jetzt möchte ich meine Reaktion App auf einem externen Server mit einer Domäne bereitstellen. Um ein Bündel meines Codes zu erstellen, schlug ich

"build": "webpack -p" Dies generiert eine Bundle-Datei in einem Unterordner MyProjectFolder/dist/bundle.js. Danach kopierte ich meine index.html in /dist/ und fügte die Bundle-Datei hinzu.

Diese beiden eingereicht, wo dann auf meinen externen Server kopiert, der Apache läuft. Der Webordner auf dem Server hat den gleichen Namen wie mein ProjectFolder. Ich versuchte dann, zu meiner App Zugriff über

`https://myDomain.de/MyProjectFolder/index.html

zeigen Diese mir diesen Fehler:

Ich denke, ich muss mein Router-Setup ändern, aber ich habe noch keine Tipp wie man das macht. In meiner Entwicklungsumgebung ist der Projektordner nicht in der URL enthalten. Wenn ich auf meine App zugreife, könnte dies ein Teil des Problems sein? Kann mich bitte irgendjemand durch dieses führen? Dieses Problem scheint für einige von euch sehr grundlegend zu sein, aber es ist das erste Mal, dass ich all diese neuen Technologien benutze, und ich habe schon so viel versucht und immer noch dieselbe Fehlermeldung. Was muss ich tun, um meine React App auf einem externen Server mit Apache mit einer anderen Domain zu betreiben. Bitte hilf mir.

Dies ist die Datei, wo meine Routen (ProjectFolder/index.js)

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 
) 

Schließlich mein 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" 
    } 
    } 

Und mein 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 
     }] 
    } 
    } 

definiert sind

UPDATE:

ich Lösung gesucht und gefunden habe diesen Github thread: Github Auf der Grundlage dieser Informationen, die ich

history={browserHistory} von meinem Router entfernt habe und jetzt habe ich wenigstens sehe meine App, aber ich bekomme einen neuen Fehler, das ist ähnlich wie die alte.

Nach dem Lesen der Nachricht Ich habe meinen Code

aktualisiert oben

import {Router, Route, IndexRoute, hashHistory} from 'react-router' 
<Provider store={store}> 
    <Router history={hashHistory}> 
    <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> 

Aber ich bin noch immer die Fehlermeldung. Eine Idee?

Answer 1

Ich habe Lösung gesucht und diese Github Thread gefunden: [Github] [2] Auf der Grundlage dieser Informationen, die ich

history={browserHistory} von meinem Router entfernt haben und jetzt sehe ich zumindest meine App, aber ich bekomme ein Neuer Fehler, der dem alten ähnlich ist.

Nach dem Lesen der Nachricht Ich habe meinen Code

aktualisiert

import {Router, Route, IndexRoute, hashHistory} from 'react-router' 
<Provider store={store}> 
    <Router history={hashHistory}> 
    <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> 

Aber es war immer noch der Fehler oben (Stand Q) erwähnt. Nachdem ich ausgeschlossen habe

if (module.hot) { 
    // Enable Webpack hot module replacement for reducers 
    module.hot.accept('./reducers',() => { 
    const nextRootReducer = require('./reducers').default 
    store.replaceReducer(nextRootReducer) 
}) 
} 

Der Fehler war weg. Jetzt habe ich noch diesen Fehler

EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

Aber ich denke, das hat nichts mit dem Problem in der Frage beschrieben zu tun

Answer 2

Wenn Sie verschiedene Konfigurationen für Umgebungen benötigen, können Sie verschiedene webpack Konfigurationsdateien erstellen und belichten globale Konstanten mit dem DefinePlugin.

new webpack.DefinePlugin({ 
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
}) 

Auf diese Weise können process.env.NODE_ENV in Ihrem React Code zugreifen können und verschiedene Routen an Ihrer Bequemlichkeit erstellen:

Wenn Sie bereits Ihre Umgebung in Ihrem System oder Container festgelegt haben, würden Sie so etwas wie schreiben.