Tag: 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 如何解决这个问题？