Articles of create react app

创build – 反应 – 应用程序npm运行构build太慢

我对使用React相对来说比较新,并且正在学习create-react-app教程。 我正在Node环境中使用socket.io,React和Express创build一个简单的networking聊天服务。 我已经写完React应用程序的大部分function,现在正在服务器端通过Socket.io连接应用程序。 在前端工作是因为我可以运行“npm start”服务我的应用程序的开发版本。 但是,现在我在服务器端工作,实现Socket.io,每当我在前端发现问题时,我必须重新运行“npm run build”,每次需要15-30秒。 我确信有一个更快的方法来debugging这样的问题,而不必每次都编译我的反应的应用程序到静态文件。 请指教。

React主页属性不起作用

在我的package.json文件中,我有"homepage" : "http://myname.project.com/myapp", 我使用npm run build构build应用npm run build ,输出结果确认创build了一个/ build目录。 输出: build 102.97 KB / static / js / main.bfa46b52.js 24.37 KB build / static / css / main.cfe8a47e.css 该项目是假设它在/ myapp /托pipe的。 你可以用你的package.json中的主页字段来控制它。 生成文件夹准备好部署。 如果我使用npm start或serve -s build启动应用程序,那么应用程序将启动并加载index.html页面,但是来自index.html的静态资源的引用被破坏(/myapp/static/js/main.js和/myapp/static/css/main.css)。 (localhost:5000 / static / js / main.js工作; localhost:5000 / myapp / static / js / main.js不起作用),我可以直接导航到他们。 如果我将构build文件夹部署到/ […]

在创build反应应用程序项目上进行快速身份validation

我正在开发一个带有Express后端的简单项目和一个使用create-react-app引导的前端: my-project |- server.js # backend entry point |- client/ |– package.json # client package.json |– index.js # client entry point 遵循一些指导( 如这样 ),我现在有一个localhost:3001上的后端服务工作,并且在localhost:3000上有一个工作的前端服务。 所有对/api/myapi的API调用都通过代理服务器成功redirect到端口3001。 在我的客户端package.json中: "proxy": "http://localhost:3001/", 现在,一切工作正常,但我有困难的时间使login工作。 事实上,当他访问/login url时,我无法将用户redirect到login页面。 在我的server.js文件里面: app.get('/login', function(req, res) { res.send('This is the login page'); }); 这是根本不工作,而URL /login给我一个空白页,而不是(它看起来不是在端口3001)。 由于这是我第一次使用Express,所以有人可以这样解释我为什么不工作?

即使使用新build的应用程序,create-react-app的“npm start”也不起作用。 在chokidar node_module中抛出错误

在使用'create-react-app'的新创build的应用程序中使用'npm start test_app'时遇到此错误。 这个问题也出现在我以前使用create-react-app创build的项目上。 我已经尝试将节点版本更新到v8.9.1,将npm版本更新到5.5.1。 问题仍然存在。 test_app@0.1.0 start / home / user / test_app react-scripts start Starting the development server… events.js:160 throw er; // Unhandled 'error' event ^ Error: watch /home/user/test_app/public ENOSPC at exports._errnoException (util.js:1012:11) at FSWatcher.start (fs.js:1429:19) at Object.fs.watch (fs.js:1456:11) at createFsWatchInstance (/home/user/test_app/node_modules/chokidar/lib/nodefs-handler.js:37:15) at setFsWatchListener (/home/user/test_app/node_modules/chokidar/lib/nodefs-handler.js:80:15) at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/user/test_app/node_modules/chokidar/lib/nodefs-handler.js:228:14) at FSWatcher.NodeFsHandler._handleDir (/home/user/test_app/node_modules/chokidar/lib/nodefs-handler.js:407:19) at FSWatcher.<anonymous> […]

在Heroku上使用Rails API部署Create-React-App

