Articles of isomorphic javascript

在React.js,node.js,webpack,babel,express中使用fs模块

我有一个要求,我正在呈现视图,其中我显示一个表单。 在提交表单时,我需要收集表单数据并创build一个文件,并将表单数据保存为该文件中的JSON。 我正在使用React.js,node.js,babel和webpack。 挣扎了一下,实现了这一点,我想到了,我必须使用同构或通用JavaScript即使用反应和渲染在服务器端,因为我们不能在客户端使用FS模块。 推荐这个服务器端 。 我运行它使用: npm run start 在这之后,我可以在控制台中看到[Object Object]从下面的反应组件(HomePage.js)的第1行打印在控制台上。 但是稍后当我访问这个页面时,会出现一个错误: 'bundle.js:18未捕获错误:找不到模块“fs”“ 我如何使用FS模块的反应? 以下是代码片段: webpack.config.js "use strict"; const debug = process.env.NODE_ENV !== "production"; const webpack = require('webpack'); const path = require('path'); module.exports = { devtool: debug ? 'inline-sourcemap' : null, entry: path.join(__dirname, 'src', 'app-client.js'), devServer: { inline: true, port: 3333, contentBase: "src/static/", historyApiFallback: […]

同构JS – 只有httpRequest客户端

关于同构stream量应用中商店数据总量的问题。 (我正在使用的反应,ALT,ISO和节点,但理论适用于其他的例子) 我有一个stream量'商店'( http://alt.js.org/docs/stores/ ),需要从api获取数据: getState() { return { data : makeHttpRequest(url) } } 当用户在SPA中导航时,更多的数据将通过http请求加载。 我希望这个应用程序是同构的,以便我可以呈现应用程序完整的HTML包括最新的数据服务器端,并返回给用户的快速初始页面加载。 react.renderToString()允许我将应用程序呈现为html,并且可以使用alt&iso来播种数据: storeData = { "MyStore" : {"key" : "value"}}; // set data for store alt.bootstrap(JSON.stringify(storeData || {})); // seed store with data var content = React.renderToString(React.createElement(myApp)); // render react app to html 问题是,当运行js服务器端时,我会看到错误,因为商店将要发出一个http请求,这是不可能的(因为xmlhttprequest不会存在于节点中) 什么是解决这个问题的最好方法? 我能想到的唯一解决scheme是将商店中的httprequest包装在: var ExecutionEnvironment = require('react/lib/ExecutionEnvironment'); […]

在通用/同构应用程序中组织package.json依赖项

有了React和其他框架,现在通常使用npm和package.json来安装你将在前端使用的库。 如果您正在开发通用/同构应用程序,则会引入前端和后端的依赖项存储在同一个文件中的问题,从而创build大量的依赖项列表。 如果你使用npm –save / save-dev这两种types的依赖关系(前端,后端)变得混杂,很难知道,而不是一个接一个,哪一个在哪里使用。 除了手动sorting和pipe理依赖列表之外,有没有办法保持列表整洁? 你有什么策略来pipe理依赖列表?

React / Redux同构/服务器端渲染和媒体查询

我开始创build一个基于Node的同构React / Redux应用程序。 该项目的一个要求是基于“移动”和“桌面”视图的“adapative”渲染特定组件。 我已经实现了Redux动作和Reducer来存储有关用户视图的屏幕信息(基于媒体查询 – “小”,“中”,“大”)的状态。 在调整状态/商店得到更新。 默认状态是“小”。 const defaultState = { isMobile: true, isTablet: false, isDesktop: false, sizes: { small: true, medium: false, large: false, huge: false, }, }; 在需要根据屏幕尺寸在两个不同版本中呈现“自适应”的组件中,我简单地做一个: 如果(小)返回变化1 如果(中)返回变化2 所有的工作。 现在我面临两个问题: 我的应用程序是同构的,这意味着标记也呈现服务器端。 服务器不知道用户的浏览器和媒体查询。 所以,因为我的默认状态是“小”,服务器将始终呈现“variation1”。 节点服务器是该站点的入口点。 它看起来像渲染需要“延迟”(中间件?),服务器需要从React应用程序获取“传递”之前从客户端获取一些有关浏览器宽度的信息。 任何想法如何解决这个问题? 因为渲染是基于状态的,所以即使在浏览器大小是“桌面”的情况下,在加载“变化1”之后几秒钟总是可以看到(闪烁)。 这是因为在使用当前屏幕宽度更新状态之前,JS检测需要几毫秒的时间。 我认为这与上面的问题和默认状态一起玩。 我找不到任何解决scheme1,但我想必须有一些同构和响应/自适应。

同构反应与Webpack的resolve.root选项

我的React应用程序使用需要相对于我的JS文件的根,使用Webpack的resolve.root。 即我的文件结构包含以下内容: components App.react.js containers AppContainer.react.js 在AppContainer.react.js中,我有: import App from 'components/App.react'; 这在客户端工作。 现在我试图使它是同构的。 如果我在我的server.js需要AppContainer.react.js,它说components/App.react没有find。 节点正试图要求containers/components/App.react.js ,它不存在。 我怎样才能使Node相对于给定的目录? 编辑:我的目录结构如下所示: css/ html/ js/ components/ App.react.js containers/ AppContainer.react.js main.js <- requires AppContainer public/ server/ server.js <- requires AppContainer

在iis上运行反应同构

我正在尝试使用iis上的iisnode使用node.js来运行反应 我已经安装了最新的节点和最新的iisnode,并使用这个stackoverflow作为指导,但不能得到错误500. 如何运行Node.JS服务器的Web应用程序? 有关如何在iis上做这个的指南?

如何避免在ReactJS同构应用程序服务器上出现错误'localStorage未定义'?

我在我的webApp中使用localStorage在客户端存储数据。 但是,当我试图使应用程序同构,这会导致一个问题。 由于节点不是浏览器环境,因此无法定义“window”,“localStorage”等对象。我该如何解决这个问题?

在同构重做应用程序中设置cookie的位置?

我有3个关于redux和同构应用的一般问题: 在客户端和服务器之间共享“运行时”数据的最佳方式是什么? 例如,当用户login远程API时,我将会话对象存储在cookie中。 这样, 下一次客户端请求我的前端时,前端服务器可以读取cookie并使用前一个会话初始化redux存储。 这样做的缺点是客户端必须在启动时(例如在根组件的componentDidMount中)validation/无效会话。 我应该请求会话服务器端,而不是从cookie中读取? 我应该在哪里执行cookie存储的操作,在动作创build者还是减速器中? 我应该将cookie存储在处理用户会话的reducer中吗? 我应该在哪里执行redirect用户的操作(通过react-router)? 我的意思是当我的用户login成功后,我应该从哪里发送redirect操作(一旦解决login许诺,从loginActionCreator中,在别的地方?) 提前致谢。

警告:React试图在容器中重用标记,但校验和无效

我试图得到一个同构的Node.js,Express,Webpack,React应用程序工作。 我收到以下错误。 有关如何解决它的任何build议? Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the […]