4
ist mein server.js Datei in Knoten geschrieben und sieht wie folgt aus:Wie kann ich meine reagierenden Komponenten auf dem Server rendern, ohne meine bestehende App stark zu verändern?
var path = require('path');
var express = require('express');
var app = express();
var PORT = process.env.PORT || 8080
// using webpack-dev-server and middleware in development environment
if(process.env.NODE_ENV !== 'production') {
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var webpack = require('webpack');
var config = require('./webpack.config');
var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
app.use(webpackHotMiddleware(compiler));
}
app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', function(request, response) {
response.sendFile(__dirname + '/dist/index.html')
});
app.listen(PORT, function(error) {
if (error) {
console.error(error);
} else {
console.info("Listening on port %s", PORT);
}
});
wie Meine index.html aussieht:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>what ever</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id='root'/>
</body>
<script src="/bundle.js"></script>
</html>
Meine index.js Datei, die mein Router-Code sieht reagieren umfasst wie folgt:
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory, hashHistory } from 'react-router';
/*----------- STYLESHEETS -----------*/
require('./assets/stylesheets/base.scss');
let history = process.env.NODE_ENV === "production" ? browserHistory : hashHistory;
/*----------- ROUTE COMPONENTS -----------*/
import Home from './components/home';
import Company from './components/company';
import Features from './components/features';
import Help from './components/help';
import SignUp from './components/signup';
import Work from './components/work';
render((
<Router history={history}>
{/** ###### HOME ROUTE ###### */}
<Route path="/" component={Home} />
<Route path="/company" component={Company} />
<Route path="/help" component={Help} />
<Route path="/features" component={Features} />
<Route path="/signup" component={SignUp} />
<Route path="/work" component={Work} />
{/** ###### END HOME ROUTES ###### */}
</Router>
), document.getElementById('root'));
Ich verwende Webpack, um Assets wie Sass und Bilder zu erstellen und einzuschließen. Ich konnte this Tutorial verwenden, um eine einzelne Seite über den Server zu rendern, aber es erschien ohne CSS und Bilder und es scheint auch den Fluss der App auf eine Weise völlig zu ändern, die nicht gut scheint. Beispiele für leichte einfache Apps, die nicht 800000 verschiedene Bibliotheken verwenden, die auf dem Server gerendert werden?
Die „universelle“ Beispiel von redux könnte Ihnen helfen: https://github.com/reactjs/redux/tree/ Meister/Beispiele/universal. Es ist eine einfache App mit Server-Rendering, und es ist einfach, die Redux-Teile zu ignorieren, wenn Sie möchten. –