我有一个问题让我的反应/ rails应用程序在heroku上工作。 我设法得到它的部署和rails服务器启动,但我没有看到我的反应的应用程序。 我觉得我很接近,但不知道缺less什么。 所以我的进程目前是从客户端目录在本地运行npm run build ,在客户端build立一个“build”目录。 然后我用git push heroku master来提交构build的结果并推送到Heroku。 然后导航到浏览器中的heroku应用程序,我只是得到一个空白页,这是一个索引文件,我手动从构build目录复制到公共。 我不确定索引文件是否正确,但我只是想确保我可以打一些东西。 最后,我想推回购,并自动运行构build。 我已经看到这个提到的各个地方,但我总是得到一个react-script不存在的错误,当我运行npm run build在服务器上npm run build 。 我的configuration如下: 应用程序的基本结构 /app – root of Rails app /client – root of React app /public – does display index page 根/客户机/的package.json { "name": "qc_react", "version": "0.1.0", "private": true, "devDependencies": { "react-scripts": "^0.8.4" }, "dependencies": […]

你如何使用“yarn create <pkg-name>”?

我正在阅读Yarn博客,发现它支持纱线创build,就像create-react-app一样。 https://yarnpkg.com/blog/2017/05/12/introducing-yarn/ 我本地尝试…基本上做了非常简单的应用程序与以下package.json。 { "name": "create-test-app", "version": "1.0.0", "bin": { "create-test-app": "./index.js" }, "dependencies": { … } } 但不知何故,它抱怨说找不到包裹。 “错误在”npm“registry中找不到软件包”create-test-app“。 为了使用“纱线创build”,我应该上传“npm”registry? 不能在本地尝试? 提前致谢。

使用Express创build反应应用程序

我需要查询一个数据库,我正在使用create-react-app 。 连接到数据库( pg-promise )的库不能与Webpack一起使用,需要在节点服务器上运行。 所以我安装了Express并且有这个: app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html')); }) 如何从React页面加载数据库中的数据? 我虽然使用request但我怎样才能请求我自己的服务器? 我应该添加到上面的代码行? 我认为它会是这样的: app.get('/query/:querybody', (req, res) => { // process and return query }) 这是正确的吗? 我怎样才能使它与SPA一起工作?

create-react-app与节点快速获取%PUBLIC_URL%

我正在尝试使用快递服务器创build反应应用程序。 设置服务器后,当我点击要求,我越来越 GET http://localhost:3333/%PUBLIC_URL%/favicon.ico 400 (Bad Request) 在错误预览它给我 URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico' at decodeURIComponent (<anonymous>) at decode_param (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/layer.js:172:12) at Layer.match (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/layer.js:123:27) at matchLayer (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:574:18) at next (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:220:15) at jsonParser (/home/owaishanif/code/flashcard-app/node_modules/body-parser/lib/types/json.js:103:7) at Layer.handle [as handle_request] (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:317:13) at /home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:284:7 at Function.process_params (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:335:12) 这是服务器代码 var express = require('express'); var bodyParser = require('body-parser'); var […]

创buildReact App + Express.js + Passport.jslogin问题

所以,我试图在后端使用Express.js创buildReact应用程序。 我在两个不同的端口上运行 – 前端是3000,后端是3001.我正在使用本地通行证策略的login系统。 login系统工作正常。 在前端,我有一个注册/login表单发送一个posthost请求localhost:3001 /注册(或login),并成功注册/login用户。然后,我有另一个路线在后端应该返回当前login的用户的数据,如果有login的用户,或者以其他方式返回具有“未authentication”消息的对象。 app.get('/loggedUserInfo', function(req, res) { if (req.user) { console.log(req.user); res.json(req.user); } else { console.log('not authenticated'); res.json({'message': 'not authenticated'}); } }); 现在,在客户端,我想根据这个请求的响应修改导航栏。 例如,如果用户login,我想要一个包含注销button的导航栏,如果用户没有login,我想要一个带有login和注册button的导航栏。 所以,在React组件中,我有这个相关的代码: componentDidMount() { fetch('localhost:3001/loggedUserInfo') .then(res => console.log(res.json())); } 这应该会改变组件的状态,但是它将响应logging到控制台,仅用于testing。 而且每一次,即使用户login,它都会返回“未通过身份validation”的对象。 这就像用户从未login过。 但是,另一方面,如果我去我的浏览器中的localhost:3001 / loggedUserInfo,在用户login后,我得到了预期的结果。 它返回我需要的用户信息。 这真的是在烦扰我,我似乎无法弄清楚为什么会发生这种情况。 我需要客户端的数据。 如果有人想看到我的app.js文件,这里是相关的代码(按顺序),我认为我包括了需要在那里的一切: var cookieParser = require('cookie-parser'); var session = require('express-session'); var […]

创build反应应用程序无法读取环境variables

我有一个反应的应用程序,用create-react-app创build,然后用命令构build应用程序: npm run build 如果我们通过运行ENV=production npm run start应用程序和开发代码,运行ENV=production npm run start它可以读取process.env.ENVvariables,因为我将这个插件添加到webpack dev config new webpack.DefinePlugin({ 'process.env':{ 'ENV': JSON.stringify(process.env.ENV), } }), 我也将上面的脚本添加到webpack prod config,但是如果在构buildENV=prod serve -s build后尝试执行此命令,则无法读取环境variables 如何解决这个问题?