node.js - React-Router Webpack exclude server logic from bundling to client side javascript -


i making isomorphic react application, stuck of figuring out how exclude server-side logic bundling client side javascript using react-router , webpack.

so webpack has entry points "client.js" clientside bundle javascript.

import react "react";   import router "react-router";   import routes "../shared/routes";  router.run(routes, router.historylocation, (handler, state) => {   react.render(<handler/>, document.getelementbyid('react-app')); }); 

"client.js" contains react-router routes definition.

and server side, have epxress , route set * (all requests route here)

"server.js"

import routes "../shared/routes";  app.get('/*', function (req, res) {        router.run(routes, req.url, (handler, state) => {         let html = react.rendertostring(<handler/>);         res.render('index', { html: html });          });  }); 

since both client , server share same routes, if want set route in react-router e.g. /attractions/:id contain server side logic (database query, etc), bundled webpack client.js

so wondering if there way keep 1 routes.js shared both "client.js" , "server.js" , have "client.js" not bundle of server routes.

i came few possible solutions. see best way it.

  1. keep 2 routes, 1 server , 1 client, , server routes superset of client routes.
  2. add layer of abstraction react-router, instead of

<route handler="/attraction/:id"/>

i can use import abc "abcroutecontroller" , abcroutecontroller determine whether it's node or client , generate route or not generate route.

class appcontroller extends react.component {      render () {          let route;          if #isserver             route = <route handler={#somehandler}" path="/">         else             route =""          return route;     } } 
  1. add specific routing server.js. instead of
 app.get('/*', function (req, res) {      router.run(routes, req.url, (handler, state) => {             let html = react.rendertostring();             res.render('index', { html: html });     }); }); 

we add more specific routing handling pure server side logic (similar 2 seperate react-router server , client)


Comments

Popular posts from this blog

dns - How To Use Custom Nameserver On Free Cloudflare? -

python - Pygame screen.blit not working -

c# - Web API response xml language -