create-react-app build service-worker.js和manifest.json not found

时间:2017-12-22 17:51:26

标签: javascript reactjs express static http-status-code-404

我用create-react-app创建了一个应用程序。我已经构建了它,我已经编写了一个简单的快速应用程序来为反应构建的应用程序服务
我对静态文件和Express应用程序根文件夹中的文件有一些问题(例如manifest.json,service-worker.js)。现在我在这两个文件上都获得了404。
如何在Express中处理这些文件?它们必须在静态文件夹中?我必须修改反应应用程序?
我去看反应构建生成的文件,其中文件' service-worker.js'导入,字符串以' /'开头(即' /service-worker.js')

(自从我创建项目以来,我没有触及pwa的文件)

Here there's my root folder of my express app

我只添加了project.json和index.js(显然是node_modules),其他文件来自react build。

这是我的快递:

const compression = require('compression');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

app.use('/sketches', express.static('sketches'));
app.use('/static', express.static('static'));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));  
app.use(compression());

app.get('/', (req, res) => res.sendFile(__dirname + '/index.html'))

app.listen(process.env.PORT || 3000, () => console.log('server listening!'))

添加这行代码我得到了service-worker.js,但我无法获取草图文件夹中的文件。

app.use('/', express.static(__dirname));

1 个答案:

答案 0 :(得分:1)

我遇到了同样的问题,请按照以下步骤解决。

警告:我是这些技术的新手,并且对网络安全了解不多。这可能不是最好的方法。

我可以使用ejs模板引擎进行表达并使其工作,但它也应适用于您的情况。

1)create-react-app

2)结纱

3)将静态文件夹复制到公共

4)还在静态文件夹中复制service-worker.js

enter image description here

5)进入主Ctrl + f

6)在搜索命中输入/service-worker.js输入

7)您会看到类似var e="/service-worker.js";

的内容

8)更改为var e="/static/service-worker.js

9)最终打开service-worker.js,将/index.html更改为/

precacheConfig=[["/","d6be891ca003070326267be1d2185407"]