0

I have deployed my app to heroku. I'm integrating in the index.html file the dependencies that I've installed using npm. I've noticed that every time my page is loaded, I will get the Uncaught SyntaxError: Unexpected token < and my js and css files are not served. I have included vue.js and bootstrap as dependencies. Is there a solution for this?

index.js file

'use strict';

const express = require('express');
const socketIO = require('socket.io');

const PORT = process.env.PORT || 3000;
const INDEX = '/index.html';

const server = express()
.use((req, res) => res.sendFile(INDEX, { root: __dirname }))
.listen(PORT, () => console.log(`Listening on ${PORT}`));
const io = socketIO(server);

index.html file

<html>
  <head>
    <title>Test app</title>
    <link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
    <script src="/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/vue/dist/vue.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
  <script>
  const app = new Vue({
   el: '#app'
  });
  </script>
  </body>
</html>

package.json

{
  "name": "socket-server",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.4.1",
    "express": "^4.17.1",
    "socket.io": "^2.3.0",
    "vue": "^2.6.11"
  }
}
guggio
  • 201
  • 5
  • 18
  • Could you give your `package.json`? – Oleh Drozd May 03 '20 at 11:29
  • @OlehDrozd question updated – guggio May 03 '20 at 11:30
  • Maybe the problem is `const INDEX = '/index.html';`, you may try `./index.html` or just `index.html` And try to change it in index.html as well – Oleh Drozd May 03 '20 at 11:33
  • I've found this question https://stackoverflow.com/questions/27464168/how-to-include-scripts-located-inside-the-node-modules-folder that helped me figure out how to include my assets in the page. – guggio May 03 '20 at 11:38

0 Answers0