¿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

  • ¿Cómo puedo exportar varias carpetas con un package web?
  • El subrayado da error cuando se empaqueta con Webpack
  • ¿Cómo puedo usar una function auxiliar estática (javascript) en SCSS para configurar la url base para las imágenes para diferentes entornos?
  • Webpack 2: no se puede resolver el module
  • ¿Cómo crear un map fuente para WebPack?
  • Integración de AngularJS y Webpack
  • Error de post HMR inválido Webpack
  • No se puede hacer que bootstrap-sass funcione con el package web
  • Componentes de Render React que requieren styles en el server
  • {React jsx babel es6 webpack} ¿Cómo puedo hacer comentarios en el render (return (// || / ** /))?
  • Paquete web: sin file de salida, sin errores informados
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.