¿Cómo puedo renderizar mis componentes de reacción en el server sin modificar mucho mi aplicación existente?

Mi file server.js está escrito en un nodo y se ve así:

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); } }); 

Mi index.html se ve así:

 <!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> 

Mi file index.js que incluye mi código de respuesta del enrutador se ve así:

 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')); 

Estoy usando webpack para comstackr e include elementos como sass e imágenes. Pude utilizar este tutorial para representar una sola página a través del server, pero apareció sin CSS e imágenes y también parece cambiar completamente el flujo de la aplicación de una manera que no parece buena. ¿Algún ejemplo de aplicaciones simples livianas que no usan 800000 bibliotecas diferentes que se procesan en el server?

2 Solutions collect form web for “¿Cómo puedo renderizar mis componentes de reacción en el server sin modificar mucho mi aplicación existente?”

El principal problema es que Node no sabe cómo manejar el requerimiento de sus activos no js / json.

Una solución soportada de fábrica por Webpack es usar target: 'node' y output.libraryTarget: commonjs2 que generará un package listo para ser require d en Node.

También querrá ver el ExtractoTextPlugin para extraer su CSS en un file separado, de lo contrario html se renderizará sin estilo hasta que el JS haya descargado.

Se vuelve un poco más complicado cuando se usa React Router, pero hay una buena documentation aquí – https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md

Estaba buscando algo similar y encontré útil este blog. Deberías intentar seguirlo también, será fácil de configurar y comenzar. Representación del lado del server con reactjsr, nodo y express

  • Error: la transformación de properties de class perdidas
  • Nodo JS y Webpack Token inesperado <
  • Reaccionar Internet Explorer 11 representando el resultado del mapeo sobre un error de colección Inmutable
  • ¿Cómo hacer reference en el directory del file SCSS desde el componente?
  • Webpack: uso del gestor de scripts en webpack.config.json
  • Uso del autoprefixer con postcss en el package web 2.x
  • ¿Cómo se usa gulp webpack-stream para generar un file con nombre propio?
  • La split del código de Webpack rompe la import de bromas con los componentes vueJs
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.