标签: create-react-app

我正在使用 Django 和 React 创建一个 Web 应用程序。当谈到我的 React 开发服务器时，我的favicon.ico负载正常，但是当我构建文件时，我的 Django 开发服务器找不到并渲染我的图标，我不知道为什么。我尝试重命名我的图标并将文件类型更改为 .png。当我将我的图标放入静态目录中，并将文件名从图标更改为“icon.ico”之类的名称时，它会正确加载。但是，我无法将我的图标放在静态目录中，因为 CRA 在构建时不会将其复制到该目录中。这可能是一些小而简单的东西，所以我将向您展示所有相关文件。感谢您的任何见解！

编辑：我尝试过collectstatic，但这没有帮助

编辑2：使用{% load static %}但这不起作用，因为我的图标与我的html文件位于同一目录中。我还应该澄清，由于某种原因，保存我的 html 文件和我的 favicon 文件的父目录的导入链接没有注册。

我的导入build/index.html：<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"/>

urls.py

from django.contrib import admin
from django.urls import include, path, re_path
from django.conf.urls import include, url
from backend import views
from django.views.generic.base import RedirectView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('backend.urls')),
    path(r'^api/<int:pk>$', include('backend.urls')),
    path(r'^api/<int:pk>$/', include('backend.urls')),
    url(r'^.*$', views.index),

]

我的settings.py静态设置：

STATIC_URL = …

我已按照建议全局卸载了 create-react-app 。然后我运行npx create-react-app test并出现以下错误

Error: EEXIST: file already exists, mkdir 'C:\Users\User'
TypeError: Cannot read property 'loaded' of undefined
    at exit (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:97:27)
    at errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:216:3)
    at C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js:78:20
    at cb (C:\Program Files\nodejs\node_modules\npm\lib\npm.js:225:22)
    at C:\Program Files\nodejs\node_modules\npm\lib\npm.js:263:24
    at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:81:7
    at Array.forEach (<anonymous>)
    at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:80:13
    at f (C:\Program Files\nodejs\node_modules\npm\node_modules\once\once.js:25:25)
    at afterExtras (C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:171:20)
C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:97
  var doExit = npm.config.loaded ? npm.config.get('_exit') : true
                          ^

TypeError: Cannot read property 'loaded' of undefined
    at exit (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:97:27)
    at process.errorHandler …

我有一个具有不同页面（路由器）的 React 应用程序。我可以从一个页面转到另一个页面，刷新页面，一切都在本地工作得很好。

如果我部署应用程序npm run built并将其上传到我的主机 infinityfree.net ，并且一直想刷新页面或使用直接链接，则会收到 404 错误。

我尝试捕获所有路线，但它不起作用

class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="container">
          <ul>
            <li><Link to="/">Main</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/SomethingElse">Something else</Link></li>
          </ul>
          <hr />
          <Switch>
            <Route exact path="/" component={Main} />
            <Route path="/about" component={About} />
            <Route path="/SomethingElse" component={SomethingElse} />
          </Switch>
        </div>
      </Router>
    );
  }
}

有小费吗？谢谢你！

我的目标：我的 React 应用程序有一个环境变量来存储 Github Personal_Access_Token（稍后在 HTTP 标头中用于获取），然后我稍后将使用 Action Workflow 将应用程序部署到 Github 页面。

我尝试过的：鉴于将令牌作为纯文本推送/公开到 Githut 是一种违规行为，我将使用 Github 秘密来避免这种情况。我找到了这篇文章，并尝试实施 Github 工作流程来访问秘密，然后进行部署。

- name: Install and Build 
  run: |
      npm install
      npm run-script build
  env:
      REACT_APP_GITHUB_ACCESS_TOKEN: ${{ secrets.REACT_APP_GITHUB_ACCESS_TOKEN }} // this is what I need


- name: Deploy 
  uses: JamesIves/github-pages-deploy-action@3.5.5
  with:
     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     BRANCH: gh-pages
     FOLDER: build

问题： 工作流程成功运行后，我发现令牌被 GitHub 自动撤销，因为它显示在 中build/static/js/xxxx.chunk.js，并推送到 gh-page 分支：

{headers:{Authorization:"token ac4455aXXXXXXXXXXXXXXXXXXXf80512f3e"}}

这不是我所期望的，但我知道秘密在构建过程中被访问和嵌入，并被放入静态构建文件夹中。

有人可以给我指出方向吗，我在工作流程中做错了什么吗？或者工作流程从来就不是我的问题的解决方案，我不应该使用 GitHub 页面来托管使用秘密令牌的纯 React 应用程序？
提前致谢。

所有图像在我的 React 应用程序上都显示为损坏的图像图标。在这里，我尝试显示此图像，但这也显示为损坏的

我正在开发一个从节点端点提供 create-react-app 服务的存储库。因此，react 应用程序嵌套为子目录：

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Procfile\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 frontend\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 README.md\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 build\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json <---- "proxy": "http://localhost:$PORT" \n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public \n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App.css\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App.js\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 // etc...\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 .env <----- frontend env file, removed PORT value from here\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app.js\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 server.js\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 // etc...\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 .env <--- backend env file, PORT=9000 for node\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 static.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 yarn.lock\n

从 .env 文件中删除端口值后，CRA 在端口 3000 上运行。如果我硬编码端口 9000 而不是 $PORT，则代理在开发中可以正常工作。

但是，在部署到生产环境时，我希望前端代理 Heroku 的动态端口号，这是一个示例：\n

Heroku 似乎忽略了端口值，即使我故意在他们网站的 …

我使用该命令制作了一个新应用程序create-react-app。我删除了文件夹中的大部分文件src。所以现在我的文件夹看起来像这样：

index.js有

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

并App.js包括

import React from 'react'

function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

现在，当我运行yarn start并转到浏览器时，它显示：

问题：您可以清楚地看到“Hello World”文本的一些左边距。这是为什么？我没有包含任何 CSS 文件！另外，我该如何删除它？

我需要安装依赖项才能在 CI/CD 上构建前端。

文档文件：

FROM node:18.12.1
enter code here
ENV CI="true"
WORKDIR /workdir
COPY package.json package-lock.json /workdir/
RUN npm ci

包.json

{
  "name": "v2",
  ...
  "dependencies": {
    "formik": "^2.2.9",
    "i18next": "^21.9.1",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1"
  },
  "devDependencies": {
    "typescript": "^4.9.5"
  },
  ...
}

在容器中我遇到了这个错误：

npm ERR! code EUSAGE
npm ERR! 
npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with …