如何将带有Node后端的Svelte前端部署到Heroku?

时间:2020-09-24 19:58:04

标签: javascript node.js heroku server svelte

我用svelte创建了一个小型测试应用程序,并希望将其实时发布到Heroku。我还没弄清楚如何为Heroku服务。我是不熟悉测试和尝试这些事情的新手。我尝试配置package.json,但未成功。

当我部署到Heroku时,它会成功部署,但是会显示在控制台中。

Github repo here

This is the error

Package.json

LastName        SchoolEntryDate   YearsInSchools
Alexander       2016-08-08           4
Ragland                              'No Entry Date'
Marlow                               'No Entry Date'
Boyd            2019-08-21           1
Armstrong       2015-08-03           5
Ryder                                'No Entry Date'
Gayden                               'No Entry Date'

app.js

{
  "name": "svelte-app",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "build": "node app.js && npm run build:css && rollup -c",
    "build:css": "cd public && touch global.css && cd ../ && tailwind build src/style.css -o public/global.css",
    "dev": "rollup -c -w",
    "start": "sirv public"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^14.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^6.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "axios": "^0.20.0",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "cookie-parser": "^1.4.5",
    "cookie-session": "^1.4.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "express-session": "^1.17.1",
    "mongoose": "^5.10.5",
    "passport": "^0.4.1",
    "passport-local": "^1.0.0",
    "sirv-cli": "^1.0.0",
    "tailwindcss": "^1.8.10"
  }
}

2 个答案:

答案 0 :(得分:1)

几周前,我们也面临着同样的问题:

我使用express-csp-header包添加了标头(这不是一个非常理想的解决方案,但是在哭泣6-7小时后才知道为什么我选择了svelete)

   this.app.use(
      expressCspHeader({
        directives: {
          "default-src": [SELF, INLINE],
          "script-src": [
            SELF,
            INLINE,
            "*",
          ],
          "style-src": [
            SELF,
            INLINE,
            "*",
          ],
          "img-src": ["data:", "*", SELF, INLINE],
          "worker-src": [NONE],
          "frame-src": ["*"],
          "font-src": ["*"],
          "connect-src": ["*"],
          "block-all-mixed-content": false,
        },
      })
    );
  }

链接以表示csp标头:https://www.npmjs.com/package/express-csp-header

然后

app.use(express.static("public"));
app.get("*", (req, res) => {
  res.sendFile(path.resolve(__dirname, "public", "index.html"));
});

只需通过nodeJs服务即可到达svelete

答案 1 :(得分:0)

这应该可以解决您的问题。

app.use('/build', express.static('public/build'))

问题是您的svelte应用程序位于公共文件夹中,但是您在“ /”上提供index.html,并且它表示在/ build /上收到请求时不知道该怎么办。